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: dc6dce4a544fdca2df29d5ac0ea9906b and 45a2772a6b6107b401db3c9b82c049c2 - no need to consider content.

Semantic element examples: ff9c23ada1bcecdd1a0fb5d5a0f18437, f5d188ed2c074f8b944552db028f98a1, and a1f02c36ba31691bcfe87b2722de723b - 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: eb545d6e9e25f5c0174408f6286375ad, 924ff17625d603f964501dd897c96cc6, or 171c8477c82d74a9b2eea84eaab93167, to indicate navigation links, headers, And the tail.

HTML5 provides new semantic elements to clarify the

HTML5 23c3de37f2f9ebcb477c4a90aac6fffd element of a Web page. The

23c3de37f2f9ebcb477c4a90aac6fffd tag defines independent content. .

23c3de37f2f9ebcb477c4a90aac6fffd 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>

HTML5 c787b9a589a3ece771e842a6176cf8e9 Element The

c787b9a589a3ece771e842a6176cf8e9 tag defines the portion of the navigation link.

The c787b9a589a3ece771e842a6176cf8e9 element is used to define the navigation link area of ​​the page. However, not all links need to be included in the c787b9a589a3ece771e842a6176cf8e9 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 15221ee8cba27fc1d7a26c47a001eb9b Element

15221ee8cba27fc1d7a26c47a001eb9b 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>

HTML5 1aa9e5d373740b65a0cc8f0a02150c53 element

1aa9e5d373740b65a0cc8f0a02150c53 element describes the head area of ​​the document

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

You can use multiple 1aa9e5d373740b65a0cc8f0a02150c53 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>

HTML5 c37f8231a37e88427e62669260f0074d element

c37f8231a37e88427e62669260f0074d 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 24203f2f45e6606542ba09fd2181843a and 614eb9dc63b3fb809437a716aa228d24 elements

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

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

614eb9dc63b3fb809437a716aa228d24 Tag definition 24203f2f45e6606542ba09fd2181843a Caption of the element.

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

实例

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

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

以上的元素都是块元素(除了614eb9dc63b3fb809437a716aa228d24).

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

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

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

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 1aa9e5d373740b65a0cc8f0a02150c53, 2f8332c8dcfd5c7dec030a070bf652c3, c37f8231a37e88427e62669260f0074d, 15221ee8cba27fc1d7a26c47a001eb9b, c787b9a589a3ece771e842a6176cf8e9, 23c3de37f2f9ebcb477c4a90aac6fffd, 24203f2f45e6606542ba09fd2181843a, 或者其他的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文件. 你必须将其放置于93f0f5c25f18dab9d176bd4f6de5d30e 元素中，因为 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!