New HTML5 Tags
HTML5In 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>