HTML语义化
语义化的含义
HTML语义化是指在编写网页时，使用合适的HTML标签来正确地表达内容的含义和结构。
在HTML中，每个标签都有其特定的含义和语义。语义化的HTML能够使网页的结构更加清晰，易于理解和维护。通过使用适当的标签，可以更好地描述网页的内容，使其对搜索引擎和屏幕阅读器等工具更友好，提高网页的可访问性。类比生活中的例子，可以将HTML标签看作是不同的容器或工具。就像我们在家中使用不同的容器来存放不同的物品一样，使用正确的HTML标签来包裹不同的内容能够更好地组织和呈现网页的信息。
举例
例如，使用
标签来表示页面的主标题，
标签来表示段落，
- 和
- 标签来表示无序列表，和/
标签来表示表格等。这样做不仅使网页的结构更加清晰，也使搜索引擎能够更好地理解和索引网页的内容。 <body> <!-- 头部区域 --> <div class="header"> <div class="wrapper"> <!-- logo --> <div class="logo"> <h1> <a href="#">logo</a> </h1> </div> <!-- 导航 --> <div class="nav"> <ur> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ur> </div> <!-- 搜索 --> <div class="search"> <input type="text" placeholder="请输入关键字"> <a href="#">1</a> </div> <!-- 用户 --> <div class="user"> <a href="#"> <img src="./uploads/user.png" alt=""> <span>播仔学前端</span> </a> </div> </div> </div> </body>在这个示例中，我们可以看到使用了大量的
<div>标签，并且没有使用对应的语义化标签来描述页面结构和内容<body> <!-- 头部区域 --> <header> <div class="header"> <div class="wrapper"> <!-- logo --> <div class="logo"> <h1> <a href="#">logo</a> </h1> </div> <!-- 导航 --> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> </nav> <!-- 搜索 --> <div class="search"> <input type="text" placeholder="请输入关键字"> <a href="#">1</a> </div> <!-- 用户 --> <div class="user"> <a href="#"> <img src="./uploads/user.png" alt=""> <span>播仔学前端</span> </a> </div> </div> </div> </header> </body>这个示例中，我们使用了HTML5的语义化标签来代替部分非语义化的
<div>标签。例如，用
<header>代替<div id="header">，用<nav>代替<ul>等。这样更清晰地表达了页面的结构和内容关系。语义化的好处
- 代码结构清晰：使页面没有css的情况下，也能够呈现出很好的内容结构。
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息（爬虫依赖标签来确定上下文和关键字的权重）。
- 提升用户体验：例如 title、alt 可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
- 增加可读，方便团队维护和开发。
- 方便其他设备解析：例如 屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
