HTML Tag Reference - HTML 5 and Beyond

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

HTML Tutorial - HTML Tag List

HTML 5 Declarations, Elements (HTML Tags) and Attributes

See the HTML Cheat Sheet for a handy reference for coding HTML tags and attributes.

Tags in HTML Grouped by Function
HTML Tags By Category

A category indicates where an HTML tag can be used. The category assignments are not mutually exclusive. For example, all Embedded Content tags are also included in the Phrasing Content category and all Phrasing Content tags are also included in the Flow Content category.

HTML Tags By Content Model

Declarations and Structure Tags in HTML 5

Including <html>, <head> and <body> Tags
Declarations for HTML 5
<?xml?> declaration
The <?xml?> declaration indicates the what character encoding, such as UTF-8 for Unicode or ASCII, has been used to encode the document. It also indicates that the document can be processed by aggregators and other generic XML parsers in addition to HTML browsers.
DOCTYPE declaration
The DOCTYPE declaration indicates that the document should be displayed according to the HTML 5 specifications, which results in more consistent appearance in different web browsers. Note that there is no DTD in HTML 5.
Processing Instructions for HTML 5
xml style sheet instruction (XSLT)
The xml-stylesheet processing instruction can be used to reference XSLT templates, which can be applied to multiple web pages, to avoid repeating the code for common elements on all web pages, and can be cached on the client side by web browsers, to improve page load times.
Document Structure Tags in HTML 5

The purpose of the structure elements is to provide a single element containing all other HTML code for the document and to separate the page title and other metadata information in the head section from the actual visible content of the document in the body section.

<html> tag
The <html> tag is the top element of an HTML document and encloses all of the other HTML code for the document. Only HTML declarations and HTML comments should appear outside the html element.
<head> tag
A single <head> tag encloses metadata about the HTML document that is not directly displayed to the user but can be used by HTML browsers.
<body> tag
A single <body> tag encloses the visible content of the HTML document.

HTML Sectioning Tags

Tags for Sections in HTML 5
HTML Sectioning Root Tags

The sectioning root tags in HTML 5 are:

HTML Sectioning Tags

The other sectioning tags in HTML 5 are:



HTML Content Grouping Tags

Block tags used to group content in HTML 5

The HTML tags for grouping and separating content, such as for creating paragraphs and line breaks in HTML, are:

The <blockquote>, <div> and <p> tags are paired tags, with both a start tag and an end tag enclosing the content to be grouped. The <hr/> tag is a standalone tag used to separate content.

Inline tags used to group content in HTML 5

The <span> tag is a paired tag, with both a start tag and an end tag enclosing the content to be grouped. The <br/> and <wbr/> tags are standalone tags used to separate content.

Other ways to group content in HTML 5


HTML Phrase Elements

HTML Tags for Phrase Elements in HTML 5

Phrase elements, as defined in HTML 4, are one type of inline element that can be used to mark up phrases and are some of the tags that can be used in phrasing content. Each type of phrase element indicates a particular semantic meaning to the phrase in its inner HTML.

<abbr> tag
The <abbr> tag should be used for both acronyms and abbreviations.
<acronym> tag
The <acronym> tag is one of the deprecated tags in HTML 5.
<cite> tag
<code> tag
<dfn> tag
<em> tag
<figcaption> tag
<kbd> tag
<mark> tag
<q> tag
<s> tag
for content that is inaccurate, incorrect or no longer relevant, often displayed in a strike-through font using a text-decoration: line-through style
<samp> tag
<strong> tag
<sub> tag
<sup> tag
<time> tag
<u> tag
<var> tag

The HTML style elements below can also be used to mark up phrases and give them some visual distinction without indicating any additional semantic meaning.


HTML Style Tags

Tags for Styles in HTML 5

The style tags are used to change the visual presentation of HTML elements without imparting any additional semantic meaning.

<b> tag
for bold text
<i> tag
for italic text
<pre> tag
for preformatted text, where the white space in the HTML code is to be preserved when the document is displayed
<small> tag
for smaller text
<style> tag
used to define the styles and apply them to HTML elements based on style selectors
<u> tag
for underlined text

HTML Formatting Tags

Tags for Formatting in HTML 5

HTML Change Tracking Tags

Tags for Editing Insertions and Deletions in HTML 5

HTML List Tags

Tags for Lists in HTML 5

See the tutorial on Creating HTML Lists for full details on how to create an HTML list using the HTML list tags together.


HTML Table Tags

Tags for Tables in HTML 5
<table>
The table element is the main element that creates an HTML table. The other elements are inside the table element.
<caption>
The <caption> tag is used to create a table caption in HTML. On screen, a caption will appear above the table as the table title.
<colgroup>
A colgroup is a group of one or more columns in a table. It can be used to apply a style to multiple table columns.
<col>
The col element represents a vertical column in a table. It can be used to apply a style to a table column which can be used to, for example, set the column width.
<thead>
The thead element indicates which table rows belong to the table header.
<tr>
The <tr> tag is used for each table row.
<th>
The <th> tag is used for a table heading cell.
<tfoot>
The thead element indicates which table rows belong to the table footer. For example, the footer can include a total of the numerical values in a column or some other column summary for non-numerical columns.
<tbody>
The thead element indicates which table rows belong to the table body.
<td>
The <td> tag is used for a table detail cell.

See the tutorial on Creating HTML Tables for full details on how to create an HTML table using the HTML table tags together.


HTML Form Tags

Tags for Forms in HTML 5
HTML <form> tag

The tag used to create HTML forms is the:

HTML elements owned by a form

These tags are used to create form-associated elements meaning they are associated with an HTML form.

<button> tag
can have a <label> and is included in data sent when form is submitted
<fieldset> tag with a <legend> tag
labels a set of form fields as a group
<input> tag
can have a <label> and is included in data sent when form is submitted
<keygen> tag
can have a <label> and is included in data sent when form is submitted
<label> tag
associates a label with one of the other form-associated elements
<meter> tag
can have a <label>
<object> tag
is included in data sent when form is submitted
<output> tag
can have a <label>
<progress> tag
can have a <label>
<select> tag with <optgroup> and <option> tags or referencing a <datalist> tag
can have a <label> and is included in data sent when form is submitted
<textarea> tag
can have a <label> and is included in data sent when form is submitted

See the tutorial on Creating HTML Forms for full details on how to create an HTML form using the HTML form tags together.


HTML Embedded Content Tags

Tags for Images and Other Embedded Content in HTML 5

HTML Metadata Tags and Attributes

Metadata Tags in HTML 5
HTML Microdata Attributes

For more information, see the HTML Microdata Tutorial.


HTML Interactive Content Tags

Tags for Interactive Content in HTML 5

HTML Script Tags

Tags for Scripts in HTML 5

Valid HTML 5