你应该避免的5个常见的HTML错误

1. 语义页眉和页脚
Div 没有语义结构。不要使用 div 创建页眉或页脚结构，而是使用”header” 与 “footer”元素。

不要这样使用

<div id="header">
...
</div>
<div id="footer">
...
</div>

正确的方法

<header>
...
</header>
<footer>
...
</footer>

2. 使用图形元素
如果您需要为图像添加标题，请将“figure”元素与“figcaption”元素结合使用。

不要这样使用

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

正确的方法

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>

3. 不要使用粗体或斜体标签
“b” 和 “i” 标签是展示标签，没有语义意义，而是更改 CSS 中的 font-weight/font-style 或使用 “strong” 或 “em” 元素。

不要这样使用

<b>Bold</b>
<i>Italics</i>

正确的方法

<strong>Bold</strong>
<em>Italics</em>

4. 使用描述性链接
链接的文本应该是明确的，并传达将用户重定向到的位置，用户和搜索引擎都可以更轻松地理解您的内容以及它与其他页面的关系。

不要这样使用

<a href="url">
Check our pricing...
</a>

正确的方法

Check our <a href="url"> pricing </a>

5. 使用内联样式
编写内联样式违反了将结构 (HTML) 与表示 (CSS) 分开的原则。而是在样式表中编写样式。

不要这样使用

<h1 style="font-size: 24">
 Header
</h1>

正确的方法

h1 {
font-size: 24
}