成都建设企业网站

2022-07-03    分类： 网站建设

成都建设企业网站正确的HTML5语义探究 如果您仔细计划HTML文档的结构，则可以帮助计算机理解内容的含义。正确的语法肯定很重要，但是它基本上只是为解析器，搜索引擎和辅助技术提供了毫无意义的数据。

如果您通过关注语义来改进前端工作流，则可以创建吸引更多访问者的更高质量的内容。语义学是对意义的研究，从广义上讲，它是逻辑学和语言学的一个分支。

在Web开发领域中，当计算机了解文档的结构及其内部元素的作用时，我们谈论的是语义内容。如果我们要建立正确的语义，我们需要深刻理解结构我们的内容和功能的前端技术。

那么有什么实际的好处呢？正确的语义意味着更可搜索的内容，从而导致更好的搜索引擎排名。我们还增加了可访问性，因为诸如屏幕阅读器之类的辅助技术可以更好地解释我们内容的含义。

有许多不同的前端开发技术，使开发人员可以实现语义页面结构。这篇文章将为您简要介绍语义HTML标签和文档大纲的概念。

如何使用HTML插槽自动生成目录
如何使用HTML插槽自动生成目录
目录可以极大地改善许多网站的用户体验，例如文档站点或在线...
阅读更多

语义和非语义HTML标签
语义的概念并不像它看起来的那么新，它早在HTML5时代就已存在。术语语义网最早是由Tim Berners-Lee爵士在2001年提出的。在“语义网”下，他表示可以由机器处理的数据网。

这首先意味着单独的HTML元素需要具有其可区分的结构角色。根据W3C的定义， “语义元素向浏览器和开发人员都清楚地描述了其含义”。

HTML5之前的语义元素


成都建设企业网站 语义元素也在HTML5之前存在，只是在大多数情况下，开发人员并不知道他们使用的某些标记实际上是语义的。只需考虑或标签即可。

对于我们和用户代理，他们的角色都很清楚：只包含一个表单，就像包含一个图像一样。没有人会在里面放置桌子或标题并标记（或至少希望如此）。

的元素，和其相关的标记，如表中的行，表格单元格等也都是HTML5之前存在的语义标签，但是由于这是大量使用了很多年的基于表的布局，大部分开发商并没有利用他们在语义方式。这导致网络牺牲了布局的逻辑结构。

有序列表和无序列表，段落，h1-h6标题标记都是HTML5之前的所有语义元素。

非语义元素
非语义元素没有任何特殊含义，它们之间的层次关系只是虚幻的。非语义HTML标签最广泛使用的示例是和标签。

如果您的网站曾经感染过可怕的神经病，您就会知道我在说什么。是的 Divs不一定是错误的，但是如果我们想编写可维护的，模块化的和有意义的HTML代码，就必须格外注意。

对抗神itis
Smashing Magazine精美地解释了标签过度和不合理使用的真正问题是什么
。要点是，如果我们在div内包含div，则似乎外部div将是内部div的父元素，而实际上并非如此。

成都建设企业网站两者之间没有关系，就像代码在内联级别上以相同方式工作一样。

但是，如果您仍然对
-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标记一起使用的结构化数据，可以使网页的内容变得更加有意义。

标题名称：成都建设企业网站
分享路径：https://www.cdcxhl.com/news/174140.html

成都网站建设公司_创新互联，为您提供营销型网站建设、移动网站建设、品牌网站建设、Google、搜索引擎优化、网站策划

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站优化排名

网站建设知识

行业建站