阿伟的笔记本

HTML5新增语义化标签

RWYQ阿伟 | 2022-08-13 | 笔记 | 0条留言 | 1082 | 2022-08-13更新

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

博客内容遵循 署名-非商业性使用-相同方式共享4.0国际（CC BY-NC-SA 4.0）协议。

本文链接：https://rwyqboy.top/post/228.html

版权声明：本文由阿伟的笔记本发布，如需转载请注明出处。

...