一、HTML语义化标签

HTML语义化标签是指在编写HTML代码时，使用具有语义含义的标签来描述网页的结构和内容。这些标签能够清晰地表达出网页的结构，使得网页的内容更易于理解和解析。一些常见的HTML语义化标签包括：

<header>：表示网页或者区块的头部，通常包含网页的标题、导航栏等内容。
<nav>：表示导航栏，用于包含网页的导航链接。
<main>：表示网页的主要内容，每个网页应该只有一个<main>标签。
<article>：表示独立的文章内容，比如博客文章、新闻报道等。
<section>：表示网页中的一个区块，可以用于组织相关的内容。
<aside>：表示网页的侧边栏，通常包含与主要内容相关的附加信息。
<footer>：表示网页或者区块的底部，通常包含版权信息、联系方式等内容。

使用这些语义化标签可以提高网页的可访问性、可维护性和搜索引擎优化。此外，语义化标签还能够使得网页在不同设备上的展示更加一致，并且有助于屏幕阅读器等辅助技术的正确解析和使用。

二、HTML非语义化标签

HTML非语义化标签是指在编写HTML代码时，使用的标签没有明确的语义含义，或者使用的标签与其实际内容不符合的情况。这些标签通常是为了实现特定的样式或布局效果而使用的，而不是为了描述网页的结构和内容。

一些常见的HTML非语义化标签包括：

<div>：是最常见的非语义化标签之一，用于将文档分割成独立的区块，但没有明确的语义含义。
<span>：类似于<div>，用于将文档中的一部分标记为独立的区块，但没有明确的语义含义。
<b>和<i>：用于加粗和斜体显示文本，但它们并不提供任何关于文本内容的语义信息。
<br>：用于插入换行符，但它没有明确的语义含义。
<font>：用于设置文本的字体、颜色和大小，但它也没有明确的语义含义。

使用非语义化标签可能会导致网页的结构和内容不清晰，使得网页难以理解和解析。此外，非语义化标签也不利于网页的可访问性、可维护性和搜索引擎优化。因此，在编写HTML代码时，建议尽量使用语义化标签来描述网页的结构和内容。

三、实际网站的HTML结构

网站名称：水电水利设计总院

<head>：包含标题、关键词、描述；

<body>：包含导航、轮播图、资讯区域。

非语义化标签片段

<li >  
    <a href="/web/news.html">新闻中心</a>  
    <div class="subPAA">  
    <div class="subP">  
  <div class="subPA">  
    <div class="subPB"><a href="/web/news.html">总院新闻</a></div>  
    <div class="subPB"><a href="/web/news.html?p=1">电建动态</a></div>  
     <div class="subPB"><a href="/web/news.html?p=2">媒体关注</a></div> 
     <div class="subPB"><a href="/web/news.html?p=3">通知公告</a></div>  
     
    </div>  
     <div class="supImg">  
     <img src="skin/images/navimg2.jpg" alt="">  
       </div>  
    </div>  
    </div>  
 </li>  
 <li >

HTML语义化的案例分析 | 青训营

一、HTML语义化标签

二、HTML非语义化标签

三、实际网站的HTML结构