New HTML5 Tags
HTML5
In HTML 5 a series of new tags were introduced. I would put the new tags into the following caregories:
- Document Structure:
<article>
,<aside>
,,<command>
<figure>
,<footer>
,<header>
,<hgroup>
,<nav>
,<section>
- Multimedia:
<audio>
,<canvas>
,<embed>
,<video>
- User Interface (for Web applications):
<details>
,<datalist>
,<meter>
,<output>
,<progress>
- Highlighting/Layout:
<mark>
,<ruby>
,<time>
,<wbr>
Tags | Description |
---|---|
<article> | Represents an independent piece of content of a document, such as a blog entry or newspaper article |
<aside> | Represents a piece of content that is only slightly related to the rest of the page. |
<audio> | Defines an audio file. |
<canvas> | This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games. |
Represents a command the user can invoke. | |
<datalist> | Together with the a new list attribute for input can be used to make comboboxes |
<details> | Represents additional information or controls which the user can obtain on demand |
<embed> | Defines external interactive content or plugin. |
<figure> | Represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document. |
<footer> | Represents a footer for a section and can contain information about the author, copyright information, et cetera. |
<header> | Represents a group of introductory or navigational aids. |
<hgroup> | Represents the header of a section. |
Represents control for key pair generation. | |
<mark> | Represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. |
<meter> | Represents a measurement, such as disk usage. |
<nav> | Represents a section of the document intended for navigation. |
<output> | Represents some type of output, such as from a calculation done through scripting. |
<progress> | Represents a completion of a task, such as downloading or when performing a series of expensive operations. |
<ruby> | Together with <rt> and <rp> allow for marking up ruby annotations. |
<section> | Represents a generic document or application section |
<time> | Represents a date and/or time. |
<video> | Defines a video file. |
<wbr> | Represents a line break opportunity. |
Examples
Article
Code:
1<article>
2 <p>This is the body of an article<p>
3</article>
Rendered
Page Structure
Code:
1<!-- page header -->
2<header><h2>Title</h2></header>
3<!-- banner image -->
4<figure><img src="banner.png"></figure>
5<!-- navigation -->
6<nav><a href="/">HOME</a></nav>
7<!-- list of articles -->
8<div>
9 <article>
10 <h3>Title 1</h3>
11 <p>some text</p>
12 <details>
13 <summary>Read More:</summary>
14 Additional informaton hidden by default
15 </details>
16 </article>
17 <hr>
18 <article>
19 <h3>Title 2</h3>
20 <p>some text</p>
21 </article>
22</div>
23<footer>© this-year by me</footer>