HTML（Hypertext Markup Language）是用于创建网页结构的标记语言。它由一系列的元素（elements）组成，这些元素被用来定义和描述网页的不同部分。
HTML结构主要部分组成
-
< !DOCTYPE > 声明：该声明放在HTML文档的开头，用于指定文档类型。
-
骨架结构：
- < html>元素：该元素是HTML文档的根元素，包含了整个HTML文档的内容。
- < head>元素：该元素用于定义文档的头部区域，包含了与文档相关的元数据，如标题、关键字等。
- < body>元素：该元素用于定义文档的主体区域，包含了网页的实际内容，如文本、图像、链接等。
-
内容：
-
标题元素：< h1>到< h6>：这些元素用于定义不同级别的标题，其中< h1>表示最高级别的标题，< h6>表示最低级别的标题。
-
段落元素：< p>：该元素用于定义一个段落。
-
链接元素：< a>：该元素用于创建一个链接，可以链接到其他文档、页面或特定位置。
-
图像元素：< img>：该元素用于插入图像，通过指定图像的URL地址。
-
列表元素：< ul>、< ol>和< li >：这些元素用于创建无序列表和有序列表，< li>表示列表项。
-
等...
-
HTML语义化标签
在HTML中，标签可以分为语义化标签和非语义化标签。
语义化标签（Semantic Tags）
具有明确含义和语义的HTML标签。这些标签用于描述标记内容的含义和结构，使得文档的结构更加清晰和易于理解。一些常见的语义化标签包括：
-
< header>：用于定义文档或区域的头部（顶部）。
-
< nav>：用于定义导航链接的区域。
-
< main>：用于定义文档的主要内容部分。
-
< article>：用于定义独立的文章或内容块。
-
< section>：用于定义文档中的节（section）或区段。
-
< aside>：用于定义与主要文档内容相关但可以独立存在的侧边栏或附属信息。
-
< footer>：用于定义文档或区域的尾部（底部）。
这些语义化标签能够更好地描述页面结构和内容，使得搜索引擎、屏幕阅读器等工具能够更好地理解和解析网页，提升用户体验和可访问性。
非语义化标签（Non-Semantic Tags）
没有明确语义的标签，它们通常被用于样式和布局的目的，而不是用来描述内容的含义。例如，< div>和< span>标签就是非语义化标签，它们在没有其他语义化标签的情况下被广泛用于创建容器、划分区块、应用样式等。
HTML语义化分析案例
Apple官网
-
主要框架
其网站的主要html框架也是由< !DOCTYPE >声明、< html>、< head>和< body>元素构成
-
语义化
如图所示，< div>标签是非语义化标签，用于创建容器、划分区块。
在< div>标签划分的区块中，< nav>标签则对应导航链接的区域。
图中标记的是< span>标签，是非语义化标签，在此与style搭配用来定义标签中内容的样式。
图中< footer>标签定义了网站的尾部，提供一些更加详细的信息导航。
而< main>标签当中记录了网站当中的主要内容，用< section>对网站的内容进行分块描述。
此处的< span>标签作用和< p>标签相同，用来进行文字的记录。
< a> 是语义化标签，用于创建超链接（链接）。它可以用于在当前网页或其他网页之间建立链接关系，让用户可以点击链接跳转到目标页面。
总结
综上所述，语义化标签和非语义化标签主要在在以下方面存在一些差异：
- 含义和语义
语义化标签具有明确的含义和语义，能够更准确地描述内容的结构和含义。
非语义化标签则没有明确的含义和语义，它们通常被用于样式和布局的目的。这些标签仅起到容器的作用，对内容本身没有特定的描述或含义。
- 可读性和可维护性
语义化标签能够提高代码的可读性和可维护性。通过使用语义化标签，开发者可以更容易地理解网页的结构和内容，并且代码结构更加清晰。
非语义化标签在结构上没有明确的定义，通常在标签内部搭配其他标准来明确代码的用途和目的。过度使用非语义化标签可能导致 HTML 结构混乱、难以维护。
- 可访问性和 SEO
语义化标签有助于提高网页的可访问性和搜索引擎优化（SEO）。语义化的结构可以提供更好的可访问性，使得屏幕阅读器等辅助技术能够更准确地解析和呈现网页内容。
非语义化标签对于辅助技术和搜索引擎来说难以解析，可能会影响网页的可访问性。
