HTML5 新增的语义化结构元素
元素名称 | 说明 |
---|---|
header | |
HTML5中新的语义元素:
HTML5 语义化
新增加的header、footer标签主要用于表现DOM的语义没有特殊的样式
而HTML5的新标签可以直接用header、article、footer这些清晰明了的标签来表达,使文档的结构更清晰,以前设计时还要div然后id=”container”这一类的属性,现在可以用一个article等类似标签来表现,作用于DIV一样,只是更方便
其实语义标签的作用目前还没完全体现,这是由于html5的兼容性问题造成的,不过其日后的趋势就是搜索引擎会依赖这些标签更好的抓取网页内容。搜索引擎不建议千篇一律的div,使用恰当的html标记可以让搜索引擎更好的明白你的页面结构以便正确的索引。google目前的抓取会通过页面的<h1><h2>标记进行一些计算,如果你用<div>模拟,对用户无所谓,但是对搜索引擎你就不友好咯。
html5新标签更加语义化。比如文章内容就用<article>这个标签表示。视频就用<video>这个标签。更加的简洁明了。
https://www.runoob.com/html/html5-semantic-elements.html
<header> | <header>元素描述了文档的头部区域 <header>元素主要用于定义内容的介绍展示区域. 在页面中你可以使用多个<header> 元素. |
<nav> | <nav> 标签定义导航链接的部分。 <nav> 元素用于定义页面的导航链接部分区域,但是,不是所有的链接都需要包含在 <nav> 元素中! |
<article> | <article> 标签定义独立的内容。 |
<section> | <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 |
<aside> | <aside> 标签定义页面主区域内容之外的内容(比如侧边栏)。 aside 标签的内容应与主区域的内容相关. |
<figcaption> | 标签定义 <figure> 元素的标题. |
<figure> | 标签规定独立的流内容(图像、图表、照片、代码等等)。 |
<footer> | HTML5 <footer> 元素 <footer> 元素描述了文档的底部区域. <footer> 元素应该包含它的包含元素 一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等 |
另外:main 主要区域
使用 main 标签来展示文档的主体部分
的主要目的是将 ARIA 的地标性作用 main 映射到 HTML 中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。W3C 规范将 描述为 :
文档或应用程序的主要内容。主内容区域由与文档的中心主题或应用的核心功能的直接相关或扩展的内容组成。
自从 <main>
元素包含在 HTML
规定里之后,<body>
元素就还原成了它在 HTML4
中的定义。
The body element represents the content of the document.
注意:
1、使用main元素值得注意的一点是,它在每个页面中只能使用一次。
如果你在一个文档中试图使用多个 标签,那么 W3C validator 会抛出错误。 元素的另外一个规定是,它不能作为 , , , , 的子元素节点。
就像其它的 HTML5 新元素一样,并不是所有的浏览器都能够识别出
,并且给它加上预设的样式,你可能需要在自己的 CSS 文件中将它设置为块级元素。
main {display:block;}
改造范例:
<header>Header</header>
<div id="content">Main Content</div>
<footer>Footer</footer>
改造为:
<header>Header</header>
<main id="content">Main Content</main>
<footer>Footer</footer>
section 范例
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
article 范例
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
或
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>
aside 范例
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
footer 范例
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
figure和figcaption范例
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>