我知道有关这个话题的问题很多,但是我找不到答案的权威来源.

这是official definition和wiki page,那里有more documentation,但是如果不是在一个非常简单的例子或不同的方式,他们不会解释正确的用法.

到目前为止,我已经“理解”了

<节>定义页面的一部分(部分),如博客,标题新闻,博客条目列表,评论列表以及可以与常见主题相关的所有内容. <物品>定义了一个从页面其余部分(?)有意义的内容,并且具有单个主题(博客条目,评论,文章等))的内容. 但是,在< article>中,我们可以使用< section>分割部分它的部分,在这种情况下,它具有标记更大文本章节的容器的功能.

怀疑

如果这些句子是正确的(或部分正确的),这意味着< section>有两个完全不同的使用情况.

我们可以这样写一个页面:

<!DOCTYPE html>
<html lang=en>
    <head>
        <Meta charset=utf-8>
        <title>Fruits</title>
    </head>

    <body>

        <h1>Fruits war blog</h1>

        <section id="headlineNews"> <!-- USED AS CONTAINER -->

            <h1>What's new about fruits?</h1>   
            <article><h1>Apples are the best</h1>Apples are better than bananas</article>
            <article><h1>Apple's cakes</h1>With apples you can prepare a cake</article>

        </section>

        <section id="blogEntries"> <!-- USED AS CONTAINER -->

            <h1>Articles about fruits</h1>

            <article>
                <h1>Apples vs Bananas</h1>
                <section>  <!-- USED AS CHAPTER -->
                    <h2>Introduction:</h2>
                    Bananas have always leaded the world but...
                </section>
                <section>  <!-- USED AS CHAPTER -->
                    <h2>The question:</h2>
                    Who is the best? We don't kNow so much about apples...
                </section>
            </article>

        </section>

    </body>
</html>

这就是大纲的样子:

1. Fruits war blog
   1. What's new about fruits?
      1. Apples are the best
      2. Apple's cakes
   2. Articles about fruits
      1. Apples vs Bananas
         1. Introduction:
         2. The question:

所以< section>被认为有两个完全不同的和不相关的语义含义?

是否正确使用:

<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
  <article>
    <section></section> <!-- USED AS CHAPTER -->
  </article>
</section>

以这种?asted的方式?
我发现is possible以颠倒的方式使用:

<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
  <section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
    <article></article> <!-- COMMENT -->
  </section>
</article>

但是我没有找到一个答案,我写下面的方式.

我想看看W3C小组已经写了< section>的基础的讨论.标签可能很有用,但我找不到.

注:我正在寻找与授权来源记录的回复

解决方法

http://www.w3.org/wiki/HTML/Elements/section不是部分的官方定义.部分是 defined in the HTML5 specification,目前是候选建议(这是 Editor’s Draft的快照).

在CR中,部分是defined:

The section element represents a generic section of a document or application. A section,in this context,is a thematic grouping of content,typically with a heading.

部分是一个sectioning content元素(连同文章,旁边和导航).那些分节元素和标题(h1-h6)创建一个outline.

以下三个示例在语义上相当(相同的含义,相同的概要):

<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>

<!-- example 1: using section elements with corresponding heading levels -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h2>Waking up</h2>
    <p>…</p>
  </section>
  <section>
    <h2>The big moment!</h2>
    <p>…</p>
  </section>
  <section>
    <h2>Going to bed</h2>
    <p>…</p>
  </section>
</section>

<!-- example 1: using section elements with h1 everywhere -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h1>Waking up</h1>
    <p>…</p>
  </section>
  <section>
    <h1>The big moment!</h1>
    <p>…</p>
  </section>
  <section>
    <h1>Going to bed</h1>
    <p>…</p>
  </section>
</section>

所以你可以使用第whenever (*)节你使用h1-h6.而当您在大纲中需要单独的条目但不能(或不想))使用标题时,您可以使用部分.

还要注意,headerfooter始终属于其最近的祖先分段内容(或根节点,如body,如果没有分段元素)元素.换句话说:每个section / article / aside / nav元素可以有自己的页眉/页脚.

文章,旁边和导航都可以说是更为具体的部分元素.

two completly different usage cases

这两个用例完全不一样.在“容器”案例中,您可以说该部分代表文档的一个章节,而在“章节”案例部分则代表文章/内容的一章(当然是文档的一部分).

以同样的方式,一些标题用于标题网页部分(如“导航”,“用户菜单”,“评论”等),一些标题用于标题内容(“我的第一天”,“我的喜欢的书“等).

HTML5部分标签含义?的更多相关文章

  1. jQuery实现获取h1-h6标题元素值的方法

    这篇文章主要介绍了jQuery实现获取h1-h6标题元素值的方法,涉及$(":header")选择器操作h1-h6元素及事件响应相关技巧,需要的朋友可以参考下

  2. 语义化 H1 标签

    语义化 H1 标签

  3. php – 通过touch()更改文件的上次修改时间,并使用filemtime()获取结果

    所以我试图获取文件的最后修改日期,然后将其更新到当前时间,但是当我查看结果时,我在$oldtime和$newtime中获得了SAME时间戳触摸文件后使用clearstatcache获取适当的修改时间值.因为您之前使用过filemtime,所以缓存了结果,而在第二次调用时,结果从该缓存中拉出而不是直接检查文件.

  4. php – 使用Laravel 5与AngularJS刀片标签冲突

    我正试图用Laravel5设置Angular.我已经在appServiceProvider中尝试过:附:但我得到:当进行与Blade有关的更改时,请务必删除缓存的视图.它们位于存储/框架/视图中.只需删除所有文件如果你想要一些更实用的东西,你可以创建一个命令来做到这一点.像thisone

  5. php – 获取SimpleXMLElement的XML内容

    有没有办法提取SimpleXMLElement的“innerHTML”?

  6. 使用正则表达式和崇高文本进行搜索和替换

    我需要找到以下模式的所有实例:并替换它以添加ID和额外的类.如何替换它以保持其当前格式和属性?变每个$n代表主匹配中的子匹配,按它们出现的顺序排列.

  7. 正则表达式 – 匹配标记之间的所有字符的正则表达式

    我正在使用崇高的文本2编辑器.我想使用正则表达式匹配所有h1标签之间的所有字符.到目前为止,我正在使用这样的它的工作正常,如果h1标签没有休息.我的意思是它的工作很好.但如果标签看起来像这样,它不起作用有人能用语法帮我吗?默认.匹配除新行字符之外的每个字符.在这种情况下,您将需要DOTALL选项.匹配任何字符,包括新行字符.DOTALL选项可以内联指定为(?:或者,正则表达式可以是[^]*

  8. php – var_dump或print_r和html编码

    在html源代码输出!显然,我本可以通过XSS进行操作!如何确保数组值是htmlencoded?我发现knittl的代码不起作用.我不得不做一些小改动让它按如下方式工作:现在这在PHP5.3中运行良好

  9. 第一次用ajax做的demo(text方式传递数据)

    后台测试页面:结果:

  10. 如何在angularjs UI-Bootstrap中创建一个可关闭的选项卡

    我想创建可关闭的选项卡.如何在UI-Bootstrap中配置现成的选项卡组件以添加此功能?

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部