入门的第一个HTML元素

指南第1部分：HTML结构元素

在过去的几天中，我一直在阅读有关HTML5中创建的元素的一些有趣且不同的观点。有许多文章支持并解释了清晰语义结构的好处。但是，我也从黑暗的一面发现了一些意见。有关问题的文本，规格文档中缺乏清晰性的文本以及对开发人员造成的混乱。一些极端的观点甚至说我们不应该使用它们。好吧，也许当生活向您展示一个想法的两个方面时，最常见的就是跌倒其中之一。一种与您的思维方式有更多相似之处，或者一种您认为可以更好地合理化他们的论点。但是，如果您是新手，就像我在谈论HTML实践时一样，最好确保您了解这两种观点。

HTML5的新元素存在一些问题，使用时缺少一些明确性：何时使用，如何使用，为什么使用。该文档不会使整个世界变得光鲜和整洁。但是我会走得最远，并说您根本不需要使用它们。我怎么说，我不是专家。我真的离那很远。如果您允许我给您一个建议，那就是：开始了解它们。明确确保您对使用或不使用可用工具都做出正确决定的唯一方法是尝试使用它。

阅读制作原因，将其付诸实践，以一种方式尝试，以另一种方式再次尝试。看看实际使用情况对您的答复。它是否改善了您在搜索引擎上的网页行为？它是否改善了可访问性，从而为屏幕阅读器提供了更多见解？您的团队是否可以使用清晰的语义更快地进行产品开发？如果您没有跟踪所有这些以及其他答案，则表明页面中的数据正在返还给您，则不可能在该主题中占据一席之地。对于像我这样的初学者，请尽可能地阅读和练习。了解文档是开始忽略它的第一步。如果您选择这样做。

足够多的讨论，让我们了解可用于构建HTML页面的结构元素。规格说明了这些内容以及我在途中发现的一些其他选项。

< html >

<html>之所以称为根元素 ，是因为它是所有其他元素的外部容器。如果<!DOCTYPE>除外。它不是在HTML5版本中创建的元素。它可能与lang一起使用属性指定文档的主要语言。

<html lang="en">

< 头 >

<head>元素提供有关文档[metadata]的信息，并且对于每个HTML文件都是唯一的。它是<html>标记中的第一个元素。通常在<head>我们可以找到缩进的一个或多个元数据内容，唯一需要的是<title>元素，该元素只能使用一次。

父母： <html>
内容： <title> [必需]， <link> ， <meta> ， <style> ， <script> ， <noscript> ， <base> ， <object> ， <template>
版本： HTML 2 / 3.2 / 4 / 4.01 / 5

< 身体 >

<body>代表文档的内容，所有内容将显示在屏幕上。作为<head>标记，应仅使用一次。它是<html>标记内的第二个缩进元素。

父母： <html>
内容：块，内联和文本元素
版本： HTML 2 / 3.2 / 4 / 4.01 / 5

< 标题 >

<header>标记可用于文档的标题（缩进为<body>的第一个元素）或HTML文档的任何其他部分。这是事情变得有些混乱的时候。 <header>定义是要介绍其元素最接近祖先的内容。但是当在<body>内部使用它时，它表示整个文档的介绍性内容。

警报！ 在文档的许多部分中使用<header>时请务必小心。还有其他标记，例如<h2>和<h3>可以标头显示节，而不必在其中缩进标记。因此，请考虑您需要什么，以及什么将使您的代码清晰可见，以供他人阅读语义。

放置：块
内容：块，内联和文本元素
*除了 <footer> 及其本身。
版本： HTML5中的新功能

`< footer >`

<footer>具有与<header>相同的通用性。它可以用作整个文档的页脚，并提供有关文档作者，版权数据或相关文档链接的信息。但是它可以在任何section标记内使用，表示其最接近的祖先的页脚信息。

警报！ 对<header>隐含的相同注意对于<footer>有效。不要过度使用它，请查看HTML文档中的语义以使其变得简单明了。不仅对于要使用同一文档的其他文档，还问自己： “如果我在未来几年遇到它，我能理解它吗？”

放置：块
内容：块，内联和文本元素
*除了 <header> 及其本身。
版本： HTML5中的新功能

< 部分 >

<section>是文档或应用程序的通用部分。您应该记住， <section>标记的作用是对某些特定内容进行分组。 <header>和<footer> ，但语义理解较少。因此，如果您需要汇总一些内容，但是找不到用于表示它的特定语义元素，则<section>可能是一个很好的选择。

放置：块
内容：块，内联和文本元素
版本： HTML5中的新功能

< 文章 >

<article>代表内容的一部分，其本身就是HTML文档的独立部分。它可以是帖子，文章或其他独立单元，代表可以链接到或包含在其他内容主体中的某些信息。

放置：块
内容：块，内联和文本元素
版本： HTML5中的新功能

< 一边 >

<aside>元素用于表示与页面内容不完全相关的内容，它是页面内容的一部分。它经常用于侧边栏，标注框和广告块。主要思想是弄清楚标签内的内容与页面内容是分开的。

放置：块
内容：块，内联和文本元素
版本： HTML5中的新功能

< 导航 >

<nav>表示导航链接的一部分，该链接可能位于当前文档或其他文档中。在宣布与主要内容或相关内容有关的导航链接时，元素的语义很有用。

警报！ 即使没有规则说不能使用多个<nav>标签，也不一定总是每次在某个部分中包含导航链接时都使用该元素。

放置：块
内容：块，内联和文本元素
版本： HTML5中的新功能

< div >

<div>是“ divide”的缩写。元素代表通用容器。当您需要定义文档的结构部分时，例如，使用CSS将不同的布局应用于此部分时，可以使用该功能。因为标签除了容器本身之外在语义上不代表任何内容。当没有其他更好的语义元素来表示内容块时，应使用它。

放置：块
内容：块，内联和文本元素
版本： HTML 2 / 3.2 / 4 / 4.01 / 5

< 主要 >

<main>代表主要内容，并且只能在文档中使用一次。跨文档集复制的所有内容（如侧栏，导航链接，版权信息，站点徽标和搜索表单）均不应包含在<main>标记中。

父级： <html> ， <body>和<div>
内容：块，内联和文本元素
版本： HTML5中的新功能

< h1>至<h6 >

标题标签有六个级别，从<h1> [最重要]到<h6> [最不重要]。应该使用它们对标题元素进行排名，以创建文档轮廓，而不是用于设计文档样式。妮可·沙利文（ Nicole Sullivan）在使用标题标签时提供了一个很好的建议，请考虑一下，就像在为高中编写文本时一样：

THE TITLE IS THE H1
I. Big roman numerals are the H2s
   A. This is an h3
   B. This is also and h3
      i. Now we have an h4
      ii. And another h4
II. Big roman numerals are the H2s
III. Big roman numerals are the H2s
IV. Big roman numerals are the H2s

警报！ 这些是谈论可访问性时最常用的导航元素，您可以查看2017年10月以来的WebAIM报告 。因此，请勿在文档中填充许多<h1>或使用较低的级别来减小标题字体大小[CSS属性font-size可以更好地完成此工作]。

放置：块
内容：内联和文本元素
版本： HTML 2 / 3.2 / 4 / 4.01 / 5