常用的 html 语义化标签，以及作用

为什么要语义化

 

• 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
• （主要靠title标签和meta中的keywords、description）有利于SEO
• 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
• 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
• 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

 

 

<header>元素

用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。

 

<nav>元素

定义页面的导航链接部分区域，不是所有的链接都需要包含在<nav>中，除了页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。

 

 <aside>元素

aside 用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。

 

<main>元素

定义页面的主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

 

<article>元素

定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

<section>元素

元素用于标记文档的各个部分，例如长表单文章的章节或主要部分。

 

<small>元素

为较不重要的内容定义小字体。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。

 

<strong>元素

粗体，强调的意思

<b>元素

仅粗体

 

 <em>元素

斜体文字，强调的文本

 <i>元素

斜体

 

<mark>元素

mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

 

 <blockquote>元素

定义块引用，浏览器会在 blockquote 元素前后添加换行，并增加外边距。cite属性可用来规定引用的来源

 

<abbr>元素

解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。