本章是最常见的的 HTML 标签介绍。
标题和段落
大部分的文本结构由标题和段落组成。不管是小说、报刊、教科书还是杂志等。
内容结构化会使读者的阅读体验更轻松，更愉快。
在 HTML 中，每个段落是通过 <p> 元素标签进行定义的, 比如下面这样:
每个标题(Heading)是通过“标题标签”进行定义的:
这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题(the main heading)，<h2> 表示二级子标题(subheadings)，<h3> 表示三级子标题(sub-subheadings)，等等。
最佳实践
您应该最好只对每个页面使用一次
<h1>— 这是顶级标题，所有其他标题位于层次结构中的下方。请确保在层次结构中以正确的顺序使用标题。不要使用
<h3>来表示副标题，后面跟<h2>来表示副副标题 - 这是没有意义的，会导致奇怪的结果。在可用的六个标题级别中，您应该旨在每页使用不超过三个，除非您认为有必要使用更多。具有许多级别的文档(即，较深的标题层次结构)是难以操作和导航的。在这种情况下，如果可能，建议将内容分散在多个页面上。
为什么需要结构化
因为如果元素没有给出内容结构，浏览器将不知道什么是标题，什么是段落。此外:
- 用户在阅读网页时，往往会快速浏览以查找相关内容，通常只是阅读开头的标题 (我们通常在一个网页上会花费很少的时间)。如果用户不能在几秒内看到一些有用的内容，他们很可能会感到沮丧并离开。
- 对您的网页建立索引的搜索引擎会将标题内容视为影响网页搜索排名的重要关键字。标题的缺失意味着您的网页在 SEO (搜索引擎优化) 方面效果不佳。
- 严重视力障碍者通常不会阅读网页；他们用听力来代替。完成这项工作的软件叫做屏幕阅读器(screen reader)。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中，它们通过朗读标题来提供文档的概述，让用户能快速找到他们需要的信息。如果标题不可用，用户将被迫听到整个文档的大声朗读。
- 使用 CSS 样式化内容，或者使用 JavaScript 做一些有趣的事情，您需要包含相关内容的元素，所以 CSS / JavaScript 可以有效地定位它。
为什么需要语义
我们在许多地方需要依赖语义学。我们依靠以前的经验就知道日常事物都代表什么；当我们看到什么，我们就会知道它代表什么。举个例子, 我们都知道红色交通灯表示“停止”，绿色交通灯表示”通行“。
同样的道理，我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。在这里，<h1> 元素也是一个语义元素，它给出了包裹在您的页面上用来表示顶级标题的角色(或意义)的文本。
<h1>这是一个顶级标题</h1>一般来说，浏览器会给它一个更大的字形来让它看上去像个标题。虽然您可以使用 CSS 让它变成任何您想要的样式。更重要的是，它的语义值将以多种方式被使用，如被搜索引擎和屏幕阅读器利用 (正如上文提到过的)。
在另一方面，您可以让任一元素看起来像一个顶级标题，如下:
这是一个 <span> 元素，它没有语义。当您想要对它用 CSS (或者 JavaScript )时，您可以用它包裹内容，且不需要附加任何额外的意义。我们已经对它使用了 CSS 来让它看起来像一个顶级标题。然而，由于它没有语义值，所以它不会有任何上文提到的帮助。最好的方法是使用相关的 HTML 元素来标记这个项目。
列表
列表在生活中随处可见，共有三种不同类型的列表。
无序 Unordered
无序的列表中项目的顺序并不重要。
豆浆
油条
豆汁
焦圈每份无序的清单从 <ul> 元素开始，它包裹所有列表项目，下一步就是用 <li> 元素把每个列出的项目分别包裹起来:
有序 Ordered
有序的列表将根据项目的顺序列出每一个项目:
沿着条路走到头
右转
直行穿过第一个十字路口
在第三个十字路口处左转
继续走 300 米，学校就在您的右手边这个标记的结构和无序列表一样，唯一不同的是您需要用 <ol> 元素将所有项目包裹, 而不是用 <ul>:
描述列表
详情请见
嵌套列表 Nesting lists
请务必注意正确嵌套列表，不要忘记父元素 <ul>。
重点强调
在人类语言中，为了突出一句话的意思，我们通常强调某些词，并且我们通常想要标记某些词作为重点或者在某种程度上的不同。HTML 提供了许多语义化的元素，并且允许我们通过这些元素的意义标记正文内容，在这个章节中，我们将看到最常见的一小部分元素。
强调
当我们想要在口语中添加强调，我们会通过重读某些词来表达我们想要说的意思。类似的，在写作中，我们通过将文字写成斜体来强调它。比如，接下来的两个句子就有不同的含义:
I am glad you weren’t late.
I am glad you weren’t late.
第一句话听起来真的像松了一口气因为没有迟到。相反，第二句话听起来具有讽刺性而且有隐含的攻击性，表达对一个人迟到的恼怒。
在 HTML 中我们用 <em>(emphasis)元素来标记这样的情况。这样做既可以让文档读起来更有趣，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为斜体，但您不应该通过使用这个标签来获得斜体风格，而应该使用 <span> 元素配合一些 CSS 来实现，或者直接使用 <i> 元素(见下文)。
<p>I am <em>glad</em> you weren't <em>late</em>.</p>非常重要
为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。
在 HTML 中我们用 <strong> (strong importance) 元素来标记这样的请况。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为粗体，但您不应该通过使用这个标签来获得粗体风格，而应该使用 <span> 元素和一些 CSS 来实现，或者直接使用 <b> 元素 (见下文)。
如有需要您可以将 strong 元素和 em 元素嵌套在其他的标签中:
斜体字、粗体字、下划线
迄今为止我们已经讨论的元素都是意义清楚的语义元素。<b>, <i>, 和 <u> 的情况却有点复杂。它们出现于人们要在文本中使用粗体、斜体、下划线但 CSS 仍然不被完全支持的时期。像这样仅影响表象而没有语义的元素，被称为表象元素(presentational elements)。它们不应该再被使用。因为正如我们在之前看到的，语义对可访问性，SEO(搜索引擎优化)等非常重要。
HTML5 用新的语义规则重新定义了 <b>,<i> 和 <u>,稍微有点混乱。
这里是最好的经验法则: 使用 <b>,<i>,<u> 来传达传统意义上的粗体，斜体或下划线是合适的，没有其他元素更适合这样用了。然而，始终拥有可访问性的思维模式是至关重要的。斜体的概念对人们使用屏幕阅读器是没有帮助的，对使用其他书写系统而不是拉丁文书写系统的人们也是没有帮助的。
<i>被用来传达传统上用斜体表达的意义: 外国文字，分类名称，技术术语，一种思想……<b>被用来传达传统上用粗体表达的意义: 关键字，产品名称，引导句……<u>被用来传达传统上用下划线表达的意义: 专有名词，拼写错误……