HTML5新增语义化标签
优点
网页布局改善
搜索引擎友好
标签整理
<header>标签
<header>:头部标签,“网页文档”或<section>的页眉,通常包含<h1>-<h6>元素或<hgroup>,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。整个页面没有限制header元素的个数,可以拥有多个,可以为每个内容块增加一个header元素。
<header>使用注意:
可以是“网页文档”或任意“section”的头部部分
没有个数限制
如果
<hgroup>或<h1>-<h6>自己就能工作的很好,那就不要用<header>
<hgroup>标签
<hgroup>:标题组标签,代表“网页文档”或<section>的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合。
<hgroup>使用注意:
如果只需要一个
<h1>-<h6>标签就不用<hgroup>,有连续多个<h1>-<h6>标签就用<hgroup>如果有连续多个标题和其他文章数据,
<h1>-<h6>标签就用<hgroup>包住,和其他文章元数据一起放入<header>标签
<nav>标签
<nav>:导航标签,代表页面的导航链接区域。用于定义页面的主要导航部分。
<nav>使用注意:
只在整个页面的主要导航部分使用
<article>标签
<article>:内容标签、文章,容易跟<section>和div容易混淆,其实<article>代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。(特殊的<section>),除了它的内容,<article>会有一个标题(通常会在header里),会有一个footer页脚。我们举几个例子介绍一下<article>,好更好区分<article>、<section>、<div>
<article> <h1>一篇文章</h1> <p>文章内容..</p> <footer> <p> <small>版权:</small> </p> </footer> </article>
如果在<article>内部再嵌套<article>,那就代表内嵌的<article>是与它外部的内容有关联的,如博客文章下面的评论。
<article>使用注意:
自身独立的情况下:用
<article>是相关内容:用
<section>没有语义的:用
<div>
<aside>标签
<aside>:侧边栏标签,包含在<article>元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。(特殊的<section>)
在<article>元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。
<aside>使用注意:
<aside>在<article>内表示主要内容的附属信息在
<article>之外则可做侧边栏,没有<article>与之对应,最好不用广告,其他日志链接或者其他分类导航也可以用
<section>标签
<section>:定义文档某个区域,代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。<section>通常还带标题,虽然html5中<section>会自动给标题<h1>-<h6>降级,但是最好手动给他们降级。
<section>使用注意:
一张页面可以用<section>划分为简介、文章条目和联系信息。不过在文章内页,最好用<article>。<section>不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用<div>。
表示文档中的节或者段
<article>、<nav>、<article>可以理解为特殊的<section>,所以如果可以用<article>、<nav>、<article>就不要用<section>,没实际意义的就用<div>
<footer>标签
<footer>:尾部标签,代表“网页文档”或<section>的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。
<footer>使用注意:
可以是“网页文档”或任意
<section>的底部部分没有个数限制,除了包裹的内容不一样,其他跟
<header>类似
<address>标签
<address>:代表区块容器,必须是作为联系信息出现,邮编地址、邮件地址等等,一般出现在footer。
<h1>-<h6>标签
<h1>-<h6>:因为<hgroup>,<section>和<article>的出现,<h1>-<h6>定义也发生了变化,允许一张页面出现多个<h1>。

晋公网安备14030302000174号 |