html标签语义化

 

语义化标签的优点

• HTML结构清晰
• 代码可度性好
• 无障碍阅读
• 搜索引擎可根据标签的语言确定上下文和权重问题
• 移动设备能更完美的展示页面
• 便于团队维护开发

 

常用语义化标签

<h1>~<h6> 定义页面的标题，<h1>-<h6>元素等级依次降低。

<header> 页眉通常包括网站标志、主导航、全站链接以及搜索框。

<nav> 提供当前文档内或其他文档的导航链接，导航部分的常见示例是菜单，目录和索引。

<main> 主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。

<article> 专注于单个主题的博客文章，报纸文章或网页文章。

<address> 提供了一个或多个人员或组织的联系信息。

<section> 表示HTML文档中包含的独立部分。

<aside> 表示文档的一部分，其内容仅与文档的主要内容间接相关,通常显示为侧边栏。

<footer> 定义文档的底部区域，通常包含文档的作者，著作权信息，联系信息等。

<hgroup> 表示文档部分的多级标题，它对一组<h1>~<h6>元素进行分组。

<ul> 表示项目的无序列表，通常呈现为项目符号列表。

<ol> 表示项目的有序列表，通常呈现为编号列表。

<li> 表示列表中的项目。

<strong> 表示强调突出重点内容，浏览器通常以粗体显示内容。

<em> 标记强调重点的文本，可以嵌套<em>元素，嵌套的每个级别都表示强调程度更高。

<small> 代表旁注和小字体，例如版权和法律文本，独立于其样式表示。

<abbr> 表示缩写或首字母缩写词。

<cite> 用于描述对引用的创意作品的引用，并且必须包括该作品的标题。

<figure> 表示独立的内容，可能带有可选的标题，该标题使用<figcaption>元素指定。

<figcaption> 表示说明其父<figure>元素的其余内容的标题或图例。

<blockquote> 定义块引用，可以使用<cite>元素提供文本表示

<mark> 表示被标记或突出显示以供参考或标记目的的文本。

<time> 表示特定的时间。

<data> 表示特定的日期。

<dfn> 用于表示在定义短语或句子的上下文中定义的术语。

<code> 计算机代码的简短片段的方式显示其内容的样式。

<samp> 输出的示例或引用的内联文本或样本文本。

<kbd> 表示文本是从键盘上键入的，它经常用在与计算机相关的文档或手册中。

<del> 表示已从文档中删除的文本范围。

<ins> 表示已添加到文档中的文本范围。

<menu> 表示用户可以执行或激活的一组命令，例如上下文菜单等。

<dialog> 表示对话框或其他交互式组件，例如检查器或子窗口。

<summary> 元素为<details>元素的显示框指定摘要，标题或图例。

<details> 描述文档或文档某个部分的细节。