语义化 HTML - 前端开发系列第 1 部分。
编写语义化 HTML
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
我将以这篇文章作为前端开发系列文章的开篇。
这篇文章最初发布在我的博客 @ Dillion Megida - Hashnode blog上。
在继续之前，我建议您先浏览一下前端开发路线图——路线图——前端
路线图上的第一项是 HTML，其标签包括：
- 学习基础知识
- 编写语义化 HTML
- 基础SEO
- 无障碍
在讲解语义化 HTML 之前，我会先简要介绍一下 HTML 的基础知识。
HTML是 的缩写。Hypertext Markup Language
它是创建网页的标准标记语言。
它主要用于描述你的网页。
它由控制内容如何呈现给浏览器的标签组成。标签本身不会显示在浏览器中，而是格式化后的内容会显示。
标记是指 HTML 标签对其内部内容所做的操作，例如，用下划线标记的文本内容。
HTML 文件是一种包含短代码并以 .html 扩展.html名保存的文件。这样，浏览器就可以查看该文件。浏览器会进一步渲染该文件，并按照所使用的标签格式显示其内容。
- 注意：浏览器不会显示所使用的标签，而是显示内容。
HTML 主要是网页的结构和内容生成器。
一个基本的HTML文件可能包含：
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML file</title>
</head>
<body>
<h1>Our program</h1>
</body>
</html>
<!DOCTYPE>定义文档类型。额外的 `<type>` 标签html将文档定义为 HTML5。这将有助于浏览器正确渲染文档。`<root>`<html>是我们页面的根元素。` <head><meta>` 元素包含与我们页面相关的元信息。这些信息在网页元素中不可见。`<title>`<title>元素指定我们网页的标题。您可以在浏览器标签页的标签中找到它们。`<title>`<body>元素包含将在我们的页面中可见的内容。`<h1>` 元素<h1>定义一个大标题文本——“我们的程序”。
HTML标签
它们是插入在 `<div>`less than - <和 `<span>`之间的元素名称greater than - >。
它们通常成对出现。在我们的程序中，我们注意到 `<div>`标签<h1>Our program</h1>。这里的 `<div>`
标签<h1>也是成对出现的，因为它也有 `<span>` 标签</h1>。它们分别被称为 `<div>`opening tag和 `<span> closing tag`。
结束标签前面有一个斜杠，表示“结束”。
有些标签不是成对出现的，例如<img>用于插入图片的标签就不需要结束标签。
本文包含大量关于 HTML 的信息，无法全部在此处呈现。
如果您对 HTML 一无所知，请先阅读相关内容再继续阅读本文。
如果你仔细阅读这篇文章，你应该能了解到一些关于……的信息Semantic HTML。
编写语义化 HTML
语义化 HTML 是一种赋予网页意义而不仅仅是展示内容的 HTML 代码。
我的意思是？
页面不仅旨在呈现视觉效果（虽然视觉效果也可能很吸引人），而且还赋予了页面描述性的含义。
通过向文档添加语义标签，您可以提供有关该文档的附加信息，从而有助于沟通。语义标签能够让浏览器清楚地了解页面及其内容的含义。
这种清晰度也会传递给搜索引擎，从而提升搜索引擎优化 (SEO) 效果。
语义元素
这些都是有意义的元素。
例如<code>，，，等等<em>。<blockquote>
HTML5提供新的语义元素，为页面增添意义。这些元素
包括：<article>，，，，，，，，，，，，<aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
我不会详细解释每一个细节，但我们会看一下其中几个。
在引入这些新的语义标签之前，大多数开发者会这样做；
...
<div class='navbar'>
...
</div>
<div class='content'>
...
<div class='article-section'>
....
</div>
...
</div>
...
只要样式搭配得当，就能达到你想要的效果。但是，这样一来，页面本身就缺乏意义。
有了这些新的语义元素，我们上面的代码可以转换成：
...
<nav>
...
</nav>
<main>
....
<section>
....
</section>
...
</main>
...
div 标签只是一个容器，用于将页面划分成不同的部分。仅此而已。
但是，通过上面使用的<nav><div> 和 <section><main>标签，我们已经可以预测这些部分将包含哪些内容。
注：您可以选择添加课程，但至少现在这些部分有了意义。
正如我上面提到的，这些标签也有助于加快搜索引擎优化 (SEO)，因为页面描述得很清楚。
本节内容到此结束。您可以在这里阅读更多内容。敬请期待第二部分。
谢谢 ： ）
文章来源：https://dev.to/dillionmegida/semantic-html-part-1-of-frontend-development-series-nlb