但是,如果您仍然对
-s和-s 依附,不要惊慌,因为您不必完全抛弃它们。它们仍然是仅出于样式目的以及在其他不得已的情况下对内容进行分组的最佳选择。
HTML5中的文本语义
HTML5引入了许多新的语义元素,使内容的组织变得容易。它们不仅帮助您在整个文档级别上组织内容(请参阅下一节中的详细信息),而且还可以在文本块内将它们作为内联标签。
可能最流行的文本级语义标记是和,但它们也早于HTML5才存在。在新的内联语义元素,我们可以找到例如,用于标记人类可读的日期时间,并为突出显示的文本。
请参阅此列表以获取当前正在使用的所有文本级语义元素。
HTML5中的文档大纲
文档大纲是HTML文档的结构。它显示了元素如何相互关联。仅通过映射元素(例如标题,表标题,表单标题以及早期版本的HTML(例如HTML4.01和XHTML)中的其他元素)生成文档大纲。
在HTML5中,概述算法已通过新的sectioning元素得到增强,即:
对于围绕特定主题分组的部分
用于导航块
HTML5中有第五个sectioning元素,但这不是新的,而是标签。在和标签也是新的,但他们没有在文档中产生新的章节,他们瓜分了里面部分的内容。这意味着每个sectioning元素(body,article,section,nav和aside)都可以具有自己的header和footer。
石家庄建设企业网站语义结构化内容的提示
如果要创建结构合理的文档大纲,则需要注意以下规则:
1.最外面的section元素始终是标签。
2. HTML5中的部分可以嵌套。
3.每个部分都有自己的标题层次结构。他们每个人(甚至是最里面的嵌套部分)都可以有一个h1标签。
4.虽然文档大纲主要由5个分节元素定义,但每个节也需要适当的标题。
5.始终是定义给定节标题的第一个标题元素(让它为h1或较低等级的标题标签)。同一部分中的以下标题标记需要与此相关。(如果第一个标题是sectioning元素内的h4,则不要在其后放置h4。)
6.用
和定义的部分
不属于HTML文档的主要轮廓,通常它们最初并不是由辅助技术来呈现的。
7.每个部分(正文,部分,文章,旁边,导航)可以有自己的和标签,用于定义页眉(例如徽标,作者的姓名,日期,元信息等)和页脚(版权,注释,链接等)。
示例:语义大纲
让我们看一个语义文档大纲的示例,以更清楚地了解其工作方式。我们的示例代码将导致以下文档结构:
文档大纲示例
这是带有适当语义部分的代码:
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
Welcome On Our Website!
Here is our logo and slogan.
Choose Your Interest
Menu 1
Menu 2
Menu 3
Title of Article
Subtitle of Article
First Logical Part (e.g. "Theory")
Paragraph 1 in first section
Some Other Subheading in First Section
Paragraph 2 in first section
Second Logical Part (e.g. "Practice")
Paragraph 1 in second section
Paragraph 2 in second section
Author Bio
Paragraph in Article's Footer
Get To Know Us Better
Popular Posts
Partners
Testimonials
Copyright
Social Media Links
如果您看一下上面的代码片段,您会发现页眉和页脚是可选的,我们可以自由选择是否要使用它们,但是强烈建议始终为每个部分包括一个标题,否则文档大纲中的“无标题”部分。
幸运的是,互联网上有很多很棒的工具可以让我们检查文档的大纲,这一次我们将使用html5.org 的Outliner工具。
如果我们将代码段插入到大纲显示器提供的表单中,然后单击“概述此!”。按钮,我们将看到以下结果:
示例代码大纲
这是我们的示例代码的文档大纲,这是搜索引擎看到它的方式,屏幕阅读器将它们提供给视障用户。它是语义性的,结构良好的,并且其中没有讨厌的“无标题”部分。
如果要查看“大纲视图”中“无标题”部分的外观,只需删除示例代码中的某些标题标签即可。
网络语义学的其他方面
语义HTML标签和文档大纲只是Web语义的一小部分。借助WAI-ARIA可访问性协议以及可与RDFa协议,微数据或JSON-LD标记一起使用的结构化数据,可以使网页的内容变得更加有意义。