开始使用语义HTML
新版本的HTML（HTML5）带有一些新增的功能。这些功能之一就是语义化HTML。
一个学习网页开发的初学者并没有语义元素的基本概念，或者可能不明白为什么他们在构造网页时要使用语义HTML。这足以说明，使用语义化HTML在近代已经成为必要。
本文将介绍为什么要在你的下一个项目中使用语义HTML，不使用语义HTML的弊端，以及其他许多方面。
前提条件
在我们开始之前，最好具备以下条件。
- 对HTML的基本知识和理解。
- 一个现代的网络浏览器。
- 安装了一个IDE，最好是VS Code。
了解语义化的HTML
HTML语义元素是指那些具有基本含义的元素，并向浏览器和开发人员传达这种含义。通过语义元素，人们可以告诉或描述他们在网页上想要什么。
语义元素有助于结构化我们所创建的代码，使其具有可读性并更易于维护。它们还帮助我们思考网页设计中的数据结构。
语义HTML标签的一些例子是。<header>,<nav>,<main>,<article>,<section>,<aside>,<footer> 等。
没有语义的HTML布局
在我们研究具有语义的HTML布局之前，让我们先建立一个不使用语义HTML的简单布局。
注意：CSS可以忽略不计，它只是出于美观的目的。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic HTML</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: brown;
border-bottom: 5px solid black;
padding: 10px;
}
.main {
display: flex;
}
.section {
margin: 30px;
}
.aside {
margin: 7px;
margin-top: 30px;
}
ul {
list-style-type: none;
background-color: goldenrod;
display: flex;
justify-content: space-around;
padding: 10px;
}
h1 {
text-align: center;
background-color: brown;
padding: 10px;
}
h3 {
background-color: brown;
padding: 10px;
}
p {
padding: 20px;
}
input {
width: 98%;
height: 30px;
padding: 2px;
}
.footer {
text-align: center;
margin-top: 20px;
background-color: brown;
padding: 20px;
}
</style>
</head>
<body>
<div class="header">
<h1>Welcome to Saxophone Shop</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
<div class="main">
<div class="section">
<div class="article">
<h3>About Saxophone Shop</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis cumque excepturi quidem natus, eum obcaecati iste culpa vitae ex?
Labore voluptatum beatae perspiciatis iusto distinctio quis et, delectus voluptatem.
Quod ipsum ratione incidunt nostrum, ullam odio adipisci velit repellendus eveniet,
laudantium reprehenderit, fugiat architecto nulla nam rerum soluta molestias eaque ut minima
veritatis vitae blanditiis odit maxime. Perspiciatis sit nobis fuga laboriosam adipisci tenetur
pariatur similique quia quibusdam excepturi, eveniet nihil corporis odit eum quas ad rem incidunt
laudantium. Corrupti quam voluptatum, repellat vero quo eos nemo qui obcaecati quisquam sint
uos quae facilis sed, ea consequatur fugiat enim.
</p>
</div>
<div>
<h3>Why Choose Us</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestias nostrum aspernatur tenetur modi? Suscipit iure consequuntur
impedit minus tempore. Consectetur porro nemo animi minus illo autem
ullam odio inventore vitae ab in, itaque possimus rerum sapiente doloribus
vel reiciendis soluta temporibus dicta. Maiores dignissimos nihil quod ex
eveniet, voluptatem necessitatibus dolorum, ipsum excepturi inventore omnis
suscipit dolorem pariatur? Minima voluptatibus rerum error laboriosam.
Repellendus, quae eligendi. Sed neque hic cupiditate quam quia eius animi
delectus accusantium iusto asperiores alias quibusdam, qui recusandae
necessitatibus maxime cum? Voluptas, consequatur. Nisi est corporis
quasi vero, nam esse magnam. Dolores iusto debitis nostrum magnam.
</p>
</div>
</div>
<div class="aside">
<div>
<h3>Join Our newsletter</h3>
<br>
<input type="text" placeholder="Your email">
</div>
<br>
<hr>
<br>
<div class="article">
<h3>Contact Us</h3>
<p>
</p>
Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Voluptatem minima dolor
rem, perferendis tempore laborum mollitia
voluptatum maxime quos ducimus, iure adipisci
labore magnam atque quis tenetur quae, omnis voluptas?
</p>
</div>
</div>
</div>
<div class="footer">
© <b>2021 Saxophone Shop</b>
</div>
</body>
</html>
这是我们的基本布局结构。
不使用语义学HTML的一个主要问题是，从上述代码中naming convention 。当不是一个开发人员在处理代码，而且代码变得更大时，这个问题就变得最重要了。
从这个例子来看，我们必须想出一种单独的命名风格。没有一套结构可以遵循。为开发者处理这些代码，尤其是新加入团队的开发者，很快就会变得混乱和难以理解。
具有语义的HTML布局
下面的例子是关于展示一个具有语义的HTML的简单布局。
应该注意的是，语义化的HTML是HTML5的一个特征，所以声明doctype html 应该是一个必然的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic HTML</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: brown;
border-bottom: 5px solid black;
padding: 10px;
}
main {
display: flex;
}
section {
margin: 30px;
}
aside {
margin: 7px;
margin-top: 30px;
}
ul {
list-style-type: none;
background-color: goldenrod;
display: flex;
justify-content: space-around;
padding: 10px;
}
h1 {
text-align: center;
background-color: brown;
padding: 10px;
}
h3 {
background-color: brown;
padding: 10px;
}
p {
padding: 20px;
}
input {
width: 98%;
height: 30px;
padding: 2px;
}
footer {
text-align: center;
margin-top: 20px;
background-color: brown;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Saxophone Shop</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
<main>
<section>
<article>
<h3>About Saxophone Shop</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis cumque excepturi quidem natus, eum obcaecati iste culpa vitae ex?
Labore voluptatum beatae perspiciatis iusto distinctio quis et, delectus voluptatem.
Quod ipsum ratione incidunt nostrum, ullam odio adipisci velit repellendus eveniet,
laudantium reprehenderit, fugiat architecto nulla nam rerum soluta molestias eaque ut minima
veritatis vitae blanditiis odit maxime. Perspiciatis sit nobis fuga laboriosam adipisci tenetur
pariatur similique quia quibusdam excepturi, eveniet nihil corporis odit eum quas ad rem incidunt
laudantium. Corrupti quam voluptatum, repellat vero quo eos nemo qui obcaecati quisquam sint
uos quae facilis sed, ea consequatur fugiat enim.
</p>
</article>
<article>
<h3>Why Choose Us</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestias nostrum aspernatur tenetur modi? Suscipit iure consequuntur
impedit minus tempore. Consectetur porro nemo animi minus illo autem
ullam odio inventore vitae ab in, itaque possimus rerum sapiente doloribus
vel reiciendis soluta temporibus dicta. Maiores dignissimos nihil quod ex
eveniet, voluptatem necessitatibus dolorum, ipsum excepturi inventore omnis
suscipit dolorem pariatur? Minima voluptatibus rerum error laboriosam.
Repellendus, quae eligendi. Sed neque hic cupiditate quam quia eius animi
delectus accusantium iusto asperiores alias quibusdam, qui recusandae
necessitatibus maxime cum? Voluptas, consequatur. Nisi est corporis
quasi vero, nam esse magnam. Dolores iusto debitis nostrum magnam.
</p>
</article>
</section>
<aside>
<article>
<h3>Join Our newsletter</h3>
<br>
<input type="text" placeholder="Your email">
</article>
<br>
<hr>
<br>
<article>
<h3>Contact Us</h3>
<p>
</p>
Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Voluptatem minima dolor
rem, perferendis tempore laborum mollitia
voluptatum maxime quos ducimus, iure adipisci
labore magnam atque quis tenetur quae, omnis voluptas?
</p>
</article>
</aside>
</main>
<footer>
© <b>2021 Saxophone Shop</b>
</footer>
</body>
</html>
你应该知道的是
- 语义式HTML就是为您的HTML结构赋予有意义的名称。
- 语义标签的名称不能被编辑。
比如说。
<header> 将始终是<header>
在上面的章节中，我们有。
- 我们使用了多达五个语义标签来推动使用语义的重要性。
header标签是用于项目或网站的名称。nav标签将引导新的开发者知道，nav代表导航（所有有价值的链接都在这里）。- 我们有中间的区域，这在HTML5中被称为
main标签。 - 我们有
footer标签，展示了网页的收尾部分。 section区域展示了我们网页的不同部分。aside区域展示了我们网页中不太相关的区域。它也可以作为侧边栏。
最后，这些都是基本的语义HTML5标签，使我们的HTML更具可读性，更容易理解。然而，它并不影响网页的浏览。
结论
总结一下，我们已经了解了HTML中的语义元素。我鼓励你在你的下一个项目中使用你所学到的概念。
