首页 > 代码库 > HTML语义化

HTML语义化

1、含义--用正确的标签做正确对事情。

2、目的--让页面的内容结构化,便于浏览器,搜索引擎解析。

3、好处--在没有css样式的情况下,也以一种文档格式显示,易于阅读;

               搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重,易于SEO;

               使阅读源代码的人更加容易将网站分块,便于阅读和维护。

4、常用的标签--

  <header>

              可以是网页或任意section的头部部分;

              没有个数限制;

              如果<hgroup>或<h1>...<h6>自己能工作的很好,就不用。

  <footer>跟<header>类似。

  <hgroup>

              如果只需要一个h1-h6标签就不用hgroup;

    如果有连续多个h1-h6标签就用hgroup;

    如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签。

  <nav>用在整个页面主要导航部分上。

  <aside>

    aside在article内表示主要内容的附属信息;

    在article之外则可做侧边栏,没有article与之对应,最好不用;

    如果是广告,其他日志链接或者其他分类导航也可以用。

  <section>

    表示文档中的节或者段;

    article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div。

  <article>--article内部嵌套article,有可能是评论或其他跟文章有关联的内容。

<article>

  <header>
    <h1>一篇文章</h1>
    <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>
  </header>

  <p>文章内容..</p>

  <article>
    <h2>评论</h2>

    <article>
      <header>
        <h3>评论者: XXX</h3>
        <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
      </header>
      <p>哈哈哈</p>
    </article>

    <article>
      <header>
        <h3>评论者: XXX</h3>
        <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
      </header>
      <p>哈?哈?哈?</p>
    </article>

  </article>

</article>

 

技术分享
 

上例是最好简单的article标签使用情况,如果在article内部再嵌套article,那就代表内嵌的article是与它外部的内容有关联的,如博客文章下面的评论,如下:

<article>

    <header>
        <h1>一篇文章</h1>
        <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>
    </header>

    <p>文章内容..</p>

    <article>
        <h2>评论</h2>

        <article>
            <header>
                <h3>评论者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈哈哈</p>
        </article>

        <article>
            <header>
                <h3>评论者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈?哈?哈?</p>
        </article>

    </article>

</article>
文章里的评论,一个article嵌套article来表示的实例

article内部嵌套article,有可能是评论或其他跟文章有关联的内容。那article内部嵌套section一般是什么情况呢。如下:

<article>

    <h1>前端技术</h1>
    <p>前端技术有那些</p>

    <section>
        <h2>CSS</h2>
        <p>样式..</p>
    </section>

    <section>
        <h2>JS</h2>
        <p>脚本</p>
    </section>

</article>
文章里的章节,一个article里的section实例:因为文章内section部分虽然也是独立的部分,但是它门只能算是组成整体的一部分,从属关系,article是大主体,section是构成这个大主体的一部分。本网站的全部文章都是article嵌套一个个section章节,这样能让浏览器更容易区分各个章节所包括的内容。

那section内部嵌套article又有哪些情况呢,如下

<section>
    
    <h1>介绍: 网站制作成员配备</h1>

    <article>
        <h2>设计师</h2>
        <p>设计网页的...</p>
    </article>

    <article>
        <h2>程序员</h2>
        <p>后台写程序的..</p>
    </article>

    <article>
        <h2>前端工程师</h2>
        <p>给楼上两位打杂的..</p>
    </article>

</section>
一个section里的article实例:设计师、程序员、前端工程师都是一个独立的整体,他们组成了网站制作基本配备,当然还有其他成员~~。设计师、程序员、前端工程师就像article,是一个个独立的整体,而section将这些自成一体的article包裹,就组成了一个团体。

HTML语义化