📝 HTML 语义化的案例分析
💡在本篇文章中，我们将讨论为什么以及何时使用语义 HTML 元素，所以我会为您提供几个范例。
但首先，
- 为什么我们要使用语义标签而不是 div？
- HTML 能更容易阅读和被扫描 (前提是它被语义标签正确构建)
- 它对 SEO 更好 (这部分我稍后也会向您展示)
- 無障礙網頁 (HTML accessibility)
它使 Google 等搜索引擎更容易访问您的网站，并正确索引所有内容。更有可能使您的网站在搜索引擎结果中排名更高，这样您就可以获得更多流量。
同时，这对屏幕阅读器或辅助技术也更好，它可以正确地知道当下发生的事件并进行分类和索引，对您的网站的可访问性也更好。
这就是我们需要使用语义化标签的三个主要原因。
✒️ 常用语义标签的演示
先看到这串代码，这是一个非常典型的 HTML <body> 样板示例，通常包含了 <header>、<main> 和 <footer>。
html
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>这些已经是语义标签了，因为您也可以使用 <div> 替换掉它们。
html
<body>
<div>
</div>
<div>
</div>
<div>
</div>
</body>基本上，这两种的效果在使用者眼里是一样的，但我还是推荐您修改掉坏习惯，好好学习关于语义标签的使用。
重新说回来，<header> 内通常用于介绍性内容，如：Logo 、导览链接等方便使用者快速了解页面的浏览功能；<main> 即界面呈现的内容主体，而一个页面也仅能有一个；<footer> 是页面的底部区域，通常包含作者、著作权信息、使用条款、联络方式等链接，这些内容对一般使用者来说甚至可以无视，但可以保障您身为创作者的权益。
🖥️ header 的部分
所以在您的 <header> 中，通常会在左侧有个 Logo 图片 <img>；而在右侧有个导航栏 <nav> ，里头会有个列表 <ul> 包着几个条目 <li> 又包着链接 <a>。
html
<header>
<img sec="" alt="" />
<nav>
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</nav>
</header>🖥️ main 的部分
然后，在您的 <main> 中，通常会又分为很多小块，以往大家是用 <div>，但现在推荐您改用 <section>，这部分稍后在分析实际案例时会再提及并解释。
而里头可能会有一个标题 <h1> 或 <h2> 去方便用户识别每个区块，当然你还会在里面穿插一些文字叙述 <p>。您有时候可能还会看到其他如侧边栏 <aside> 之类的，作为辅助性质的页面导览或广告资讯，或是页面向下滑还有一篇文章之类的 <article>，这部分就由您在进行设计时自行决定布局，我这边仅用代码呈现一个范例。
html
<main>
<section>
<h2>Benefits</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section>
<h2>How it works?</h2>
<p>Sed pharetra facilisis eleifend.</p>
</section>
</main>🖥️ footer 的部分
<footer> 的部分结构通常和 <header> 很像，您可以上下比对看看，基本上里头也是包着个列表 <ul> 又包着几个条目 <li> 又包着链接 <a>。
但要注意一下，我们基本上不会在 <footer> 放 <nav>，那样看起来挺反人类的。除非像是有种设计是取消的 <header> 只保留了 <footer>，但它实际上是把导览列的功能移下来，而剔除了原有页尾关于作者资讯的那些功能。或是把那部分做成了导览列的一个功能块，点击后会额外跳转到一个单独的页面或弹窗呈现信息。这部分一样就看设计师的点子了。
html
<footer>
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</footer>✒️ 实际网站分析 - stripe
在这我将向您展示一些更罕见的标签的示例，例如 <aside> 和 <article>。
这个网站是 stripe，但说实话，我可以选择任何 Landing Page，因为它们布局概念都非常相似。
我们可以按下键盘上的 F12，可以看到他们如何编写 HTML。
而在顶部我们确实看到了一个标题，这里有一个 Logo、很多导航链接和一个登陆按钮。
它们在这里有很多 div，因为有时你可能还是需要使用 div 为了去调整页面风格之类的。我们稍后看看是否可以找到个好一点的例子。
下面这里我们有一个 <section>，这就是这个网页的 Hero Section。
实际上，当你访问网站时最先看到的这个 <section>，就是所谓的 Hero Section 。网页上所有模块都是彼此关联的，它们彼此都与这个标题息息相关，这也是开门见山介绍他们公司或产品的一种方式。
您所看到的这个文本和这个图形，这一切都是具有相同的语义目的，这也就是为什么它应该是一个 <section> 而不仅仅是一个 div。所以倘若它们彼此间不相关，并且您只是需要某种元素用于布局目的，或出于风格目的，您才会选择使用 div。
然后我们往下看，他们再次使用了一个 <section>。这实际上只是一堆图像，代表使用的公司类型。这就像他们的凭证，并且因为这里的每个图像都属于相同的语义目的，所以它们都应该位于 <section> 中而非 div。
<section> 意味着其中的内容彼此相关，因此它具有相同的语义目的。
那有人可能会想问，为什么不在这里使用 <article>？
<article> 意味着我应该能够将其从这里取出些什么，将其放置在其他地方。但我现在并不会想要把这些图像从这里拿出来，或把它放到不同网站的其他地方。它现在只是个图像集合，不具备其它意义。这两者含义不同，因此在这不应当使用 <article> 而是用 <section>。
我们继续下去，看看下个 <section>，它与他们的产品概述有关。
再往下看，这是一个 <section>，下去又是另一个 <section>。
这网页就是一个关于正确使用 <section> 与 <div> 的典型示例，您可以很容易的在这些 Landing Page 上识别它们。
✒️ 实际网站分析 - developer.mozilla.org
现在让我们看下一个 mdn 网站 - developer.mozilla.org。
如果您访问他们的随便一篇文章，您可以看到这有个内容，在顶部有一些标题，然后还有这种侧边栏。
让我们看看他们是如何编写 HTML 的。
在这里我们可以看到这是 <main>。所以你的页面上只会有一个主标签，因为它是页面上最主要的内容。
而且他们在这个侧边栏上使用了 <aside>，所以您会了解到 <aside> 基本上不应该出现在 <main> 中，因为它并不是真正的主导内容的一部分。
然后，在 <main> 中我们看到一个 <article>。在这里他们选择了 <article> 而不是 <section>，证明了 <article> 实际上更像是还具有额外的要求。
<section> 只是意味着其中的所有内容都彼此相关，或者它具有相同的语义目的。但我现在需要能够把它从这里拿出来放在其他地方，且它仍然具有意义，这里的情况就是这样。
您可以在这里取出所有文本，可以把它放到其它地方，但它仍然保有相同的本质。
举另一个例子，如果他们在这里发布了某种职位征聘，他们可以将职位发布从这个网站上删除，可以把它放在其它地方，例如放在一个职位网站上，它仍然有意义。放在任何其他地方网站，文章标签是独立的，文章可以被诠释，您可以阅读它，您可以使用它，能清楚理解它的目的性是什么，它又代表什么。
但您未来在大多数项目中可能不会经常使用它，您还是会使用 <section> 和一堆 <div>。
而后，他们在这里也有一个导航栏。
这挺有趣的，他们在这使用了 <aside>，还再次使用了 <nav>。这是正确的，也就是说您不仅会在 <header> 中看到导航栏，有时还会在标题之外看到导航栏。
✒️ 结语
大概就讲到这。
怎么说呢，有时候这篇文章打一打就会感觉词穷。因为有些资料是从国外网站整理的，边学边写，当我要用中文表达出来时就可能会卡住，不知道要怎么翻译，这就挺尴尬的。
大家应该还看得懂吧，感觉哪些怪怪的可以在下方评论，我看到后会尽快修正，也感谢各位读者的指教。