99

Concurrent visitors over the last 30 minutes. (~)

Peak concurrent visitors -
Yesterday: 0 / Today: 0

Key HTML Elements and Attributes at a Glance

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.

HTML
1
2
3
4
5
<!DOCTYPE html> <html lang="ko"> <head></head> <body></body> </html>
Basic structure of a document
Element Description Display Reference
<html> Specifies the scope of the HTML document. MDN
<head> Specifies information about the HTML document. MDN
<body> Specifies the structure of the HTML document. block MDN

# 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
HTML
1
2
3
4
5
<section> <h2>Title</h2> <div>Contents1</div> <div>Contents2</div> </section>
A section used with a heading

# 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 numbers
type: 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
HTML
1
2
3
4
5
6
<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>
Showing terms and descriptions

# 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
HTML
1
Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!
Showing an abbreviation
HTML
1
<cite>The Scream</cite> by Edward Munch. Painted in 1893.
Showing a reference to a creative work
HTML
1
<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd></p>, <kbd>ESC</kbd>
Showing keyboard input
HTML
1
X<sup>4</sup> + Y<sup>2</sup>, H<sub>2</sub>O
Showing math with superscript and subscript
HTML
1
2
3
4
<p> The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park. </p>
Showing a date

# 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
HTML
1
2
3
4
<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>
Showing an image with a description

# 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
HTML
1
<iframe width="1920" height="765" src="https://www.youtube.com/embed/bdPug9IWz-g" frameborder="0" allowfullscreen></iframe>
Example of embedding a YouTube video

# 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
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>
Table elements example

# 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
HTML
1
2
3
4
<input type="button" /> <input type="checkbox" /> <input type="file" /> <input type="text" />
Setting different data types for input elements
HTML
1
2
3
4
5
6
7
8
9
<!-- 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>
Referencing and containing a labelable element
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
Grouping form controls with the same purpose
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
Showing a select menu
HTML
1
2
3
4
5
6
7
8
9
<input type="text" list="fruits"> <datalist id="fruits"> <option>Apple</option> <option>Orange</option> <option>Banana</option> <option>Mango</option> <option>Pineapple</option> </datalist>
Showing an autocomplete list
HTML
1
<progress value="70" max="100">70 %</progress>
Showing the progress of a task

# 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
HTML
1
2
3
<p lang="en">This paragraph is English</p> <p lang="ko">이 단락은 한글입니다.</p> <p lang="fr">Ce paragraphe est défini en français.</p>
Setting the language of each element
HTML
1
2
3
4
5
6
7
<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>
Setting custom data attributes
HTML
1
<div draggable="true">The element to drag.</div>
Making an element draggable
HTML
1
2
3
4
<form id="hidden-form" action="/action" hidden> <!-- A hidden form.. --> </form> <button form="hidden-form" type="submit">Submit</button>
Only 'Submit' works while the form element is hidden
HTML
1
2
3
4
5
<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">
Setting the focus navigation order