一、什么是语义化标签

语义化标签可以理解为用于进行网页页面构建的标签，他们不会影响页面内容，只是对页面结构的规范话。

二、为什么使用语义化标签

易修改、维护
更易理解页面结构
有利于SEO搜索引擎检索

三、语义化标签的使用

1.头部标签<header>：<header>元素有两种用法，第一是标注内容的标题，第二是标注网页的页眉，如上图你看到的那样。除非必要（内容标题附带其它信息的情况下：发布时间、作者等），一般不在内容中使用<header>。因而，网页中可以包含多个<header>元素。按照 HTML5 的规定，<header>都应包含某个级别的标题，所以应隐式或显式地包含标题，通常将不希望显示的标题设置为display: none;，一方面遵守规范，另一方面则提供了无障碍阅读而不至于影响到页面设计。

2.导航栏标签<nav>：导航栏使用<nav>看起来是理所当然的，进一步，它也用于一组文章的链接。一个页面可以包含多个<nav>元素，但通常仅仅在页面的主要导航部分使用它。

3.附注标签<aside>：<aside>元素并不仅仅是侧栏，它表示与它周围文本没有密切关系的内容。文章中同样可以使用<aside>元素，来说明文章的附加内容、解释说明某个观点、相关内容链接等等。

4.页脚标签<footer>：<footer>标签仅仅可以包含版权、来源信息、法律限制等等之类的文本或链接信息。如果想要在页脚中包含其它内容，可以使用熟悉的<div>来帮忙。

5.主要内容标签<main>：在早先的 HTML5 版本中并没有规定页面主体的标签，相关的书中经常会说：除去头部、尾部、侧栏等其它部分，剩下的自然是主体部分。然而，HTML5.1 中规定了一个<main>标签来标识主体内容。<main>标签不能包含在页面其它区块元素中，通常是<body>的子标签，或者是全局<div>的子标签。<main>标签可以帮助屏幕阅读工具识别页面的主体部分，从而让访问者迅速得到有用的信息。

6.文章标签<article>：<article>表示一个完整的、自成一体的内容块。如文章或新闻报道。<article>应包含完整的标题、文章署名、发布时间、正文。当语义与表现发生冲突，例如有时需要将文章分多个页面显示，那么需要把每个页面的文章区域都用<article>标记。

四、代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>语义化标签</title>
</head>
<body><header>我是页面标题</header><header>我是页面标题</header><nav><a href=""> 导航1 </a><a href=""> 导航1 </a><a href=""> 导航1 </a></nav><aside>侧边栏</aside><article>我是文章</article><footer>我是页脚</footer>
</body>
</html>

HTML中的语义化标签相关推荐

什么是语义化标签，常见的语义化标签介绍
1.什么是语义化标签语义化是指对某件事或某个东西的含义有正确直观的解释,那么在HTML中,语义化标签就是指这个标签本身直观表达出了它所包含的内容是什么. 2.语义化标签的好处代码结构得到了优化,即 ...
html5语义化标签及优点
html5语义化标签及优点 html5中的语义化标签 < h1~h6 >:标题,< h1 > 与 < title > 协调有利于搜索引擎优化. < heade ...
前端开发 html第二课自结束标签注释标签中的属性文档声明进制字符编码文档使用 VScode 实体 meta标签语义化标签块元素和行内元素布局标签
1 自结束标签标签一般成对出现,但是也存在一些自结束标签如: 多"/"和没有"/"区别不大 2 注释注释的作用: 注释中的内容会被浏览器忽略,不会在网页中 ...
html5语义化标签大全
常见的语义化标签有 <article>.<section>.<nav>.<aside>.<header>.<footer> 详细 ...
HTML5语义化标签综合基础案例,HTML5语义化标签综合案例
HTML 标签声明必须是 HTML 文档的第一行,位于标签之前. 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 请始终向 HTML 文档添加 ...
HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
图片标签|| 列表标签||链接标签||div和span|| 语义化标签
图片标签 img:展示图片 * 属性: * src:指定图片的位置相对路径 * 以.开头的路径 ...
html5语义化标签marquee,高效书写HTML5，快速提升你的编码效率！
H5开始对标签及属性的书写更加包容,同时新增了语义化的标签,也是为了替代纯div+css的布局,本文讲带大家一起学习和探讨HTML书写规范. 1.文档类型声明文档类型声明 2.标签.属性名.文件名推 ...

HTML中的语义化标签

一、什么是语义化标签

二、为什么使用语义化标签

三、语义化标签的使用

四、代码展示

HTML中的语义化标签相关推荐

最新文章

热门文章