HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Client Storage HTML5 Form Attributes

HTML5 Semantic elements

Semantic elements are those whose names can tell you what content they represent at a glance. For example, for articles <article>, there are headers <header>, catalogs <catalog>, contents <content>, and footers <footer> and other information.

What are semantic elements?

A semantic element can clearly describe its meaning to browsers and developers.

Non-semantic element examples: <div> and <span> - without considering the content.

Semantic element examples: <form>, <table>, and <img> - clearly defines its content.

Browser support

Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support semantic elements.

Note: Internet Explorer 8 and earlier versions do not support this element. However, compatible solutions are provided at the bottom of the article.

HTML5new semantic elements in HTML

Many existing websites contain the following HTML code:

<div id="nav">, <div>, or <div id="footer">, to indicate navigation links, headers, and footers.

HTML5 It provides new semantic elements to clarify different parts of a web page:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

HTML5 <section> element

<section> tag defines a section (section, region) in a document. For example, chapters, headers, footers, or other parts of a document.

based on W3C HTML5Document: The section contains a set of content and its title.

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial Website(oldtoolbag.com)</title>　
</head>
<body>
<section>
　　<h1>HTML5</h1>
　　<p>It is a new version of HTML language that includes new elements, attributes, and behaviors, and also includes a series of technologies that can be used to make Web sites and applications more diverse and powerful. This set of technologies is often referred to as HTML5　and its friends, usually abbreviated as HTML5./p>
</section>
<section>
　　<h1>CSS3</h1>
　　<p>A major change in the evolution of CSS is W3C decided to evolve CSS3into a series of modules. Browser vendors innovate quickly according to the CSS rhythm, so by adopting the modular approach, CSS3The elements in the specification can develop at different speeds because different browser vendors only support given features. But different browsers support different features at different times, which also makes cross-browser development complex./p>
</section>
</body>
</html>

Test to see ‹/›

HTML5 <article> element

The <article> tag defines independent content.

Example usage of <article> element:

Forum post
Blog post
News story
Comment

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial Website(oldtoolbag.com)</title>　
</head>
<body>
<article>
　　<h1>CSS3　</h1>
　　<p>SS3is an upgraded version of CSS (Cascading Style Sheets) technology, released in1999年开始制订，2001Year5Month23日W3C completed CSS3of the working draft,
主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。/p>
</article>
</body>
</html>

Test to see ‹/›

HTML5 <nav> element

The <nav> tag defines the navigation link area.

The <nav> element is used to define the navigation link area of the page, but not all links need to be included in the <nav> element!

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial Website(oldtoolbag.com)</title>　
</head>
<body>
<nav>
　　　　<a href="/html/">HTML</a> |
　　　　<a href="/css/">CSS</a> |
　　　　<a href="/js/">JavaScript</a> |
　　　　<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>

Test to see ‹/›

HTML5 <aside> element

The <aside> tag defines additional content outside the main content area of the page (such as sidebars).

The content of the <aside> tag should be related to the main content area.

Example

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Example by www.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>Heading for Article</h1>
　　<p>Text that appears under article</p>
</article>
<aside>
　　<p>Text that appears under <aside>/p>
</aside>
</body>
</html>

Test to see ‹/›

HTML5 <header> element

The <header> element describes the header area of the document.

The <header> element is mainly used to define the introduction and display area of the content.

You can use multiple <header> elements in the page.

The following examples define the article header:

Example

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Example by www.oldtoolbag.com</title>
</head>
<body>
<header>
　　<img src="/static/images/logo-n.png" alt="Logo">
</header>
<article>
　　<h1>Heading for Article</h1>
　　<p>Text that appears under article</p>
</article>
</body>
</html>

Test to see ‹/›

HTML5 <footer> element

The <footer> element describes the bottom area of the document.

The <footer> element should contain its containing element

A footer usually contains the author of the document, copyright information, terms of use of links, contact information, etc.

You can use multiple <footer> elements in the document.

Example

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Example by www.oldtoolbag.com</title>
</head>
<body>
<article>
　　<h1>Heading for Article</h1>
　　<p>Text that appears under article</p>
</article>
<footer>
　　<p>Copyright ©2013</p>
</footer>
</body>
</html>

Test to see ‹/›

HTML5 <figure> and <figcaption> elements

The <figure> tag specifies independent flow content (images, charts, photos, code, etc.).

The content of the <figure> element should be related to the main content, but if it is deleted, it should not affect the document flow.

The <figcaption> tag defines the title of the <figure> element.

The <figcaption> element should be placed at the first or last child position of the "figure" element.

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial Website(oldtoolbag.com)</title>　
</head>
<body>
<figure>
　　<img src="venglobe.gif" alt="venglobe" width="304" height="228">
　　<figcaption>venglobe venglobe venglobe.</figcaption>
</figure>
</body>
</html>

Test to see ‹/›

　HTML5Online summary example of semantic elements

Example

<!doctype html>
<html>
<head>
　　　　<meta charset="UTF-8">
　　　　<title>Semantic elements</title>
</head>
<body>
　　　　<!--Structural elements-->
　　　　<header>Header</header>
　　　　<section>Represents a paragraph: used for chapter description of the area</section>
　　　　<footer>Page footer of the area</footer>
　　　　<nav>Menu navigation</nav>
　　　　<article>Represents the main content of an article</article>
　　　　<!--Block-level elements used for area division-->
　　　　<aside></aside>
　　　　<figure>
　　　　　　　　<figcaption></figcaption>
　　　　</figure>
　　　　<code>Represents a piece of code</code>
　　　　<dialog>Represents a dialogue
　　　　　　　　<dt>Speaker</dt><dd>Content</dd>
　　　　</dialog>
　　　　<!--Semantic elements-->
　　　　<mtter>Range of numerical values</mtter>
　　　　<time></time>
　　　　<progress>Progress bar</progress>
　　　　<video>Video</video>
　　　　<audio>Audio</audio>
　　　　<!--Interactive elements-->
　　　　<details>Specific content segment displayed through some method</details>
　　　　<datagrid>Used to control client-side data display</datagrid>
　　　　<menu>Dynamic interactive menu</menu>
　　　　<command>Name</command>
　　　　<!--Display article examples-->
　　　　<article>
　　　　　　　　<header>
　　　　　　　　　　　　<h1>HTML head tag labels</h1>
　　　　　　　　　　　　<time>2015Year12Month12Day</time>
　　　　　　　　</header>
　　　　　　　　<p>There are many tags and elements in the HTML head part, involving browser rendering of web pages, SEO, etc., and each browser core and domestic browser manufacturer has some of its own tags and elements, which causes a lot of differences. In the mobile Internet era, the head structure and mobile meta elements are more important. Understanding the meaning of each tag and writing head tags that meet your needs is the purpose of this article. This article is based on a piece of writing by Yi Si, expanded and summarized to introduce the meaning and usage scenarios of commonly used tags and elements in the head./p>
　　　　　　　　<footer>
　　　　　　　　　　　　<p>http://www.baidu.com</p>
　　　　　　　　</footer>
　　　　</article>
　　　　<!--Comment-->
　　　　<section>
　　　　<h2>Comment</h2>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>Li Si</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23　10:00　-　11:00>One hour ago</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Comment content</p>
　　　　　　　　</article>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>Li Si</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23　10:00　-　11:00>One hour ago</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Comment content</p>
　　　　　　　　</article>
　　　　</section>
</body>
</html>

Test to see ‹/›

Can we start using these semantic elements?

The above elements are all block elements (except <figcaption>).

To make these blocks and elements work in all versions of browsers, you need to set the properties in the stylesheet file (the following style code allows old version browsers to support the block-level elements introduced in this chapter):

header, section, footer, aside, nav, article, figure
{
　　　　display: block;
}

Internet Explorer 8 and earlier IE versions have issues

IE8 Early versions of IE cannot render CSS effects in these elements, which means you cannot use <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, or other HTML5 elements.

Solution: You can use HTML5 Shiv Javascript script to solve IE compatibility issues.

HTML5 Shiv download address:http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

After downloading, place the following code in the web page:

The above code in browsers less than IE9version will load html5shiv.js file. You must place it within the <head> element because IE browsers need to load these HTML elements in the header before rendering5New Elements

HTML5 Client Storage HTML5 Form Attributes