语义化
什么是语义化?
- 每一个HTML元素都有具体含义
a元素:超链接
p元素:段落
h1元素:一级标题
- 所有元素与展示效果无关
元素展示到页面中的效果,应该由CSS决定
我们看到的未使用CSS的显示效果是这个浏览器的默认样式决定的
(实际操作时通常会使用重置样式表重置浏览器默认样式以便适应不同浏览器)
选择什么元素,取决于内容的含义,而不是显示的效果
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一个段落</p>
<p>这也是一个段落</p>
</body>
</html>
浏览器默认样式下 h1元素的一级标题字体大小大于 h2元素的二级标题
但我们可以用css将 h2元素的样式设置成字体大于 h1,但此时在浏览器眼里 h1仍是一级标题,h2也仍是二级标题,浏览器只通过元素的含义去识别其内容含义,与元素的样式无关。
为什么需要语义化?
-
为了搜索引擎优化(SEO)
-
为了让浏览器理解网页