Introducing examples of HTML5 semantic elements-H5 Tutorial-php.cn

What is a semantic element?

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

Semantic element examples:

and - no need to consider content.

Semantic element examples:

, , and - Clearly defines its content.

Browser support

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

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

New semantic elements in HTML5

Many existing Some websites contain the following HTML code:

, or

, to indicate navigation links, headers, And the tail.

HTML5 provides new semantic elements to clarify the

HTML5

element of a Web page. The

tag defines independent content. .

Element usage example:

Forum post

Blog post

News story

Comment

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Copy after login

HTML5

Element The

tag defines the portion of the navigation link.

The

element is used to define the navigation link area of the page. However, not all links need to be included in the

element!

Example

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Copy after login

HTML5

Element

tag defines content outside the main area of the page (such as a sidebar).

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

<p>My family and I visited The Epcot center this summer.</p>
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Copy after login

HTML5

element

element describes the head area of the document

element Note that it is used to define the introductory display area of the content.

You can use multiple

elements in the page.

The following example defines Header of the article:

Example

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Copy after login

HTML5

Related labels：

HTML5，语义元素，实例

source：php.cn

Previous article：HTML5 form element examples explained Next article：HTML5Canvas explanation and example tutorials

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn