Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容
web语义化是什么?
为什么要语义化?
web语义化的分类
HTML标签语义化
<div class=”title”>文章的标题</div>
<h1>文章的标题</h1>
-
<header>
<hgroup>
<h1>标题</h1>
<h2>副标题</h2>
</hgroup>
<p> 文本或者图片</p>
</header>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<article>
<section>
Content
</section>
<section>
Content
</section>
</article>
<section>
<article>
Content
</article>
<article>
Content
</article>
</section>
<figure>
<img src="/figure.jpg" width="304" height="228" alt="Picture">
<figcaption>Caption for the figure</figcaption>
</figure>
<aside>
<h4>Disney in France</h4>
<p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>
CSS命名语义化
<!-- 以表现为中心 -->
<div class="lr margin10">
<span>nickName:seg</span>
<div>
<!-- 以信息为中心 -->
<p class="user-info">
<em>nickName:seg</em>
<p>
Http+URL语义化
https://mall.midea.com/index.php/category?id=10049&addr_code=440000,440100,440103
https://mall.midea.com/category?id=10049&addr_code=440000,440100,440103
-
-
-
参考文档:
About HTML semantics and front-end architecture
HTML Element Reference
HTML语义化
IBM developerWorks®
url重构
search-engine-optimization-starter-guide-zh-cn