A-A+

html语义化是什么意思?为什么要进行html语义化?

2018年09月13日 html, 前端基础 暂无评论

 
web行业标准的一个重要准则就是,我们必须将html标签就用于它本身表示的意义,而不是默认的它们在浏览器中显示的样式,即,每个标签都代表着具体的意义。
 
语义化HTML或语义标记HTML,它向网页引入含义而不仅仅是展示方式。例如,<p>标记表示一个段落。

这即是语义的,也是表现性的,因为人们知道哪些段落和浏览器知道如何显示它们。

在这个等式的另一面,像<b>和<i>这样的标签不是语义的,因为它们只定义了文本的外观(粗体或斜体),并且没有为标记提供任何额外的含义。
语义HTML标记的示例包括标题标记<h1>到<h6>,<blockquote>,<code>和<em>。在构建符合标准的网站时,可以使用更多语义HTML标记。
HTML问号

为什么要关注HTML语义化呢?

编写语义化HTML的好处,源于网页的驱动目标 - 沟通的意愿。通过向文档添加语义标记,可以提供有关该文档的其他信息,从而有助于进行通信。具体而言,语义标签使浏览器清楚地了解页面及其内容的含义。

明晰的语议化标签,还能更好地被搜索引擎索引并解析,确保搜索时提供正确的页面。

语义HTML标记提供有关这些标记内容的信息,这些信息超出了它们在页面上的显示方式。包含在<code>标记中的文本被浏览器立即识别为某种编码语言。

浏览器不是试图呈现该代码,而是理解您正在使用该文本作为代码的示例,以用于文章或某种在线教程。

使用语义标记为您的内容设计样式提供了更多钩子。也许今天你更喜欢让你的代码示例以默认的浏览器样式显示,但明天,你想用灰色背景颜色调出它们,之后你想要定义精确的单倍间距字体系列或  字体堆栈  用于你的样品。您可以使用语义标记和智能应用CSS轻松完成所有这些操作。
 

正确使用语义标记

当您想使用语义标签来传达意义而不是用于表示目的时,您需要注意不要仅仅因为它们的常见显示属性而错误地使用它们。一些最常被滥用的语义标签包括:

  • blockquote - 有些人使用  <blockquote>  标签来缩进非引号的文本。这是因为blockquotes默认是缩进的。如果您只想获得缩进,但文本不是块引用,请改用CSS边距。
  • p - 一些网络编辑使用<p>&nbsp; </ p>(包含在paragraoph中的不间断空格)在页面元素之间添加额外空间,而不是为该页面的文本定义实际段落。与前面提到的缩进示例一样,您应该使用margin或padding样式属性来添加空间。
  • ul - 与blockquote一样,在<ul>标记内包含文本会在大多数浏览器中缩进该文本。这在语义上都是错误的并且HTML无效,因为只有<li>标记在<ul>标记内有效。再次,使用边距或填充样式缩进文本。
  • h1-h6 - 标题标签可用于使字体更大更粗,但如果文本不是标题,则它不应位于标题标记内。如果要更改页面上特定文本的大小或重量,请使用font-weight和font-size CSS属性。

通过使用具有含义的HTML标记,您可以创建提供更多信息的页面,而不是仅使用<div>标记包围所有内容。

哪些HTML标签是语义的?

虽然几乎每个HTML4标签和所有HTML5标签都具有语义含义,但有些标签本质上主要是语义标签。
例如,HTML5重新定义了<b>和<i>标签的含义是语义的。<b>标签不会传达额外的重要性,而是通常以粗体呈现的文本。<i>标签也没有传达额外的重要性或重点,而是定义通常以斜体显示的文本。
 
语义HTML标签

<abbr> 缩写
<acronym> 缩写
<blockquote> 引用
<dfn> 定义
<address> 该文件的作者的地址
<cite> 引文
<code> 代码参考
<tt> 电传文字
<div> 块容器
<span> 通用内联样式容器
<del> 删除了文字
<ins> 插入的文字
<em> 重点
<strong> 非常强调
<h1> 一级标题
<h2> 二级标题
<h3> 三级标题
<h4> 四级标题
<h5> 五级标题
<h6> 六级标题
<hr> 水平线
<kbd> 用户输入的文本
<pre> 预格式化文本
<q> 内联引用
<samp> 样本输出
<sub> 下标
<sup> 上标
<var> 变量或用户定义的文本
标签:

给我留言

Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录