Introducing examples of HTML5 semantic elements

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 id="Internet-nbsp-Explorer-nbsp">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>

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>

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 id="Epcot-nbsp-Center">Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

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 id="Internet-nbsp-Explorer-nbsp">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>

HTML5

element

The element describes the bottom area of ​​the document.

< The ;footer> element should contain its containing element

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

You can use multiple < in a document ;footer>Element.

Example

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

HTML5

and

elements

tags specify independent flow content (images, charts , photos, code, etc.). The content of the

element should be related to the main content, but should have no impact on document flow if removed.

Tag definition

Caption of the element.

元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

实例

<figure>
  <img src="/static/imghwm/default1.png"  data-src="img_pulpit.jpg"  class="lazy"   alt="The Pulpit Rock"    style="max-width:90%"  style="max-width:90%">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

我们可以开始使用这些语义元素吗?

以上的元素都是块元素(除了

).

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

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

Internet Explorer 8 及更早IE版本中的问题

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用

,

,

,

,

,

,

, 或者其他的HTML5 elements.

解决办法:你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：code.google.com/p/html5shiv/

下载后，将以下代码放入的网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于

元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程

The above is the detailed content of Introducing examples of HTML5 semantic elements. For more information, please follow other related articles on the PHP Chinese website!