Overview
The basic structural elements for HTML include headings, paragraphs, links, etc. New elements in HTML5 improve upon this structure.
HTML4 Structure
With HTML4 documents, the <div> tag along with "id" and "class" has been used to create "structure". The following diagram illustrates how this structure might look for a simple "blog" page with two columns:
HTML5 Structure
HTML5 added new elements to improve the structure of web pages. The same page example above, would look like the following in HTML5:
Structural Elements
The following table lists the structural HTML tags:
| HTML5 | = New for HTML5 |
| Tag | Description |
|---|---|
| <!--...--> | Defines a comment |
| <!DOCTYPE> | Defines the document type |
| <article>HTML5 | Defines an article |
| <aside>HTML5 | Defines content aside from the page content |
| <blockquote> | Defines a long quotation |
| <body> | Defines the body element |
| <br> | Inserts a single line break |
| <command>HTML5 | Defines a command button |
| <details>HTML5 | Defines details of an element |
| <div> | Defines a section in a document |
| <figcaption>HTML5 | Defines the caption of a figure element |
| <figure>HTML5 | Defines a group of media content, and their caption |
| <footer>HTML5 | Defines a footer for a section or page |
| <h1> to <h6> | Defines header 1 to header 6 |
| <head> | Defines information about the document |
| <header>HTML5 | Defines a header for a section or page |
| <hgroup>HTML5 | Defines information about a section in a document |
| <hr> | Defines a horizontal rule |
| <html> | Defines an html document |
| <mark>HTML5 | Defines marked text |
| <menu> | Defines a menu list |
| <menuitem> | Defines a command/menu item that the user can invoke from a popup menu |
| <meta> | Defines meta information |
| <meter>HTML5 | Defines measurement within a predefined range |
| <nav>HTML5 | Defines navigation links |
| <p> | Defines a paragraph |
| <progress>HTML5 | Defines progress of a task of any kind |
| <rp>HTML5 | Used in ruby annotations to define what to show browsers that to not support the ruby element. |
| <rt>HTML5 | Defines explanation to ruby annotations. |
| <ruby>HTML5 | Defines ruby annotations. |
| <section>HTML5 | Defines a section |
| <summary>HTML5 | Defines the header of a "detail" element |
| <time>HTML5 | Defines a date/time |
| <wbr>HTML5 | Defines a possible line-break |
Tag Description
The header tag is used to define the introduction to the document.
This tag has the form:
<header>
content
</header>HTML5 and HTML4.01 Differences
This tag is new for HTML5.
The HTML4 equivalent of this element would be something like:
<div class="header"></div>Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<header>
<h1>Wecome to our website</h1>
<p>We develop the best...</p>
</header>
<p>Other content...</p>Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML5 |
|---|---|
| Empty Tag: | No |
Tag Description
The nav tag is used to define a section intended for navigation.
This tag has the form:
<nav>
content
</nav>HTML5 and HTML4.01 Differences
This tag is new for HTML5.
The HTML4 equivalent of this element would be something like:
<ul class="nav"></ul>Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<nav>
<a href="/home">Home</a>
<a href="/products">Products</a>
<a href="/contact">Contact Us</a>
<a href="/about">About</a>
</nav>This produces the following result:
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 6.0 | 4.0 | 9.0 | 5.0 | 11.1 |
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML5 |
|---|---|
| Empty Tag: | No |
Tag Description
The section tag is used to define sections in a document. These sections could include chapters, headers, footers, or any other sections of the document.
This tag has the form:
<section>
content
</section>HTML5 and HTML4.01 Differences
This tag is new for HTML5.
The HTML4 equivalent of this element would be something like:
<div class="section"></div>Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<section>
<h1>Wecome to our website</h1>
<p>We develop the best...</p>
</section>Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 6.0 | 4.0 | 9.0 | 5.0 | 11.1 |
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML5 |
|---|---|
| Empty Tag: | No |
Tag Description
The article tag is used to define external content.
The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source.
This tag has the form:
<article>
content
</article>Note: The <article> content is independent from the rest of the document.
HTML5 and HTML4.01 Differences
This tag is new for HTML5.
The HTML4 equivalent of this element would be something like:
<div class="article"></div>Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<article>
<h1>iOS 8.1 Software Update</h1>
<p>The iOS 8.1 software update...</p>
</article>
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML5 |
|---|---|
| Empty Tag: | No |
Tag Description
The aside tag is used to define some content aside from the content it is placed in.
This tag has the form:
<aside>
content
</aside>Note: The <aside> content should be related to the surrounding content.
HTML5 and HTML4.01 Differences
This tag is new for HTML5.
The HTML4 equivalent of this element would be something like:
<div class="aside"></div>
Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<h1>iOS 8.1 Software Update</h1>
<p>The iOS 8.1 software update...</p>
<aside>
<h1>Updating is Easy</h1>
<p>Step 1: Make sure you are...</p>
</aside>
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML5 |
|---|---|
| Empty Tag: | No |
Tag Description
The footer tag is used to define the footer of a section or document.
The footer of a document typically contains the name of the author, the date the document was written and/or contact information.
This tag has the form:
<footer>
content
</footer>HTML5 and HTML4.01 Differences
This tag is new for HTML5.
The HTML4 equivalent of this element would be something like:
<div class="footer"></div>Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<footer>
This document was posted in 2010
</footer>Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 6.0 | 4.0 | 9.0 | 5.0 | 11.1 |
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML5 |
|---|---|
| Empty Tag: | No |
Tag Description
The details tag is used to describe details about a document, or parts of a document.
This tag has the form:
<details>
content
</details>Note: The <details> element can be used to describe any parts of the document.
HTML5 and HTML4.01 Differences
This tag is new for HTML5.
The HTML4 equivalent of this element would be something like:
<dl class="details"
style="display:hidden"></dl>Attributes
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies if the details should be visible (present) or not (not present) |
Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<details>
This document was posted in 2010
</details>
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 12.0 | 6.0 | 15.0 |
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML5 |
|---|---|
| Empty Tag: | No |
Tag Description
The figure tag is used to group some elements.
This tag has the form:
<figure>
content
</figure>Note: The content inside a figure element is stand-alone content, typically used to explain parts of a document, but also able to move from the document and put somewhere else.
HTML5 and HTML4.01 Differences
This tag is new for HTML5.
The HTML4 equivalent of this element would be something like:
<dl class="figure"></dl>
Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<figure>
<h1>iOS 4.01</h1>
<p>
The iOS 4.1 software update...
</p>
</figure>
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 6.0 | 4.0 | 9.0 | 5.0 | 11.1 |
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML5 |
|---|---|
| Empty Tag: | No |
