HTML5 语义元素


语义学(源自古希腊)可定义为对语言意义的研究

语义元素 = 具有意义的元素


什么是语义元素?

语义元素清楚地向浏览器和开发者描述其意义

非语义元素的示例: <div><span> - 对其内容一无所知。

语义元素的示例: <form> , <table><article> - 清楚地定义其内容。


浏览器支持






Yes Yes Yes Yes Yes

所有现代浏览器都支持HTML5语义元素。

此外,您可以"帮助"老式浏览器处理"未知元素"

HTML5浏览器支持 这一章学习更多知识


HTML5中的新语义元素

许多网站都包含以下HTML代码: <div id="nav"> <div class="header"> <div id="footer">
指示导航,头部和底部。

HTML5提供了定义页面不同部分的新语义元素:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
HTML5语义元素


HTML5 <section>元素

<section>元素定义文档中的一个部分。

根据W3C的HTML5文档:"一个部分(section)是内容的主题分组,所谓“部分”,这里是指按照主题分组的内容区域,通常会带有标题"

主页通常可以分为几个部分,用于介绍,内容和联系信息。

实例

<section>
  <h1>UIHTML</h1>
  <p>新手教程(www.uihtml.com)提供了编程的基础技术教程....</p>
</section>
运行 »

HTML5 <article>元素

<article>元素规定独立的自包含内容

文档有其自身的意义,并且可以独立于网站其他内容进行阅读

可以使用<article>元素的示例:

  • 论坛帖子
  • 博客文章
  • 新闻文章

实例

<article>
  <h1>手教程提供了什么?</h1>
  <p>新手教程(www.uihtml.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识.</p>
</article>
运行 »

HTML5 <header>元素

<header>元素指定文档或section的头部。

<header>元素应该用作介绍性内容的容器。

您可以在一个文档中包含多个<header>元素。

以下示例定义文章的标题:

实例

<article>
  <header>
    <h1>手教程提供了什么?</h1>
    <p>说明:</p>
  </header>
  <p>新手教程(www.uihtml.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识.</p>
</article>
运行 »

HTML5 <footer>元素

<footer>元素指定文档或section的页脚。

<footer>元素应包含有关其包含元素的信息。

页脚通常包含文档的作者,版权信息,使用条款的链接,联系信息等。

您可能在一个文档中有几个<footer>元素。

实例

<footer>
  <p>发布者: UIHTML </p>
  <p>联系信息: <a href="mailto:643826784@qq.com">
  643826784@qq.com</a>.</p>
</footer>
运行 »

HTML5 <nav>元素

<nav>元素定义了一组导航链接。

请注意,并非文档的所有链接都应位于<nav>元素内。 <nav>元素仅适用于主要导航链接块。

实例

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

HTML5 <aside>元素

<aside>元素定义了除放置内容之外的一些内容(如侧边栏)。

<aside>内容应与周围内容相关。

实例

<p>新手教程(www.uihtml.com)提供了编程的基础技术教程.</p>

<aside>
  <h4>文档目录</h4>
  <p>
HTML<br>
CSS<br>
Javascript<br>
Python<br>
Java<br>
Ruby<br>
C<br>
PHP<br>
MySQL<br>
</p>
</aside>
运行 »

HTML5 <figure>和<figcaption>元素

<figure>标签规定独立的流内容(图像、图表、照片、代码等等)

<figure> 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响

<figcaption> 标签定义 <figure> 元素的标题

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

在HTML5中,图像和标题可以在<figure>元素中组合在一起:

实例

<figure>
  <img src="kenan.jpg" alt="柯南">
  <figcaption>柯南是个帅哥.</figcaption>
</figure>
运行 »

<img>元素定义图像, <figcaption>元素定义标题。


为何选择语义元素?

使用HTML4,开发人员使用自己的id/class名称来设置元素样式:header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav等

这使得搜索引擎无法识别正确的网页内容

使用新的HTML5元素( <header> <footer> <nav> <section> <article> ),主要是为了让搜索引擎更加的懂你,更加的明白你的网站,收录量及关键词排名周期会得到提前;它是有利于SEO优化的


HTML5中的语义元素

下面是HTML5中新语义元素的按字母顺序排列的列表。

链接转到我们完整的 HTML5参考文档

标签(Tag) 描述(Description)
<article> 定义文章
<aside> 定义页面内容以外的内容
<details> 定义用户能够查看或隐藏的额外细节
<figcaption> 定义 <figure> 元素的标题
<figure> 规定自包含内容,比如图示、图表、照片、代码清单等。.
<header> 元素指定文档或section的头部
<footer> 元素指定文档或section的页脚
<main> 规定文档的主内容
<mark> 定义重要的或强调的文本
<nav> 定义导航链接
<section> 元素定义文档中的一个部分
<time> 定义日期/时间
<summary> 定义 <details> 元素的可见标题