在以前,网页内容的结构都是用 <div>
标签还有标题标签(h1-h6)来定义,我们尽量使用合理的标签配合一些有合理的 id 或者 class 来标记网页的不同部分的内容,让网页的结构更有意义一些。
现在,你可以使用 HTML5 的新标签来标记网页的内容,比如 <article>
<section>
<nav>
<header>
<footer>
…
为什么要使用语义结构
使用这些新的标签来标记内容,对于普通的用户来说,外观上跟使用 <div>
标签是没什么区别的,然于对于搜索引擎,或使用屏幕阅读器的用户来说就不一样了,因为他们只能通过网页的标签来判断网页的内容和结构,使用语义结构可以让他们更容易读懂并理解你的网页。
理解什么是语义结构
每一张网页都有一个纲要,有点像是网页的目录,这个纲要就是网页的结构。比如一张越野车评测的网页可能像下面这样: