HTML 语义结构

含义

HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

下面就是一个典型的语义结构的网页。

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

只看上面的代码，就可以知道，页面分成页眉（<header>）、主体（<main>）、页尾（<footer>）三个部分。

编写 HTML 网页，第一步就是写出语义结构的网页骨架。

一些常用的语义化标签

aside

<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置补充信息、评论或注释。

section

<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。

<nav>标签用于放置页面或文档的导航信息。

hgroup

如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。

posted @ 2022-04-21 14:20  海浪博客  阅读(36)  评论(0)  编辑  收藏  举报