HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 new elements

HTML5semantic tags and attributes, allowing developers to easily implement clear web page layouts, plus CSS3The effect rendering, quick creation of rich and flexible web pages is very simple.

HTML5 new elements

since1999years after HTML 4.01 has changed a lot, today, in HTML 4.01some have been deprecated, these elements in HTML5has been deleted or redefined.

To better handle today's Internet applications, HTML5Many new elements and features have been added, such as: graphic drawing, multimedia content, better page structure, better form handling, and several APIs for dragging and dropping elements, positioning, including web pages application cache, storage, network workers, etc.

HTML5new tag elements

<header> defines the header of the page or section;
<footer> defines the footer of the page or section;
<nav> defines the navigation area of the page or section;
<section> defines a logical area or content composition of the page;
<article> defines main content or a complete piece of content;
<aside> defines supplementary or related content;

nav navigation tags

Example

!doctype html<html><head>
<meta charset="UTF-8">
<title>HTML5　The use of <nav> navigation tags/title>
</head>
<body>
<nav>
　　　　<ul>
　　　　　　　　<li><a href="#">Home</a></li>
　　　　　　　　<li><a href="#">One</a></li>
　　　　　　　　<li><a href="#">Two</a></li>
　　　　　　　　<li><a href="#">Three</a></li>
　　　　</ul>
</nav>
</body></html>

Test to see if it works ‹/›

The <header> tag is implemented

Example

!doctype html
<html>
<head>
<meta charset="UTF-8">
The <header> tag is implemented by www.oldtoolbag.com</title>
</head>
<body>
<header id="page_header">
　　　　<h1>Header</h1>
</header>
</body>
</html>

Test to see if it works ‹/›

The <footer> tag is implemented

Example

!doctype html
<html>
<head>
<meta charset="UTF-8">
The <footer> tag is implemented by www.oldtoolbag.com</title>
</head>
<body>
The <footer> tag is implemented
<footer id="page_footer">
　　　　<h2>Footer</h2>
</footer>
</body>
</html>

Test to see if it works ‹/›

<section> block and <article> article

Example

!doctype html
<html>
<head>
<meta charset="UTF-8">
The <title> and <section> and <article> tags are implemented by www.oldtoolbag.com</title>
</head>
<body>
The <section> and <article> tags implement
<section id="posts">
　　　　　　　　/*Can contain multiple< article>*/
　　　　<article class="post">
　　　　　　　　　/*The content of article*/
　　　　　　　　</article>
　　　　　　　　<article class="post">
　　　　　　　　　/*The content of article*/
　　　　　　　　</article>
</section>
</body>
</html>

Test to see if it works ‹/›

<canvas> new element

Tag	Description
<canvas>	The tag defines graphics, such as charts and other images. This tag is based on the JavaScript drawing API.

New multimedia elements

Tag	Description
<audio>	Define audio content.
<video>	Define video (video or movie).
<source>	Define multimedia resources <video> and <audio>.
<embed>	Define embedded content, such as plugins.
<track>	Specify external text tracks for media elements such as <video> and <audio>.

New form elements

Tag	Description
<datalist>	Define an option list. Use this element in conjunction with the input element to define possible values for the input.
<keygen>	Specify the key generator field for forms.
<output>	Define different types of output, such as script output.

New semantic and structural elements

HTML5Provides new elements to create a better page structure:

Tag	Description
<article>	Define an independent content area of the page.
<aside>	Define the sidebar content of the page.
<bdi>	Allows you to set a segment of text to脱离 its parent element's text direction setting.
<command>	Define command buttons, such as radio buttons, checkboxes, or buttons.
<details>	Used to describe the details of a document or a part of the document.
<dialog>	Define a dialog, such as a prompt box.
<summary>	The tag contains the title of the details element.
<figure>	Specify independent flow content (images, charts, photos, code, etc.).
<figcaption>	Define the title of the <figure> element.
<footer>	Define the footer of a section or document.
<header>	Define the header area of the document.
<mark>	Define marked text.
<meter>	Define the units of measurement. Only used for measurements with known maximum and minimum values.
<nav>	Define the part of navigation links.
<progress>	Define the progress of any type of task.
<ruby>	Define ruby annotations (Chinese pinyin or character).
<rt>	Define the explanation or pronunciation of a character (Chinese pinyin or character).
<rp>	Used in ruby annotations to define the content displayed by browsers that do not support ruby elements.
<section>	Define a section (section, division) in the document.
<time>	Define a date or time.
<wbr>	Specify where a line break should be inserted in the text.

Removed Elements

The Following HTML 4.01 Element in HTML5Already Deleted in the Middle:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5 Inline SVG HTML5 Browser Support