语义化 HTML
两个页面看起来可能完全相同，但底层构建方式完全不同。一个使用以其内容命名的元素：头部、导航栏、主要区域。另一个将所有内容都包装在相同的匿名盒子中，并依靠类名来区分它们。在屏幕上看不出区别。在所有其他方面，它们根本不是同一个页面。按元素的含义来选择元素就是语义化 HTML 的全部内容。
语义化的含义
语义化 是指"与含义相关"。语义化元素是其名称说明了其内容含义的元素。段落放在 <p> 中是因为它是一个段落。导航菜单放在 <nav> 中是因为它是导航。标签名称说明了事物的本质。
你几乎可以用一个万用盒子构建任何页面，并通过样式使其看起来正确。但那样的话页面上就没有任何东西说明它是什么。选择命名内容的元素就像搬家时给箱子贴标签一样。一切仍然可以装在普通的无标签箱子里，但标签是让任何其他人或浏览器能够理解里面的东西而无需打开每一个的方式。
<p> 中，菜单在 <nav> 中。你可以把所有内容放在普通盒子中并样式化使其看起来相同，但那样就没有东西说明它是什么。可以把它看作为你的搬家箱子贴标签，这样任何人都能知道里面是什么。 标志元素
少量元素用于标记页面的大区域。这些是你首先要使用的：
<header>是页面或章节的顶部：徽标、标题、介绍。<nav>是一组导航链接，例如主菜单。<main>是主要内容，页面存在的原因。<section>是相关内容的分组块，通常有自己的标题。<article>是独立的内容片段，即使单独显示也仍有意义，例如博客文章或新闻故事。<aside>是侧面内容：相关链接、注释、广告。<footer>是页面或章节的底部：版权、联系方式、小字号文本。
规则始终是一样的。如果一个区域是导航，它就在 <nav> 中，而不是 <div> 中。如果是页脚，它就在 <footer> 中。你用与该区域相匹配的元素为该区域命名。
<header>
<h1>王的厨房</h1>
<nav>
<a href="/recipes">食谱</a>
<a href="/about">关于</a>
</nav>
</header>
<main>
<h2>平日晚餐</h2>
<p>下班后可以做的快手菜。</p>
</main>
<footer>
<p>在北京制作。</p>
</footer><header>、<nav>、<main>、<section>、<article>、<aside> 和 <footer>。每一个都命名了页面的一部分，你选择与你正在构建的区域相匹配的那一个。你今天不需要记住它们，它们会反复出现直到你掌握。 div 和 span，非语义化的备选方案
页面的并非每一部分都有值得命名的含义。有时候你只需要一个盒子来分组，这样你就可以对其进行样式化，或者包装几个单词来给它们着色。为此有两个纯粹的元素，它们本身没有含义。
<div> 是一个泛型块：一个空容器，当没有其他元素适合时使用。<span> 对于一行内的小文本块是相同的想法。它们都没有说明其内容的任何东西。它们纯粹作为样式和分组的钩子而存在。
<p>今日总额为 <span class="price">¥299.00</span>。</p>
<div class="card">
<h2>特别优惠</h2>
<p>所有面食买一送一。</p>
</div><span> 包装价格，这样你可以给它着色。<div> 分组卡片，这样你可以在它周围放一个边框。仅当没有更有意义的东西适合时才使用这些，因为它们对浏览器没有说明其内容的任何东西。
<div> 是一个纯粹的盒子，<span> 是几个单词的纯粹包装器，都没有任何含义。当你只需要分组或样式化某样东西而没有命名元素适合时使用它们。如果事物确实有含义，如菜单或按钮，就改用该元素。 选择正确的元素
当你不确定使用哪个元素时，提出一个简单的问题：这是什么东西？不是它看起来像什么，而是它是什么。答案通常为你命名元素。一排穿过顶部的链接是导航，所以它是 <nav>。底部的一块小字号文本是页脚，所以它是 <footer>。你想给着色的价格并不真的是任何东西，所以它是 <span>。
从含义开始，只有当真实的答案是"它只是一个盒子"时才回到 <div> 或 <span>。尽早养成这个习惯意味着你的页面会自我描述，当你或其他任何人不得不再次阅读标记时，这就会有回报。
<nav>，小字号文本是 <footer>，你想样式化的纯粹盒子是 <div>。每次从含义开始，你的页面最后会自我描述。