【问题标题】:Semantically correct HTML语义正确的 HTML
【发布时间】:2013-09-14 18:07:07
【问题描述】:

以下代码在语义上是否正确?我认为我最大的困惑是围绕文章中的部分的需要

文章:HTML 元素表示文档、页面、应用程序或网站中的自包含组合,旨在独立分发或重复使用,例如在联合中

Section:HTML Section Element () 表示文档的通用部分,即内容的主题分组,通常带有标题。

在我的情况下,我认为文章部分是自包含的信息块,而该部分是有关该标题的通用信息。这有意义吗?

<!DOCTYPE html>
 <html>
 <head>
  <Title>Anthonys Personal Profile</Title>
  <link rel="stylesheet" href="css/styles.css">   
 </head>
 <body>
  <article>
   <header>Personal Profil</header>
   <section>
    <p>Role</p>
    <p>Education</p>
    <p>Major</p>
    <p>Residence</p>
  </section>
</article>
<article>
  <header>Key Skills</header>
  <section>
    <p>Development</p>
    <p>PM</p>
    <p>Performance</p>
    <p>Agile</p>
  </section>
</article>

【问题讨论】:

    标签: html semantics


    【解决方案1】:

    更正:

    我的立场是正确的。我在下面链接到的规格不包含示例,但是包含一个示例here

    <article>
     <header>
      <h1>Apples</h1>
      <p>Tasty, delicious fruit!</p>
     </header>
     <p>The apple is the pomaceous fruit of the apple tree.</p>
     <section>
      <h1>Red Delicious</h1>
      <p>These bright red apples are the most common found in many
      supermarkets.</p>
     </section>
    ...
    </article>
    

    清楚地表明我原来的解释是不正确的。 HT@cilerler。

    总而言之,section 可用于细分,例如h1 之后的部分,包括 h1

    虽然根据article 有灵活性。一篇不错的文章,其中包含注意事项。

    今天早上我觉得以下是有意义的:

    原文:

    您还需要关闭&lt;section&gt; 标签,即:

    <section>
    .....
    </section>
    

    关于 SO 有几个问题:

    这个问题非常接近你 How to correctly use "section" tag in HTML5?

    这个解释了应该使用标签的场景 In what scenarios do you use <section> tag of html 5, in place of <div>?

    从那里引用:

    章节的示例包括章节、选项卡式对话框中的各种选项卡式页面或论文的编号章节。网站的主页可以分为介绍、新闻和联系信息等部分

    section 元素表示通用文档或应用程序部分……section 元素不是通用容器元素。当需要一个元素来设置样式或方便编写脚本时,鼓励作者改用 div 元素。

    所以我的理解是section 标记高级部分,而例如引用中提到的单个新闻项目可以标记为articles

    编辑: 好的,来自官方规格:

    http://dev.w3.org/html5/html-author/#the-section-element

    section 元素表示通用文档或应用程序部分。在这种情况下,部分是内容的主题分组,通常带有页眉,可能还有页脚。

    http://dev.w3.org/html5/html-author/#the-article-element

    article 元素代表文档、页面或站点的独立部分。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论或任何其他独立的内容项目。

    虽然这至少对我来说远非完全清楚,但我想说的是,section 的级别高于article。我的这个声明也部分基于官方规范的结构,section 直接位于 body 下方,随后是 article

    4.3.4 Sections
    
        4.3.4.1 The body element
        4.3.4.2 The section element
        4.3.4.3 The nav element
        4.3.4.4 The article element
        4.3.4.5 The aside element
        4.3.4.6 The h1, h2, h3, h4, h5, and h6 elements
        4.3.4.7 The header element
        4.3.4.8 The footer element
        4.3.4.9 The address element
        4.3.4.10 Headings and Sections
    

    【讨论】:

    • 我正在阅读这篇似乎与(我认为)这些帖子相矛盾的文章:alistapart.com/article/previewofhtml5 你的想法是什么?还有这篇文章:iandevlin.com/blog/2011/04/html5/html5-section-or-article
    • 嗯,这似乎与帖子相矛盾。我看了一眼herehere,在我看来,这似乎暗示section 的高级用途(例如部分布局:页眉、页脚、章节)和article 的更底层用途(例如cmets ,新闻报道)。
    • @Anthony 我更新了我的答案,参考了官方 html 规范。
    • 经过深思熟虑后,我回答了一个相关问题here,也许更清晰
    • 感谢您帮助我解决这个问题!认为我在正确的轨道上
    【解决方案2】:
    猜你喜欢
    • 1970-01-01
    • 2022-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-06-12
    • 2021-05-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多