HTML语义化
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>语义化</title>
<style type="text/css">
body{font-family:'Courier New', Courier, monospace;font-size: 14px;}
.content{
width: 300px;
padding: 10px;
border: 1px dashed gray;
}
.content div{
font-size: 16px;
font-weight: bold;
height: 24px;
line-height: 24px;
}
</style>
</head>
<body>
<div class="content">
<div>前端开发</div>
<p>web开发最核心的3个技术：html、css、JavaScript。html控制网络结构、css控制网页的样式、JavaScript控制网页的行为。</p>
</div>
</body>
</html>
对于上面的标题效果，应该是h1~h6标签来实现的，html的精髓在于标签的语义，例如p标签，就是“paragraph”，标记的是一个段落；h1标签表示的是“header1”，标记的是一个最高级标题。。。而div和span是无语义的标签，应该尽可能少用。
标题语义化
h1~h6是标题标签，按照标题的重要性依次递减，相对于其他语义化标签，h1~h6在搜索引擎优化（即SEO）中占有相当重要的地位，标签会被赋予一定的权重，注意方面： （1)一个页面只能有一个h1标签； （2）h1~h6之间不要断层； （3）不要用h1~h6来定义样式； （4）不要用div来代替h1~h6.
图片语义化
在html中，我们使用img标签来表示图片，对于图片的语义化，从以下两方面： （1）alt属性和title属性； alt属性用于图片描述，这个描述的文字是给搜索引擎看的，并且当图片无法显示时，页面会显示alt中的文字。 title属性也用于图片描述，不过这个描述是给用户看的，并且当鼠标指针移到图片上时，会显示title中的内容。 语法：
<img src="" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">
搜索引擎看不出来图片描绘的是什么东西，它只会查看html代码，通过img标签的alt属性或者页面上下文来判断图片的内容。因此，对于img标签。我们一定要添加alt属性，以便搜索引擎识别图片的内容，alt属性在搜索引擎优化中也很重要，并且会被赋予一定的权重。alt是img标签必需属性，一定要添加；title属性是img标签可选属性，可以加可以不加。 （2）figure元素和figcaption元素 举例：“图片+图注”的效果；
<div class="img-list">
<img src="image/ab1.jpg" alt="" />
<span>html入门教程</span>
</div>
但是这种实现方式的语义并不好，在html5中，引入了figure和figcaption两个元素来增强图片的语义化。 语法：
<figure>
<img src="image/ab2.jpg" alt=""/>
<figcaption></figcaption>
</figure>
说明：figure元素用于包含图片和图注，figcaption用来表示图注文字，在实际开发中，对于“图片+图注”效果，从而使得页面的语义更加良好。
表格语义化
对于这种表格数据形式，最好的选择是table。在表格中，我们比较常用的标签是table（表格）、tr（行）和td（表格单元格）这三个。不过为了加强表格的语义化，W3C还添加了5个标签：th、caption、thead、tbody和tfoot。th表示“表头单元格”；caption表示“表格标题”。thead、tbody和tfoot这三个标签把表格从语义上分为三部分；表头、表身和表脚。
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
说明：对于thead、tbody和tfoot这3个标签，不一定都用得上，例如tfoot很少用。
表单语义化
表单和表格是两个完全不一样的概念，对于表单语义化，从以下2方面探究； （1）label标签， label标签用于显示在输入控件旁边的说明性文字，也就是将某个表单元素和某段说明文字关联起来。 说明性文字 for属性值为所关联的表单元素的id，例如则其所关联的label标签应该为。标签的for属性有两个作用。1）语义上绑定了label元素和表单元素。2）增强了鼠标可用性，也就是我们点击label中的文本时，其所关联的表单元素也会获得焦点。
<form action="index.apsx" method="POST">
<div>登录掘金</div>
<p>
<span>账号：</span><input type="text" name="name" />
</p>
<p>
<span>密码：</span><input type="password" name="pwd" />
</p>
<input type="checkbox" name="remember-me" /><span>记住我</span>
<input type="submit" value="登录" />
</form>
for属性使得鼠标单击的范围扩大到label元素上，极大的提高了用户单击的可操作性；事实上，label标签有两种关联方式，我们拿复选框来说，下面两行是等价的：
<input id="cbk" type="checkbox" /><label for="cbk">复选框</label>
<label>复选框<input id="cbk" type="checkbox" /></label>
对于上面例子，我们使用label标签来增强语义化，修改后代码如下：
<form action="index.apsx" method="POST">
<div>登录掘金</div>
<p>
<label for="name">账号：</label><input type="text" id="name" name="name" />
</p>
<p>
<label for="pwd">密码：</label><input type="password" id="pwd" name="pwd" />
</p>
<input type="checkbox" id="remember-me" name="remember-me" /><span>记住我</span>
<input type="submit" value="登录" />
</form>
（2）fieldset标签和legend标签。 在表单中，我们使用fieldset标签来给表单元素进行分组，其中，legend标签用于定义某一组表单的标题。 语法：
<fieldset>
<legend>表单组标题</legend>
......
</fieldset>
说明：使用fieldset和legend标签有两个作用。 增强表单语义；可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。使用fieldset和legend这两个标签语义增强语义化，修改后的代码如下：
<form action="index.apsx" method="POST">
<fieldset>
<legend>表单组标题</legend>
<p>
<label for="name">账号：</label><input type="text" id="name" name="name" />
</p>
<p>
<label for="pwd">密码：</label><input type="password" id="pwd" name="pwd" />
</p>
<input type="checkbox" id="remember-me" name="remember-me" /><span>记住我</span>
<input type="submit" value="登录" />
</fieldset>
</form>
形成了非常好看的“书签”效果。
其他语义化
1、换行符
W3C规定，
标签仅仅用于段落中的换行，不能用于其他情况，也就是说，
标签只适用于p标签内部的换行，不能用于其他标签。
<p>四川省<br/>甘肃省<br/>云南</p>
2、无序列表 在实际开发中，对于列表型的数据，为了实现良好的语义，最好使用有序或者无序列表，不建议div等来实现。
<ul>
<li><span>1</span>HTML</li>
<li><span>2</span>css</li>
<li><span>3</span>js</li>
</ul>
3、strong标签和em标签 strong用于实现加粗文本，em用于实现斜体文本，基于结构和样式分离的原则，标签仅仅是为了实现简单的加粗或者斜体效果，一般不用这个，实际上，在w3c对这两个标签赋予“强调”的语义，在strong或者em标签内部的文本被强调为重要文本。并且搜索引擎对于这两个标签也赋予一定的权重，如果在一个页面中，为了SEO而想要突出某些关键字，可以使用strong和em这两个标签，一般情况下，去掉strong和em默认样式，然后使用css重新定义新的样式，但是不会影响这两个标签的语义，也就是说，样式只会改变标签的外观，不会改变语义。 4、del标签和ins标签 在html中，这两个标签配合使用，del表示“delete”，用于定义被删除的文本，ins表示“insert”，用于定义被更新的文本，一般情况下，我们会使用css来重新定义del和ins标签的样式。 举例：
<p>静宁水果</p>
<p><del>原价：￥6.50/kg</del></p>
<p><ins>现价：￥4.50/kg</ins></p>
5.img标签 在页面中显示一张图片，有两种方式：一种使用img标签，二是使用背景图片；区别在于：使用img标签添加图片；是通过html来实现（希望被搜索引擎搜索到）；使用背景图片，是通过css来实现（不希望被搜索引擎搜索识别）。
语义化验证
语义良好判断方法：去掉css样式，然后看页面是否还具有很好的可读性。 html标签都有一定的默认样式，例如p标签有上下边距，strong标签对应字体加粗，ul标签有缩进效果等；
HTML5舍弃的标签
1）仅为了定义样式，没有任何语义
- basefont 定义页面文本的默认字体、颜色或尺寸
- big 定义大字号文本
- center 定义文本居中
- font 定义文本的字体样式
- strike定义删除线文本
- s 定义删除线文本
- u 定义下划线文本 2）很少使用或者已经被替代，因此舍弃
- dir 定义目录列表，应该由ul代替
- acronym 定义首字母缩写，应该由abbr代替
- applet 定义嵌入的applet，应该由object代替
- isindex 定义与文档相关的可搜素引擎
- frame 定义frameset中的一个特定的框架
- noframes 为那些不支持框架的浏览器显示文本 对于HTML语义化，需要注意以下两点。 （1）如果仅仅为了改变样式，应该使用css来实现，不要使用html。 （2）在不同的页面部分，优先使用正确的语义化标签，如果没有语义化标签可以用，才去考虑div和span等无语义标签。
