Key HTML Elements and Attributes at a Glance
# Overview
Through a short overview and description of the HTML elements and attributes used in web development projects, learn what you need to design and build web pages.
This helps you follow web standards while building an effective, semantic markup structure.
- Written based on HTML5.
- Everything must be usable in all browsers. (Items not supported in IE are marked separately.)
- Deprecated elements and attributes are excluded.
- The focus is on semantic meaning.
- It assumes elements are not used for their presentational meaning (how they are displayed on screen), so that content is left out as much as possible.
- Empty tags are shown with a
/, like<TAG />. - Attributes that an element must use (required attributes) are marked
(required)in the description. (All others are optional attributes.) - Elements that are, from my personal experience, frequently used, important, or difficult get extra emphasis and comments.
- Elements that are, from my personal experience, rarely used, less important, or easy are left out or simplified.
# Main root elements
These elements form the basic structure (scope) of an HTML document.
The lang attribute is a global attribute, and when you use it on <html>, it sets the language of the whole document.
12345<!DOCTYPE html> <html lang="ko"> <head></head> <body></body> </html>
# Metadata elements
These elements specify basic information about the document or its relationship to other resources.
Some metadata elements provide information to browsers, search engines, and so on, and help with effective SEO and a better user experience.
They must all be inside the <head> element.
| Element | Description | Display | Reference |
|---|---|---|---|
<title> |
Specifies the document title shown in the browser's title bar or page tab. | MDN | |
<base /> |
Specifies the base URL for all relative URLs in the HTML document. A document can contain only one <base /> element.- href: The base URL- target: The default value for elements that use the target attribute (<a>) |
MDN | |
<link /> |
Links an external resource (HTML, CSS, icons, and so on) and states its relationship to the current document. - rel: (required) The relationship between the current document and the external resource (Link Types)- href: The URL of the external resource- type: The MIME type of the external resource |
MDN | |
<meta /> |
Used to represent other metadata. (Provides information to search engines and browsers) - charset: The character encoding- name: The name of the metadata (kind of information)- http-equiv: A directive that changes how the server or user agent behaves (provides an HTTP response header)- content: The value for name or http-equiv |
MDN | |
<style> |
Specifies style information (CSS) for the document or part of it. - type: MIME type |
MDN |
# Content sectioning elements
These elements are used to divide the content structure of a document semantically.
They have no functional differences.
| Element | Description | Display | Reference |
|---|---|---|---|
<h1><h2><h3><h4><h5><h6> |
Structures the information hierarchy of the document. (Heading) Specifies the title of the document or a section, forming the document's outline. The lower the number, the higher (more important) the heading level. A document can contain only one <h1> element. |
block |
MDN |
<header> |
Specifies the header of the document. Usually contains a logo, title, search, and so on. |
block |
MDN |
<footer> |
Specifies the footer of the document. Usually contains the author, copyright, related documents, and so on. |
block |
MDN |
<main> |
Specifies the main content of the document. A document can contain only one <main> element. |
block |
MDN |
<article> |
Specifies an area that stands on its own or can be reused. Magazines, newspaper articles, blogs, and so on. Identified by including a heading ( <h1>) element.Write the date and time it was written in the datetime attribute of <time>. |
block |
MDN |
<section> |
Specifies a generic area of the document. Identified by including a heading ( <h1> - <h6>) element. |
block |
MDN |
<aside> |
Specifies separate content in the document. Usually specifies a sidebar with ads, other links, and so on. |
block |
MDN |
<nav> |
Specifies an area that provides links to other pages. (Navigation) Usually specifies menus, tables of contents, indexes, and so on. |
block |
MDN |
<address> |
Wraps contact information. | block |
MDN |
<div> |
Specifies a content area that inherently represents nothing. (Division) | block |
MDN |
12345<section> <h2>Title</h2> <div>Contents1</div> <div>Contents2</div> </section>
# Text content elements
These elements structure text and give it meaning.
They improve the readability and accessibility of information.
| Element | Description | Display | Reference |
|---|---|---|---|
<ol> |
Specifies an ordered list. (Ordered List) Can contain only <li> as children.The order of the items can indicate importance. start: The starting value for the item numberstype: The type of numbering for the items |
block |
MDN |
<ul> |
Specifies an unordered list. (Unordered List) Can contain only <li> as children. |
block |
MDN |
<li> |
Each item in a list. (List Item) Cannot be used on its own and must be a child of <ol> or <ul>.value: Specifies the order of the item. |
list-item |
MDN |
<dl> |
Specifies a group of terms and definitions (descriptions). (Description List) Can contain only <dt> and <dd>.Useful for showing key/value pairs. |
block |
MDN |
<dt> |
Specifies a term. (Definition Term) | block |
MDN |
<dd> |
Specifies a definition (description). (Definition Details) | block |
MDN |
<p> |
Specifies a paragraph. (Paragraph) Assistive technologies usually provide a shortcut to jump to the next paragraph. |
block |
MDN |
<hr /> |
Used to separate paragraphs. (Horizontal Rule) It is displayed as a horizontal line, but you should use it only for its semantic meaning. |
block |
MDN |
<pre> |
Specifies preformatted text. (Preformatted Text) Displays text while keeping its whitespace and line breaks. Displayed in a monospace font by default. |
block |
MDN |
<blockquote> |
Specifies a general quotation. (Block Quotation) - cite: The URL of the quoted information |
block |
MDN |
123456<dl> <dt>Coffee</dt> <dd>Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</dd> <dt>Milk</dt> <dd>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</dd> </dl>
# Inline text elements
You can emphasize text or apply styles to it to write a more readable document.
| Element | Description | Display | Reference |
|---|---|---|---|
<a> |
Specifies a hyperlink to another URL. (Anchor) Another page, a location on the same page ( #, hash), a file, an email address, a phone number, and so on.- download: Means this element is used to download a resource- href: The link URL- rel: The relationship between the current document and the link URL (Link Types)- target: Where to display the link URL (browser tab)- type: The MIME type of the link URL |
inline |
MDN |
<abbr> |
Specifies an abbreviation. (Abbreviation) Usually provides the full text or a description with the title attribute. |
inline |
MDN |
<b> |
Specifies a range of text in a different style. (Bring Attention) Has no special meaning. Used to help the reading flow. Use it as a last resort when no other tag fits. Displayed in bold by default. |
inline |
MDN |
<mark> |
Used to highlight text to draw the user's attention. (Mark Text) By default, the text background is yellow, as if marked with a highlighter. |
inline |
MDN |
<em> |
Marks simple emphasis. (Emphasis) Can be nested, and the more it is nested, the stronger the emphasis. Assistive technologies pronounce it with verbal stress. Displayed in italic by default. |
inline |
MDN |
<strong> |
Used to indicate importance. (Strong Importance) Displayed in bold by default. |
inline |
MDN |
<i> |
Used to set text apart from normal text (like an icon or special symbol) without special meaning. Displayed in italic by default. |
inline |
MDN |
<dfn> |
Used to define a term. (Definition) Displayed in italic by default. |
inline |
MDN |
<cite> |
Specifies a reference to a creative work. (Citation) Books, papers, movies, TV shows, songs, games, and so on. Displayed in italic by default. |
inline |
MDN |
<q> |
Specifies a short quotation. (Inline Quotation) For a long quotation, use <blockquote>. |
inline |
MDN |
<u> |
Specifies underlined text. (Underline) Used purely for decoration. Be careful not to use it where it could be confused with <a>.Using CSS text-decoration: underline; is recommended. |
inline |
MDN |
<code> |
Specifies a range of computer code. (Inline Code) Displayed in a monospace font by default. |
inline |
MDN |
<kbd> |
Specifies a range of text that represents user input from a text input device (keyboard). (Keyboard Input) | inline |
MDN |
<sup> |
Specifies superscript (<sup>). (Superscripted text) |
inline |
MDN |
<sub> |
Specifies subscript (<sub>). (Subscript text) |
inline |
MDN |
<time> |
Used to represent a date or time. - datetime: A valid date string |
inline |
MDN |
<span> |
Specifies a content area that inherently represents nothing. | inline |
MDN |
<br /> |
Specifies a line break. | inline |
MDN |
1Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!
1<cite>The Scream</cite> by Edward Munch. Painted in 1893.
1<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd></p>, <kbd>ESC</kbd>
1X<sup>4</sup> + Y<sup>2</sup>, H<sub>2</sub>O
1234<p> The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park. </p>
# Text edit elements
These elements mark added, changed, or deleted text, so that changes are communicated clearly.
| Element | Description | Display | Reference |
|---|---|---|---|
<ins> |
Specifies a range of newly added (changed) text. (Inserted Text) - cite: The URI of a resource that explains the change- datetime: A valid date string for when the change happened |
inline |
MDN |
<del> |
Specifies a range of deleted (changed) text. (Deleted Text) - cite: The URI of a resource that explains the change- datetime: A valid date string for when the change happened |
inline |
MDN |
# Multimedia elements
You can embed various multimedia content such as images, audio, and video in a web page.
| Element | Description | Display | Reference |
|---|---|---|---|
<img /> |
Embeds an image. - src: The image URL- alt: Alternative text for the image- width: The image width- height: The image height- srcset: Defines a list of image URLs and their original sizes to offer to the browser- sizes: Defines a list of media conditions and the optimal image size for each condition |
inline |
MDN |
<audio> |
Embeds sound content (MP3). If autoplay is set, preload is ignored.- autoplay: Plays as soon as it is ready- controls: Shows the control menu- loop: Plays again from the beginning when playback ends- preload: Whether to load the file when the page loads (provides a hint)- src: The content URL- muted: Whether it is muted |
inline |
MDN |
<video> |
Embeds video content (MP4). - autoplay: Plays as soon as it is ready- controls: Shows the control menu- loop: Plays again from the beginning when playback ends- muted: Whether it is muted- poster: The URL of the video thumbnail image- preload: Whether to load the file when the page loads (provides a hint)- src: The content URL- width: The video width- height: The video height |
inline |
MDN |
<figure> |
Specifies an area for an image, illustration, diagram, and so on. | block |
MDN |
<figcaption> |
Included in <figure> to show a description of an image, illustration, and so on. (Figure Caption) |
inline |
MDN |
1234<figure> <img src="milk.jpg" alt="A milk"> <figcaption>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</figcaption> </figure>
# Embedded content elements
You can bring external content or other web pages into the current document to extend what the web page can do and give users more information.
| Element | Description | Display | Reference |
|---|---|---|---|
<iframe> |
Embeds another HTML page in the current page. - name: The name of the frame- src: The URL of the document to embed- width: The frame width- height: The frame height- allowfullscreen: Whether full-screen mode can be used- frameborder: Whether to use a frame border- sandbox: Embeds it as read-only for security |
inline |
MDN |
<canvas> |
Renders graphics or animations with the Canvas API or the WebGL API. - width: The canvas width- height: The canvas height |
inline |
MDN |
1<iframe width="1920" height="765" src="https://www.youtube.com/embed/bdPug9IWz-g" frameborder="0" allowfullscreen></iframe>
# Scripting elements
These elements are used to include scripts (code) such as JavaScript directly in a document or to reference them.
| Element | Description | Display | Reference |
|---|---|---|---|
<script> |
Includes script code in the document or references an external script. - async: Whether the script runs asynchronously- defer: Whether it runs after the document is parsed- src: The URL of the external script to reference- type: MIME type |
none |
MDN |
<noscript> |
Defines the HTML to insert when scripts are not supported. | inline |
MDN |
# Table content elements
These elements present data in a structured table, so information is organized clearly and is easy to understand.
| Element | Description | Display | Reference |
|---|---|---|---|
<table> |
Specifies a table. - border: The thickness of the table border |
table |
MDN |
<tr> |
Specifies a row of the table. (Table Row) | table-row |
MDN |
<th> |
Specifies a header cell of the table. (Table Header) - abbr: A short description of the column- headers: The id attribute values of one or more related header cells- colspan: The number of columns to extend (merge)- rowspan: The number of rows to extend (merge)- scope: States which cells it is the 'header cell' for |
table-cell |
MDN |
<td> |
Specifies a regular cell of the table. (Table Data) - headers: The id attribute values of one or more related header cells- colspan: The number of columns to extend (merge)- rowspan: The number of rows to extend (merge) |
table-cell |
MDN |
<caption> |
Specifies the title of the table. Write it right after the opening TABLE tag. |
table-caption |
MDN |
<colgroup> |
A set of columns. (Column Group) - span: The number of consecutive columns |
table-column-group |
MDN |
<col> |
Specifies a column. (Column) Used as a child element of <colgroup>.- span: The number of consecutive columns |
table-column |
MDN |
<thead> |
Specifies the header of the table. (Table Head) | table-header-group |
MDN |
<tbody> |
Specifies the body of the table. (Table Body) | table-row-group |
MDN |
<tfoot> |
Specifies the footer of the table. (Table Foot) | table-footer-group |
MDN |
1234567891011121314151617181920212223242526<table> <caption>Fruits</caption> <colgroup> <col span="2" style="background-color: yellowgreen;"> <col style="background-color: tomato;"> </colgroup> <thead> <tr> <th>ID</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>F123A</td> <td>Apple</td> <td>$22</td> </tr> <tr> <td>F098B</td> <td>Banana</td> <td>$19</td> </tr> </tbody> </table>
# Form elements
These elements build forms that receive and process data from users.
They make interaction with users possible and let you collect and process data.
| Element | Description | Display | Reference |
|---|---|---|---|
<form> |
Defines the scope of a form for submitting information to a web server. - action: The URL of the web page that processes the submitted information- autocomplete: Whether to use autocomplete with values the user entered before- method: The HTTP method for sending to the server- name: A unique name for the form- novalidate: Specifies not to validate the form data when sending it to the server- target: Specifies how to receive the response after sending to the server |
block |
MDN |
<input /> |
A form control for data the user enters. - autocomplete: Whether to use autocomplete with values the user entered before- autofocus: Focuses automatically when the page loads- checked: Marks the control as selected- disabled: Disables the control- form: The id attribute value of a <form>- list: The id attribute value of the <datalist> to reference- max: The maximum value allowed- min: The minimum value allowed- maxlength: The maximum number of characters allowed- multiple: Whether more than one value can be entered- name: The name of the control- placeholder: A hint for the value the user should enter- readonly: Read-only, cannot be edited- step: The interval of valid increments- src: The URL of the image- alt: Alternative text for the image- type: The kind of data to receive- value: The initial value of the control- type=button: A regular button- type=checkbox: Checkbox- type=color: Color- type=email: Email- type=file: File- type=hidden: A control that is not visible but is submitted- type=image: An image submit button- type=number: Number- type=password: Password- type=radio: Radio button- type=range: Range control- type=reset: Reset- type=search: Search- type=submit: Submit button- type=tel: Phone number- type=text: Plain text- type=url: Absolute URL |
inline-block |
MDN |
label |
A caption for a labelable element. References a labelable element with the for attribute, or contains it as content.- for: The id attribute value of the labelable element to reference |
inline |
MDN |
button |
Specifies a clickable button. - autofocus: Focuses automatically when the page loads- disabled: Disables the button- form: The id attribute value of a <form>- name: The name of the button, sent with the form data- type: The type of the button |
inline-block |
MDN |
textarea |
A multi-line plain text control. - autocomplete: Whether to use autocomplete with values the user entered before- autofocus: Focuses automatically when the page loads- disabled: Disables the control- form: The id attribute value of a <form>- maxlength: The maximum number of characters allowed- name: The name of the control- placeholder: A hint for the value the user should enter- readonly: Read-only, cannot be edited- rows: The number of lines in the control |
inline-block |
MDN |
fieldset |
Groups related elements of a form. - disabled: Disables all form controls in the group- form: The id attribute values of one or more <form> elements the group belongs to- name: The name of the group |
block |
MDN |
legend |
Specifies the title of a <fieldset>. |
block |
MDN |
select |
Specifies a drop-down list. - autofocus: Focuses automatically when the page loads- disabled: Disables the control- form: The id attribute value of a <form>- multiple: Whether multiple options can be selected- name: The name of the control- size: The number of options visible at once |
inline-block |
MDN |
datalist |
Specifies an autocomplete list. - id: Binds to the list attribute of an <input> |
none |
MDN |
optgroup |
Groups <option> elements.- disabled: Disables the group- label: The name of the group |
block |
MDN |
option |
Specifies an option in a drop-down or autocomplete list. - disabled: Disables the option- label: The title of the option to display- selected: Marks the option as selected- value: The value submitted with the form |
inline |
MDN |
progress |
Shows the completion progress of a task. - max: The total amount of work- value: The amount of work done |
inline-block |
MDN |
1234<input type="button" /> <input type="checkbox" /> <input type="file" /> <input type="text" />
123456789<!-- Reference a labelable element --> <input type="checkbox" id="user-agreement" /> <label for="user-agreement">Do you agree?</label> <!-- Contain a labelable element --> <label> <input type="checkbox" /> Do you agree? </label>
1234567891011121314151617<form> <fieldset> <legend>Coffee Size</legend> <label> <input type="radio" name="size" value="tall" /> Tall </label> <label> <input type="radio" name="size" value="grande" /> Grande </label> <label> <input type="radio" name="size" value="venti" /> Venti </label> </fieldset> </form>
1234567891011121314151617<select> <optgroup label="Coffee"> <option>Americano</option> <option>Caffe Mocha</option> <option label="Cappuccino" value="Cappuccino"></option> </optgroup> <optgroup label="Latte" disabled> <option>Caffe Latte</option> <option>Vanilla Latte</option> </optgroup> <optgroup label="Smoothie"> <option>Plain</option> <option>Strawberry</option> <option>Banana</option> <option>Mango</option> </optgroup> </select>
123456789<input type="text" list="fruits"> <datalist id="fruits"> <option>Apple</option> <option>Orange</option> <option>Banana</option> <option>Mango</option> <option>Pineapple</option> </datalist>
1<progress value="70" max="100">70 %</progress>
# Global attributes
These are global attributes that you can use on every HTML element.
| Attribute | Description | Reference |
|---|---|---|
id |
Defines an identifier (ID) that is unique across the whole document. | MDN |
class |
Specifies space-separated aliases for the element. | MDN |
style |
Declares CSS to apply to the element. | MDN |
title |
Specifies information (a description) about the element. | MDN |
lang |
Specifies the language of the element (ISO 639-1). | MDN |
data-* |
Specifies custom data attributes. Used to store data in HTML that JS can use. |
MDN |
draggable |
Specifies whether the element can use the Drag and Drop API. | MDN |
hidden |
Hides the element. | MDN |
tabindex |
Specifies the order in which elements receive focus as you move through them with the Tab key.- Interactive content gets a tab order that follows the code order by default. - Set tabindex="0" on non-interactive content to give it a tab order like interactive content.- With tabindex="-1", the element can receive focus but is left out of the tab order.- Positive values of tabindex="1" or higher are not recommended because they disrupt the logical flow. |
MDN |
contenteditable |
Specifies whether the user can edit the element. | MDN |
123<p lang="en">This paragraph is English</p> <p lang="ko">이 단락은 한글입니다.</p> <p lang="fr">Ce paragraphe est défini en français.</p>
1234567<div id="me" data-my-name="Heropy" data-my-age="851">Heropy</div> <script> const meEl = document.getElementById('me') console.log(meEl.dataset.myName) // 'Heropy' console.log(meEl.dataset.myAge) // '851' </script>
1<div draggable="true">The element to drag.</div>
1234<form id="hidden-form" action="/action" hidden> <!-- A hidden form.. --> </form> <button form="hidden-form" type="submit">Submit</button>
12345<h1 tabindex="0">Sign In</h1> <label>Username: <input type="text"></label> <label>Password: <input type="password"></label> <label>PS: <input type="text" tabindex="-1"></label> <input type="submit" value="Sign In">
Thanks for reading to the end.
Likes and kind comments help keep this blog going!