首页 > 代码库 > HTML语义化

HTML语义化

2024-11-03 05:32:40   208人阅读

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语义化


联系
我们