【笔记】HTML语义化

1,048 阅读8分钟

语义化的含义

语义化,我的理解是根据内容使用有含义的标签或设置有含义的属性。

语义化的作用

  • HTML结构更加清晰,有助于阅读和维护
  • 方便机器识别内容,有助于SEO

语义化标签

我把语义化标签分为两类,一类是用于构建结构的容器标签,一类是指定具体含义的标签。以下内容摘自MDN。

构建结构的容器标签

<header>

用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。

使用说明:

  • <header> 元素不是分段内容,因此不会往 大纲 中引入新的段落。也就是说,<header> 元素通常用于包含周围部分的标题(h1 至 h6 元素),但这不是必需的。

<main>

呈现应用的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

使用说明:

  • 这部分内容在文档中应当是独一无二的,不包含在任何一系列文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站 Logo,搜索框(除非搜索框为文档的主要功能)。
  • <main>对文档的大纲没有贡献;也就是说,与诸如<body>之类的元素,诸如<h2>之类的标题等不同,<main>不会影响DOM's页面结构概念。这是严格的信息。

<aside>

表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。

使用说明:

  • 不要使用 <aside> 元素去尾随括号内的文本 ,因为这种文本被认为是主要流内容的一部分。

<footer>

表示根节点元素的页脚或者最近一个章节内容的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

使用说明:

  • <footer>元素内的作者信息应包含在<address> 元素中。
  • <footer>元素不是章节内容,因此在outline中不能包含新的章节。

<nav>

其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单,目录和索引。

使用说明:

  • 并不是所有的链接都必须使用<nav>元素,它只用来将一些热门的链接放入导航栏,例如<footer>元素就常用来在页面底部包含一个不常用到,没必要加入<nav>的链接列表。
  • 一个网页也可能含有多个<nav>元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表。
  • 对于屏幕阅读障碍的人,可以使用这个元素来确定是否忽略初始内容。

<article>

表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

使用说明:

  • 每个<article>,通常包括标题(<h1> - <h6>元素)作为<article>元素的子元素。
  • 当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
  • <article>元素的作者信息可通过<address>元素提供,但是不适用于嵌套的<article>元素。
  • <article>元素的发布日期和时间可通过<time>元素的pubdate属性表示。
  • 可以使用<time> 元素的datetime属性来描述元素的发布日期和时间。请注意<time>的pubdate 属性不再是W3C HTML5标准。

<section>

表示一个包含在HTML文档中的独立部分,它没有更具体的语义元素来表示,一般来说会有包含一个标题。

使用说明:

  • 一般通过是否包含一个标题作为子节点 来 辨识每一个<section>。
  • 如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。
  • 不要把 <section> 元素作为一个普通的容器来使用,这是本应该是<div>的用法(特别是当片段仅仅是为了美化样式的时候)。 一般来说,一个 <section> 应该出现在文档大纲中。

<details>

可创建一个挂件,仅在被切换成展开状态时,它才会显示内含的信息。<summary> 用作 <details>元素的一个内容的摘要,标题或图例。

<ol>/<ul>

ol和ul这两个标签表示的是列表,区别是是否有顺序要求。其子元素<li>表示的是列表项,li的属性value的值表示列表项的序号。

<dl>

是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)。

  • <dt> 用于在一个定义列表中声明一个术语。
  • <dd> 用来指明一个描述列表中一个术语的描述。

<address>

表示其中的 HTML 提供了某个人或某个组织(等等)的联系信息。

用法说明节

  • 当表示一个和联系信息无关的任意的地址时,请改用 <p> 元素而不是 <address> 元素。
  • 这个元素不能包含除联系信息之外的任何信息,比如出版日期(这应当被包含在 <time> 元素之中)。
  • 通常,<address> 元素可以放在 <footer> 元素之中(如果存在的话)。

指定具体内容的标签

<h1>–<h6>

标题(Heading)元素呈现了六个不同的级别的标题,<h1> 级别最高,而 <h6> 级别最低。

使用说明:

  • 用户代理可以使用标题信息,例如自动构建文档的目录。
  • 不要为了减小标题的字体而使用低级别的标题, 而是使用 CSS font-size 属性。
  • 避免跳过某级标题:始终要从 <h1> 开始,接下来依次使用 <h2> 等等。
  • 使用 <section> 元素时,为了方便起见,你应该考虑避免在同一个页面上重复使用 <h1>,<h1> 应被用于表示页面的标题,其他的标题当从 <h2> 开始。在使用 section 时,应当为每个 section 都使用一个 <h2>。

<a>

锚元素可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。属性rel可以设置prev/next来标识“上一篇”/“下一篇”,设置nofollow标识不推荐超链接指向的文档。

<em>/<strong>

这两个标签都有强调的作用,不过这两个在表现形式上有所不同,em是斜体,strong是加粗。

<i>/<b>

i是斜体,b是加粗,这两个与<em>/<strong>的不同是<i>/<b>没有强调/侧重的作用,而是为了引起注意或排版需要。

<img>

src, alt 属性决定了图片的含义

  • 有 src 且 alt 为空字符串,代表装饰用图
  • 有 src 且 alt 为非空字符串,图为文档内容的一部分
  • 有 src 且无 alt,图为内容一部分但无等价的文本内容可用

<p>

表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。

属性

title

包含了表示咨询信息文本,和它属于的元素相关。这个信息通常存在,但绝不必要,作为提示信息展示给用户。一些典型用例:

  • 链接:被链接文档的标题或描述
  • 媒体元素,例如图像:描述或关联信息
  • 段落:脚注或者相关的评论
  • 引用:作者信息,以及其他

SEO

如果你想了解前端如何实现SEO或者Vue单页项目如何实现SEO,尽情点击我的另一篇文章《Vue单页项目SEO完全指南 》