11.替代属性具有不正确的值
如果开发人员正确使用，alt 属性可能非常有用。不幸的是，他们中的许多人并没有试图描述图像，使视觉障碍的人能够理解图片的内容。
别这样
<img src="picture.jpg" alt="adidas Originals Superstar">
您可以使用它代替
<img src="picture.jpg" alt="adidas Originals Superstar Bold platform trainers in black and white">
12.使用div元件而不是跨度元件
这是我在很多网站上看到的最多的错误。在规范中，div 元素有以下描述：
div元素根本没有特殊意义。它代表它的孩子。它可以用于类、朗和标题属性，以标记一组连续元素常见的语义。 ⠀
可以使用此元素的上下文：预期流量内容的位置以及作为 dl 元素的孩子。
流内容是文档和应用程序主体中使用的大多数元素。那不是文字
跨度元素是标记文本的最佳元素，没有特殊意义。它在规范中具有以下描述：⠀
跨度元素本身并不意味着什么，但当与全球属性（如.class、lang 或 dir）一起使用时，它可以是有用的。它代表它的孩子。 ⠀可以使用此
元素的上下文：预期措辞内容的位置。
措辞内容是文档的文本，以及在段内级别标记该文本的元素。
因此，只需使用文本的跨度，您就会获得有效的HTML。
别这样
<div>some text</div>
您可以使用它代替
<span>some text</span>
13.缺少社交媒体块的地址元素
通常，我们需要在我们的项目中标记社交媒体块或其他联系信息。通常，开发人员使用 div 元素。
但是，WHATWG 规格包含此任务的特殊地址元素。规格中写的内容。
地址元素表示其最近文章或身体元素祖先的联系信息。如果这是主体元素，则联系信息适用于整个文档。
因此，如果您想要有效的HTML，则应使用地址元素。
别这样 <div class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </div> 您可以使用此代替 <address class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </address>
14.没有 ol 元素的面包屑
有一个最佳做法，使用列表来标记导航元素，如面包屑，包纸等。通常，开发人员使用ul元素。但规格包含一个更合适的元素，此元素是 ol 元素。
此元素在 WHATWG 规范中具有以下描述：
ol 元素表示项目列表，其中项目是有意订购的，因此更改订单将更改文档的含义。
因此，如果我们要更改面包屑中元素的顺序，那么我们将更改网站导航的含义并混淆用户。因此，此列表已订购，即ol元素。
别这样
<nav class="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ul> </nav> 您可以使用此代替 <nav class="breadcrumbs" aria-label="breadcrumbs"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ol> </nav>
15.没有时间元素的日期
我认为每个开发人员都使用跨度元素进行日期。我也是但这是一个错误，因为 WHATWG 规格包含了可用于它的时间元素。这就是 Whatwg 规格所告诉我们的：
时间元素表示其内容，以及日期属性中这些内容的机器可读形式。内容类型仅限于各种日期、时间、时区偏移和持续时间。
因此，我们应该使用时间元素，而不是创建日期的跨度元素。
别这样
<span>October 5</span> <span>two days ago</span> <span>a Saturday</span>
您可以使用此代替
<time datetime="2019-10-05">October 5</time> <time datetime="2019-01-29">two days ago</time> <time datetime="2019-09-23">a Saturday</time>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)