编写 HTML5 语义化页面

🌙
手机阅读
本文目录结构

什么是主体结构标签?

HTML结构语义化,是HTML5开始才提出来的,以前的html结构,都是一堆没有语义的冷冰冰的div标签。div+css写出来,HTML一打开就是一堆div,为了改变这种这种状况,HTML5给出了几个新的结构化的标签。

HTML中比较重大的修改就是为了使文档结构更加清晰明确,容易阅读,增加了很多新的结构标签。

什么是语义标签?

HTML标签,也有的叫HTML元素,只是叫法不同;

我们常说的语义,语义化,是指有意义;

语义化标签,就是有意义的标签。

一个语义标签能够清楚的描述其意义,无论是浏览器,搜索引擎还是开发者都可以很直接的看明白。

  • 无语义实例:
    • <div><span> ,这种无需考虑内容.
  • 语义元素实例
    • <form> , <table> , <img> ,这种会清楚的定义了它的内容.

什么是HTML结构语义化

所谓的HTML结构语义化,就是合理使用HTML5标签,让结构更加清晰明确,就这么简单。

很多人说的HTML静态页,符合语义化。其实是指结构化+语义化。

为了表述清楚,请知道这个事情。

本章学习的重点

  • 掌握HTML5【主体结构标签】的使用方法,以及使用场合。
    • 主要包括 article /section/nav/aside/time/pubdate
  • 掌握HTML5【非主体结构标签】的使用方法,以及使用场合。
    • 主要包括 header /footer/hgroup/address
  • 如何结合【主体结构标签】与【非主体结构标签】来合理的组成整体的页面搭配。
  • 内容区块的如何划分
    • 内容区块,也有的叫内容块,是按照逻辑进行分割的单位;
    • 对于书籍:章,节都是内容块
    • 对于博客:导航菜单,正文区,评论区,相关文章区,都是内容块
    • 我们要学会对常见网页进行内容块的划分

语义化的例子

一些网站都包含以下HTML代码:

  • <div id="nav"> ,
  • <div class="header"> ,
  • <div id="footer"> 来指明导航链接, 头部, 以及尾部,但是在HTML5里就不需要了;
<header>
<nav>
<footer>

这种标签,就是语义化标签,代表有意义的标签,不能和div一样随便用的。

HTML5语义标签大全

HTML5 添加了很多语义标签,可以在 HTML5 新增的标签元素 中查看 “新的语义和结构元素"部分的;

<header>标签

<header> 标签的作用是引导和导航作用的,通常用来放置一个内容块的标题!!(除了标题,也可以包含其他内容的)

一个header标签,通常情况下,至少包含一个heading标签(就是h1-h6),也包括后面要讨论的 hgroup,nav。

<header>
    <h1>阿西河前端教程</h1>
</header>

注意:在页面中你可以使用多个 <header> 标签

<header>
    <h1>阿西河前端教程</h1>
</header>
<div>
    <header>
        <h1>HTML教程</h1>
    </header>
    <p>阿西河前端教程是在2018年2月开始创建的</p>
</div>

<hgroup> 标签

hgroup标签通常是用来将标题及子标题进行分组的

如果只有一个主标题是不需要hgroup标签的,比如上面header标签的例子;

但是如果还有子标题就需要了,比如下面这种

<header>
    <hgroup>
        <h1>阿西河前端教程</h1>
        <h2>一个助你成为全栈开发的网站</h2>
    </hgroup>
</header>

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

完整的演示

把上面header等全部使用起来

<header>
    <hgroup>
        <h1>阿西河前端教程</h1>
        <h2>一个助你成为全栈开发的网站</h2>
    </hgroup>
    <nav>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/">图片</a></li>
            <li><a href="/">关于我</a></li>
        </ul>
    </nav>
</header>
  • 传统导航条
    • 顶部导航
    • 底部导航
  • 侧边栏导航
  • 页内导航
  • 翻页操作
  • 其他的导航链接组
    • 比如友情链接等。

<footer>标签

<footer> 表示页面中的一个内容区块的脚注,一般用在内容块底部的作者信息,相关阅读链接以及版权信息等。

<footer> 元素应该包含它的包含元素,一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等

例子

<footer>
    <nav>
      <ul>
        <li><a href="/">版权信息</a></li>
        <li><a href="/">站点地图</a></li>
        <li><a href="/">联系方式</a></li>
      </ul>
    </nav>
</footer>

和header一样,文档中你可以使用多个 <footer> 标签,一般是用在article,section这些加footer元素。

<body>
  <header>
    <hgroup>
      <h2>阿西河前端教程</h2>
      <h2>一个助你成为全栈开发的网站</h2>
    </hgroup>
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/">图片</a></li>
        <li><a href="/">关于我</a></li>
      </ul>
    </nav>
  </header>
  <article>
    <header>
      <h1>HTML5教程</h1>
      <p>发表于:2020年9月1日</p>
    </header>
    <p>巴拉巴拉的正文内容</p>
    <footer>
      <p>归属版权为阿西河前端教程所有</p>
    </footer>
  </article>
  <footer>
    <nav>
      <ul>
        <li><a href="/">版权信息</a></li>
        <li><a href="/">站点地图</a></li>
        <li><a href="/">联系方式</a></li>
      </ul>
    </nav>
  </footer>
</body>

注意:为了SEO规范,一般一张页面只用一个h1标签。

<article>标签

<article> 标签定义独立的完整的可以独自被外部引用的内容。

<article> 元素使用例子如下:

  • 博客中的一篇文章;
  • 论坛中的一个帖子
  • 咨询网站的一篇新闻
  • 评论区的一段评论
  • 或者其他任何独立的内容

实例演示

下面是一个代码演示

<article>
    <header>
        <h1>HTML5教程</h1>
        <p>发表于:2020年9月1日</p>
    </header>
    <p>巴拉巴拉的正文内容</p>
    <footer>
        <p>归属版权为阿西河前端教程所有</p>
    </footer>
</article>

上面的例子,介绍HTML5教程;header含有标题,footer含有版权,div区域是正文内容;这个例子就是独立和完整的,所以使用 article 进行包起来。

article可以多次嵌套

真实情况下,文章的正文其实还有文章的评论区等,这时候样子就是下面的样子

<!-- 文章正文 -->
<article>
    <header>
        <h1>HTML5教程</h1>
        <p>发表于:2020年9月1日</p>
    </header>
    <p>巴拉巴拉的正文内容</p>
    <footer>
        <p>归属版权为阿西河前端教程所有</p>
    </footer>
    <!-- 评论区 -->
    <div>
        <h2>评论区</h2>
        <article>
            <header>
                <h3>发表者:朱安邦</h3>
                <p>发表于:2020年9月1日</p>
            </header>
            <div>
                <p>这个教程是我写的,我感觉还不错</p>
            </div>
            <footer>
                <p>个性签名:</p>
                <p>阿西河前端教程的站长</p>
            </footer>
        </article>
        <article>
            <header>
                <h3>发表者:特朗普</h3>
                <p>发表于:2020年9月1日</p>
            </header>
            <div>
                <p>这个教程写的一点也不好,比我差远了,没有人比我更懂HTML5</p>
            </div>
            <footer>
                <p>个性签名:</p>
                <p>美国总统,世界懂王</p>
            </footer>
        </article>
    </div>
</article>

评论区每一个人的都是相互独立的,完整的,所以用article元素。

<aside>标签

<aside> 标签表示当前页面或文章的附属信息部分;

可以是相关文章,侧边栏,广告,导航条,友情链接,最新文章列表以及其他区别于主要内容的部分;

例子:比如article元素内容之外,但是又于article内容相关的辅助信息,比如相关新闻,相关文章等;

  <article>
    <h1>HTML5教程</h1>
    <p>阿西河的HTML5教程,写的真好啊!</p>
  </article>
  <aside>
    <h2>相关教程</h2>
    <ul>
      <li><a href="#">HTML 教程</a></li>
      <li><a href="#">CSS 教程</a></li>
      <li><a href="#">CSS3 教程</a></li>
    </ul>
  </aside>

<section>标签

<section> 标签表示页面中的一个内容块,比如章节、页眉、页脚或文档的其他部分。

具体怎么划分,其实也可以参考设计师的PS图层分组;

注意:section 作用是对内容进行分块的,或者对文章进行分段。

article 包含 section

  <article>
    <header>
      <h1>HTML5教程</h1>
      <p>发表于:2020年9月1日</p>
    </header>
    <div>
      <section>
        <h2>html5 标签</h2>
        <p>标签的介绍</p>
      </section>
      <section>
        <h2>html5 属性</h2>
        <p>属性的介绍</p>
      </section>
    </div>
    <footer>
      <p>归属版权为阿西河前端教程所有</p>
    </footer>
  </article>

上面的HTML标签和属性,都是独立的内容,所以用section包起来;

section 包含 article

  <!-- 评论区 -->
  <section>
    <h2>评论区</h2>
    <article>
      <header>
        <h3>发表者:朱安邦</h3>
        <p>发表于:2020年9月1日</p>
      </header>
      <div>
        <p>这个教程是我写的,我感觉还不错</p>
      </div>
      <footer>
        <p>个性签名:</p>
        <p>阿西河前端教程的站长</p>
      </footer>
    </article>
    <article>
      <header>
        <h3>发表者:特朗普</h3>
        <p>发表于:2020年9月1日</p>
      </header>
      <div>
        <p>这个教程写的一点也不好,比我差远了,没有人比我更懂HTML5</p>
      </div>
      <footer>
        <p>个性签名:</p>
        <p>美国总统,世界懂王</p>
      </footer>
    </article>
  </section>

因为本身属于评论区,属于一个内容块,所以使用 section 包含;但是里面每一个人的评论都是独立的,所以用 article包含。

section 与 article 区别

他们是可以互相包含的;

  • section 强调的是分段,分块
  • article 强调的是独立性
    • article 是一种特殊的section标签;他比section更强调独立性。

如果一个内容,相对比较独立,完整的时候,就是有 article;如果将一块内容分为几段的时候,使用section;

在实际使用中,因为所有页面的从属原因,以及CSS控制原因,可以把导航条,菜单,版权等在一个统一的div内,方便使用css控制,也方面阅读

section使用禁忌

  • 不要将section元素用于设置样式的页面容器,那是div的工作
  • 如果 article ,aside,nav符合使用条件,不要使用section元素
  • 不要为没有标题(h1-h6)的内容块设置section;

比如上面的评论区的代码,评论区与文章正文相关,所以不能使用article,也不能使用nav,但是他属于一个内容块,所以使用section;但是里面的评论又是不相关的,所以使用article;

<figure> 和 <figcaption> 标签

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

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

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

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

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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>