html语义化标签_HTML之语义化

这次想写写关于HTML的语义化。

嗯，真的不是偷懒（捂脸）。

一、我理解的语义化

什么是语义化？语义化有结构语义化和标签语义化，二者并不是独立的。结构的语义化是指在去掉样式或样式丢失时，能让页面呈现清晰的结构，而这个目的就需要使用语义化的标签来实现。

二、定义

浏览器的默认样式是浏览器设定的一些常用tag的表现形式，而语义化则是为了让标签和属性更加直观。

语义化的网页，其好处主要是对搜索引擎友好，有良好的结构和语义化的网页能够更加容易被搜索引擎抓取。

简言之，语义化是指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读、维护和写出更加优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。

三、语义化的优点

通过使用恰当语义的HTML标签，让页面具有良好的结构与含义，可以有效提高：

1.可访问性：帮助辅助技术更好的阅读和转译网页，便于无障碍阅读，或者供PDA、手机等无法像电脑浏览器渲染网页的设备以支持；

2.可检索性：提高搜索引擎的有效爬取，提高网站流量；

3.互动性：减少网页间的差异性，帮助其他开发者了解网页结构，便于后期开发和维护。

四、H5语义化标签网页布局

图1.网页布局

五、H5语义化标签

<header>：页面或板块头部、文章标题

<nav>：文章导航（配合ul、li）、链接等

<main>：文章主体

<article>：文章或文档

<section>：独立的一部分

<aside>：侧边栏或索引

<footer>：页脚