Web标准运动的一个重要原则是负责我们今天所在行业的一个重要原则,就是使用HTML元素来代表它们的内容,而不是默认情况下它们在浏览器中的显示方式。 这被称为使用语义HTML。
什么是语义HTML
语义HTML或语义标记是向网页引入意义的HTML,而不仅仅是表示。 例如,一个
标签表明封闭的文本是一个段落。
这既是语义的,也是表示性的,因为人们知道段落和浏览器知道如何显示它们。
在这个等式的另一面,像和这样的标签不是语义的,因为它们只定义了文本应该如何看起来(粗体或斜体),并且不为标记提供任何附加含义。
语义HTML标签的例子包括标题标签
到,,和。 在构建符合标准的网站时,可以使用更多语义HTML标签。
为什么你应该关心语义
编写语义HTML的好处源于任何网页的驱动目标 - 沟通的愿望。 通过在文档中添加语义标签,您可以提供有关该文档的其他信息,这有助于沟通。 具体而言,语义标签使浏览器清楚页面及其内容的含义。
这种清晰度也与搜索引擎交流,确保为正确的查询提供正确的页面。
语义HTML标签提供有关这些标签内容的信息,这些信息超出了它们在页面上的外观。 包含在标签中的文本会被浏览器立即识别为某种编码语言。
浏览器不会尝试呈现该代码,而是理解您正在使用该文本作为针对某种文章或在线教程目的的代码示例。
使用语义标签可为您提供更多针对内容样式的挂钩。 也许今天你更愿意让你的代码示例以默认的浏览器样式显示,但是明天,你想用灰色背景色调出它们,然后你想要定义准确的单间隔字体系列或字体堆栈以用于你的样品。 通过使用语义标记和巧妙应用的CSS,您可以轻松完成所有这些工作。
正确使用语义标签
当您想要使用语义标签来传达意义而不是出于展示目的时,您需要小心不要因为它们的常见显示属性而错误地使用它们。 一些最常使用的语义标签包括:
- blockquote - 有些人使用标记缩进不是引号的文本。 这是因为blockquotes默认缩进。 如果您只是希望缩进,但文本不是块引用,请改用CSS边距。
- p - 一些网页编辑器使用
  p>(一个包含在paragraoph中的非中断空格)在页面元素之间添加额外空间,而不是为该页面的文本定义实际段落。 与前面提到的缩进示例一样,您应该使用边距或填充样式属性来添加空间。
- ul - 像blockquote一样,将
标签内的文本括在大多数浏览器中的文本中。 这在语义上不正确且HTML无效,因为只有- 标签在
标签内有效。 再次使用边距或填充样式缩进文本。
- h1-h6 - 标题标签可用于使字体更大更大胆,但如果文本不是标题,则不应位于标题标签内。 如果您想更改页面上特定文本的大小或重量,请使用font-weight和font-size CSS属性。
通过使用具有含义的HTML标签,您可以创建传递更多信息的页面,而不是仅使用
标签包围所有内容。
哪些HTML标签是语义的?
尽管几乎每个HTML4标签和所有HTML5标签都具有语义含义,但一些标签本质上主要是语义的。
例如,HTML5已将和标签的含义重新定义为语义。 标记没有表达额外的重要性,而是通常以粗体显示的文本。 标签也没有表达额外的重要性或强调,而是定义了通常以斜体显示的文本。
语义HTML标签
<简称> 缩写 <缩写> 缩写
长引文 定义 <地址> 文件作者地址 <举> 引文 <代码> 代码参考 的 电传文字 逻辑划分 <跨度> 通用内联样式容器 <德尔> 已删除的文字 <插件> 插入文字 重点 的 强调重点
一级标题
二级标题
三级标题
第四级标题
第五级标题
六级标题
主题休息 文本由用户输入
预先格式化的文本
短内联报价 示例输出 <子> 标 标 可变或用户定义的文本
,和。 在构建符合标准的网站时,可以使用更多语义HTML标签。
为什么你应该关心语义
编写语义HTML的好处源于任何网页的驱动目标 - 沟通的愿望。 通过在文档中添加语义标签,您可以提供有关该文档的其他信息,这有助于沟通。 具体而言,语义标签使浏览器清楚页面及其内容的含义。
这种清晰度也与搜索引擎交流,确保为正确的查询提供正确的页面。
语义HTML标签提供有关这些标签内容的信息,这些信息超出了它们在页面上的外观。 包含在标签中的文本会被浏览器立即识别为某种编码语言。
浏览器不会尝试呈现该代码,而是理解您正在使用该文本作为针对某种文章或在线教程目的的代码示例。
使用语义标签可为您提供更多针对内容样式的挂钩。 也许今天你更愿意让你的代码示例以默认的浏览器样式显示,但是明天,你想用灰色背景色调出它们,然后你想要定义准确的单间隔字体系列或字体堆栈以用于你的样品。 通过使用语义标记和巧妙应用的CSS,您可以轻松完成所有这些工作。
正确使用语义标签
当您想要使用语义标签来传达意义而不是出于展示目的时,您需要小心不要因为它们的常见显示属性而错误地使用它们。 一些最常使用的语义标签包括:
- blockquote - 有些人使用标记缩进不是引号的文本。 这是因为blockquotes默认缩进。 如果您只是希望缩进,但文本不是块引用,请改用CSS边距。
- p - 一些网页编辑器使用
&nbsp; p>(一个包含在paragraoph中的非中断空格)在页面元素之间添加额外空间,而不是为该页面的文本定义实际段落。 与前面提到的缩进示例一样,您应该使用边距或填充样式属性来添加空间。
- ul - 像blockquote一样,将
标签内的文本括在大多数浏览器中的文本中。 这在语义上不正确且HTML无效,因为只有- 标签在
标签内有效。 再次使用边距或填充样式缩进文本。
- h1-h6 - 标题标签可用于使字体更大更大胆,但如果文本不是标题,则不应位于标题标签内。 如果您想更改页面上特定文本的大小或重量,请使用font-weight和font-size CSS属性。
通过使用具有含义的HTML标签,您可以创建传递更多信息的页面,而不是仅使用
标签包围所有内容。
哪些HTML标签是语义的?
尽管几乎每个HTML4标签和所有HTML5标签都具有语义含义,但一些标签本质上主要是语义的。
例如,HTML5已将和标签的含义重新定义为语义。 标记没有表达额外的重要性,而是通常以粗体显示的文本。 标签也没有表达额外的重要性或强调,而是定义了通常以斜体显示的文本。
语义HTML标签
<简称> 缩写 <缩写> 缩写
长引文 定义 <地址> 文件作者地址 <举> 引文 <代码> 代码参考 的 电传文字 逻辑划分 <跨度> 通用内联样式容器 <德尔> 已删除的文字 <插件> 插入文字 重点 的 强调重点
一级标题
二级标题
三级标题
第四级标题
第五级标题
六级标题
主题休息 文本由用户输入
预先格式化的文本
短内联报价 示例输出 <子> 标 标 可变或用户定义的文本