1. HTML语义化
在HTML5之前,通常使用<div>
标签表示页面不同的模块,但是<div>
标签本身没有语义。HTML5中加入了一些语义化标签,能够清晰地描述页面的结构和含义。
2. 语义化标签
标签名 | 解释 |
---|---|
<header> | 头部标签,表示页面或页面内某个区域的头部,通常包含网站或页面的标志、导航栏、搜索框等 |
<nav> | 导航栏标签,表示页面或页面内某个区域的导航栏,通常包含指向不同部分或页面的链接 |
<main> | 主要内容标签,表示页面或页面内某个区域的主要内容,通常包含页面的核心内容 |
<article> | 文章标签,表示页面或页面内某个区域的独立内容块,通常包含一篇文章、一组博客帖子、一条新闻报道等 |
<section> | 文章中的章节,表示页面或页面内某个区域的章节,通常包含一组与文字相关的内容 |
<aside> | 侧边栏标签,表示页面或页面内某个区域的侧边栏,通常包含与主要内容相关但不是核心的信息 |
<footer> | 页脚标签,表示页面或页面内某个区域的页脚,通常包含版权信息、联系方式等 |
<h1>—<h6> | 标题标签,表示页面或页面内某个区域的标题,<h1>是最高级别的标题,而<h6>是最低级别的标题 |
<p> | 段落标签,表示段落,通常用于包含一段文字 |
<ul>和<ol> | 列表标签,分别表示无序列表和有序列表,通常用于展示一组相关的项目 |
3. 语义化的优点
- 可以让HTML代码更具有可读性、可访问性和可维护性(让人更容易读懂)。
- 能够使搜索引擎更好地理解页面内容,从而提高搜索引擎优化(SEO)的效果(让浏览器更容易读懂)。