HTML语义化

HTML 语义化是指在编写 HTML 代码时，根据内容的结构和含义选择合适的 HTML 元素，以便于开发者和浏览器正确地理解和解释网页的内容，更好进行网页结构设计。它提供了更好的可读性、可维护性和可访问性，同时对搜索引擎优化（SEO）也有一定的帮助，还能有助于爬虫抓取更多的有效信息。

HTML 提供了很多标签，如 <header>、<nav>、<section>、<article>、<footer> 等，用来表示不同类型的内容。根据具体的内容特点，选择最合适的标签进行标记，并注意避免滥用 <div> 和 <span> 这样的无语义标签，滥用无语义标签，那么我们一般只能借助class和id属性来访问DOM，随着页面结构变得复杂，程序会很难维护。

使用语义化标签的原则： 1、使用恰当的语义标签（比如说头部用<hearder>不要用成<article>）。ps:用对 >> 不用 >> 用错；

2、结构层次清晰：使用适当的标签来构建页面的结构层次，使页面的内容能够被正确地理解。例如，使用 <h1>-<h6> 标签来表示标题的级别，使用列表标签 <ul>、<ol> 和 <li> 来表示有序和无序列表；

3、语义化的链接：使用 <a> 标签来创建链接时，使用 href 属性为链接添加正确的链接地址，并使用 title 属性提供链接的描述信息。同时，合理使用 rel 属性表示链接与当前页面的关系；

4、表单元素的语义化：对于表单相关的内容，使用 <form>、<input>、<label> 等标签，并为输入框添加合适的 type 属性，以便于正确识别和处理不同类型的用户输入；

5、图片的替代文本描述：为 <img> 标签添加 alt 属性，提供图像的替代文本描述，这样即使图像无法加载或者无法显示时，用户仍然可以获取到图像的信息；

6、表格的正确使用：对于表格数据，使用 <table>、<th> 和 <td> 等标签来创建表格结构，并合理利用 <caption> 标签提供表格标题；

7、语义化的多媒体内容：对于音频和视频等多媒体内容，使用 <audio> 和 <video> 标签，并使用 <source> 标签指定多个可选的媒体源，以便于浏览器根据支持的格式自动选择合适的播放方式。

语义化案例分析-掘金首页

页面标题使用<hearder>

左侧导航栏使用<nav>

中间标题栏

右侧侧边栏<aside>