阅读 379

语义化 HTML

前言

HTML5 新增了很多功能性标签如 video、audio 等多媒体标签,canvas、svg 图像标签,新的表单类型和属性,以及非常多的语义标签。

然而在的日常开发中除了用一些如 footer、header 等 h5 语义化标签外,其他的基本都是 div + span 一梭子全部搞定。快速还原设计稿,并不会感觉有什么不妥。因为在 HTML 语义上面花费太多时间并不会有一个很明显的收益,还可能会被领导误认为在摸鱼。所以语义化的 HTML 在紧张的开发迭代中就这么被忽略了。

但是看了 winter 对于语义化 HTML 的讲解之后,才突然认识到这些年写的 HTML 就是在瞎 ** 写,虽然实现了布局结构但是意义完全是变了味道的。

语义化 HTML 的意义

  • 语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有 CSS 的时候,开发者也能够清晰地看出网页的结构,也更为便于团队的开发和维护。
  • 除了对人类友好之外,语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合搜索引擎检索(SEO),也可以让搜索引擎爬虫更好地获取到更多有效信息,有效提升网页的搜索量,并且语义类还可以支持读屏软件,根据文章可以自动生成目录等等。

正文

ruby

ruby 元素被用来展示东亚文字注音或字符注释。

龙行

明日 Ashita

之前在遇到这种布局的时候一般都是使用定位达到显示效果,但是 ruby 元素才是该场景的最优解。

em

em 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。

em 是英文 emphasize 的缩写,意思为强调。

我今天吃了一个苹果

我今天吃了一个苹果

上面两句话,第一句强调的是苹果第二句强调的是今天。所以如果有需要强调某个词语的时候就应该使用 em 标签,如果仅仅是为了斜体显示则使用 i 标签。

strong

strong 标签和 em 标签一样,用于强调文本,但它强调的程度更强一些。

如果常识告诉我们应该较少使用 em 标签的话,那么 strong 标签出现的次数应该更少。如果说用 em 标签修饰的文本好像是在大声呼喊,那么用 strong 标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话总是一诺千金,与此相同,限制 strong 的使用可以令应该更加引人注意,而且更加有效。

aside

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

  • 被包含在 article 元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名次解释,等等。
  • 在 article 元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。

hgroup

hgroup 标签用于对网页或区段(section)的标题进行组合。

h1-h6 是最基本的标题,它们表示了文章中不同层级的标题。有些时候,我们会有副标题,为了避免副标题产生额外的一个层级,我们使用 hgroup 标签。

section

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

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>
复制代码

section 的嵌套会使得其中的 h1-h6 下降一级

article

article 是使用来定义独立于文档且有意义的来自外部的内容,比如:一些投稿文章、新闻记者的文章,或者是摘自其它博客、论坛的信息等。

article 是一种特别的结构,它表示具有一定独立性质的文章。所以,article 和 body 具有相似的结构,同时,一个 HTML 页面中,可能有多个 article 存在。 除了内容主题以外,一个 article 元素通常会有自己的标题及脚注。

header

如其名,通常出现在前部,表示导航或者介绍性的内容。

footer

通常出现在尾部,包含一些作者信息、相关链接、版权信息等。

hr

hr 元素表示段落级元素之间的主题转换(例如,一个故事中的场景的改变,或一个章节的主题的改变)

在还原设计稿的时候通常会遇到很长的横线,有很多方法都能实现这个横线,border、hr、伪类、高度元素等,所以在不同的场景使用不同的实现方法。

blockquote

blockquote 元素(或者 HTML 块级引用元素),代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进(注 中说明了如何更改)。若引文来源于网络,则可以将原内容的出处 URL 地址设置到 cite 特性上,若要以文本的形式告知读者引文的出处时,可以通过 元素。

<blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>
复制代码

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

—Aldous Huxley, Brave New World

time

time 标签用来表示24小时制时间或者公历日期,若表示日期则也可包含时间和时区。

<p>The concert starts at <time>20:00</time>.</p>

<p>This article was created on <time pubdate>2011-01-28</time>.</p>

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
复制代码

figure

用于表示与主文章相关的图片,代码、表格等流内容。

dfn

dfn 标签是用来包裹被定义的名词。

<p><dfn>硬核</dfn>作为网络流行语的该词,原本的含义为形容摇滚乐的分支之一硬核,比如硬核朋克,是更具有力量感的音乐形式,热情奔放猛烈强劲。但不知何时被作为网络语而流行了起来,甚至有了调侃的意思。</p>
复制代码

pre

pre 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。(紧跟在 pre 开始标签后的换行符也会被省略)

<pre>
    html
  js     css      
</pre>
复制代码
    html
  js     css      

samp

samp 元素用于标识计算机程序输出

<pre>
    <samp>
        GET /home.html HTTP/1.1
        Host: www.example.org
    </samp>
</pre>
复制代码

GET /home.html HTTP/1.1
Host: www.example.org

code

code 元素呈现一段计算机代码。

<code>
    const a = 123
</code>
复制代码
const a = 123

kbd

kbd 标签经常用在于计算机相关的文档和手册中,定义键盘文本。

键入 <kbd>quit</kbd> 来退出程序,或者键入 <kbd>menu</kbd> 来返回主菜单
复制代码

键入 quit 来退出程序,或者键入 menu 来返回主菜单

var

var 元素表示数学表达式或编程上下文中的变量。

<p> 一个简单的方程:<var>x</var> = <var>y</var> + 2 </p>
复制代码

一个简单的方程:x = y + 2

small

small元素將使文本的字体变小一号。(例如从大变成中等,从中等变成小,从小变成超小)。在HTML5中,除了它的样式含义,这个元素被重新定义为表示边注释和附属细则,包括版权和法律文本。

s

s 元素 使用删除线来渲染文本。使用 s 元素来表示不再相关,或者不再准确的事情。

经常用于电商领域表示打折前的价格。

del

del 定义文档中已被删除的文本。

页面效果跟 s 一样,意义不同。

ins

ins 标签定义已经被插入文档中的文本。

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
复制代码

My favorite color is blue red!

i

i 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示。

b

通常作为关键字使用。

u

u 元素使文本在其内容的基线下的一行呈现下划线。文本标记为中文文本中的专有名称,或 将文本标记为拼写错误。

参考