【笔记】HTML语义化

时间 2019-11-06

标签笔记 html 语义栏目 HTML 繁體版

原文原文链接

语义化的含义

语义化，个人理解是根据内容使用有含义的标签或设置有含义的属性。前端

语义化的做用

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

语义化标签

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

构建结构的容器标签

<header>

用于展现介绍性内容，一般包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其余元素，好比 Logo、搜索框、做者名称，等等。post

使用说明：字体

<header> 元素不是分段内容，所以不会往大纲中引入新的段落。也就是说，<header> 元素一般用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。

<main>

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

使用说明：代理

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

<aside>

表示一个和其他页面内容几乎无关的部分，被认为是独立于该内容的一部分而且能够被单独的拆分出来而不会使总体受影响。其一般表现为侧边栏或者标注框。code

使用说明：索引

不要使用 <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彻底指南》