实现如下所示工具栏：
做到标签语义化，首先要尽量减少使用<div>和<span>这两个标签。
分析：这是一个包含5个无序操作项的工具栏，因此应该使用符合语义的<ul>标签。如下：
<ul id ="reader_main_action" class="reader-main-action">
<li class="reader-action-library"></li>
<li class="reader-action-spliter"></li>
<li class="reader-action-toc"></li>
<li class="reader-action-spliter"></li>
<li class="reader-action-note"></li>
<li class="reader-action-bookmark"></li>
<li class="reader-action-hightlight"></li>
</ul>
但总共就5个操作项，而此方案使用了7个li标签，单纯从语义上看，两个分隔符和其他5个操作项具有同等重要的地位，故去掉两个多余的<li>，使用CSS实现分隔符的效果，改进如下：
<ul id ="reader_main_action" class="reader-main-action">
<li class="reader-action-library"></li>
<li class="reader-action-toc spliter"></li>
<li class="reader-action-note splite"></li>
<li class="reader-action-bookmark"></li>
<li class="reader-action-hightlight"></li>
</ul>
以上是使用CSS样式实现了分隔符的样式，以下是使用：before伪类实现的一种方式，当然如果考虑支持IE7以下浏览器，也可以使用设置背景图的方式。
.reader-main-action.spliter{
margin-left:30px;
}
.reader-main-action.spliter:before{
content:'|';
line-height:28px;
font-size:20px;
color:#888；
cursor:default;
text-indent:;
float:left;
margin:0-20px;
}
以上方法是将无关内容彻底从HTML中分离出来，删除干扰语义的标签。但是，假设搜索引擎解析到这段HTML代码，从语义上只能分析出这5个操作项的工具栏，具体每个操作项的作用则不得而知，可以添加文字进一步说明，修改如下：
1 <ul id ="reader_main_action" class="reader-main-action">
2 <li class="reader-action-library">Library</li>
3 <li class="reader-action-toc spliter">toc</li>
4 <li class="reader-action-note splite">Note</li>
5 <li class="reader-action-bookmark">Bookmark</li>
6 <li class="reader-action-hightlight">Hightlight</li>
7 </ul>
由于操作项在界面中显示的是图标按钮，因此需要把文字隐藏起来，如下，CSS，即可实现文字的隐藏。
.reader-main-action li{
text-indent:-9999px;
}
验证HTML代码语义性，需要隐藏CSS代码，禁用CSS代码样式后，此方案显示效果如图：
注意：
1.在合适的地方使用适合的标签
<h>:标题，在网页中展示各层级的标题时使用；
<ul>/<ol>:列表，在展现各种数据列表或者菜单时使用
<p>,定义段落
<em>告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
<strong>用加粗的字体（相对于斜体）来显示其中的内容
<table>表格
<br>标签仅仅用于文本内容中的换行
<blockquote>定义块引用
<header>定义文档的页眉(介绍信息)
<footer>定义 section 或 document 的页脚
<article>定义一些来自外部的内容
<section>定义文档中的节
<nav>定义导航链接的部分
<aside>当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其它类似的有别与主要内容的部分
2.熟悉各标签上规范的属性，给HTML标签设置必要的属性
<img>，alt是必须要设置的属性，因为<img>是自闭合标签，并没有包含可以解释说明图片的额外信息。
<!—alt属性除了对图片做解释说明之外，也作为图片在浏览器中未加载时显示的代替文字-->
<img src="/img/loading.gif" alt="data loading…" />
<!—title属性是对元素的解释说明，并且作为在浏览器中当鼠标移到元素上时显示的提示文本-->
<a href="" title=""></a>
3.样式和结构分离
CSS中的两个伪类:before和:after，适合以上分隔符的使用。
例：清除元素的浮动
<div id="main">
<div class="sidebar">this is the side bar.</div>
<div class="content">this is the main content.</div>
<div class="clear"></div>
</div>
对应的CSS样式为：
.sidebar { float: left; width:150px; }
.container { float:right; width:450px;}
.clear { clear:both; }
但是这种写法破坏了HTML代码的语义，并不是一种好的方案，应该删除这个多余的<div>元素，并改用CSS样式来实现，代码如下：
<div id="main clearfix">
<div class="sidebar">this is the side bar.</div>
<div class="content">this is the main content.</div>
</div>
对应的CSS类clearfix的声明为：
.clearfix {
*zoom:;
}
.clearfix:before，----before伪类
.clearfix:after {---after伪类
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
另外，在构建页面的时候，经常会要添加图片，原则是，如果图片是作为页面内容的一部分，则应该使用<img>元素，如果图片仅仅是起装饰作用，则应该使用背景图方式。
4.给空标签中添加隐藏文字，用于说明标签的实际功能
把原来该用文字表达的效果替换为图片，建议给空标签添加一定的说明文字，并让文字隐藏起来，这样既提高了代码的语义，又满足了设计上的需求。一般可通过设置text-indent来达到隐藏文字的目的。