发表新帖
发表新帖

Should have or should have ?

前端 未结
关注
3 412
陌清茗
陌清茗 2021-02-04 14:32

I\'m reading Mark Pilgirm\'s \"Dive into HTML5\" and in the semantics section, it talks about how HTML5 introduces the

and
相关标签:
3条回答
  • 一整个雨季
    2021-02-04 14:52

    It's entirely acceptable to nest them either way. Although the document outline does not distinguish between a <section> and an <article>, from a semantic point of view they are two different things. That's the whole point of introducing them as two distinct semantic elements.

    Use the first snippet if your page consists of multiple articles.

    Use the second snippet when you have an article that's comprehensive enough to contain multiple sections.

    You can even combine them both if using both fits your content, such that your markup looks like this:

    <section><h1>section article?</h1>
  <article><h1>art 1</h1>
    <section><h1>sec 1.1</h1></section>
    <section><h1>sec 1.2</h1></section>
    <section><h1>sec 1.3</h1></section>
  </article>
  <article><h1>art 2</h1>
    <section><h1>sec 2.1</h1></section>
    <section><h1>sec 2.2</h1></section>
    <section><h1>sec 2.3</h1></section>
  </article>
  <article><h1>art 3</h1>
    <section><h1>sec 3.1</h1></section>
    <section><h1>sec 3.2</h1></section>
    <section><h1>sec 3.3</h1></section>
  </article>
</section>
    0 讨论(0)
  • 夕颜
    2021-02-04 15:11

    Both are semantically valid

    It all depends on how you want your page interpreted.

    If you're writing a blog post, each post would be an <article>, and in a particularly long blog post, you could separate it into logical <section>s with their own <h1>s and whatever else it needs.

    If you're writing a research page, you might use <sections> to separate out the table of contents, abstract, main body, and appendix. In the main body (and appendix) you might have a particular section that truly is an <article>.

    If you're laying out a page, I highly recommend the following format:

    <body>
    <div id="page">
        <div id="page-inner">
            <header id="header">
                <div id="header-inner">
                    <!-- logo, site name, search, etc -->
                </div>
            </header>
            <nav id="nav">
                <div id="nav-inner">
                    <ul>
                        <li><a href="">Primary Nav</a></li>
                        ...
                    </ul>
                </div>
            </nav>
            <div id="wrapper">
                <div id="wrapper-inner">
                    <div id="content">
                        <div id="content-inner">
                            <article>
                                <header>
                                    <h1>Title</h1>
                                    <span class="author"></span>
                                    <time class="timestamp"></time>
                                    ...
                                </header>
                                <div class="content">

                                </div>
                                <footer>
                                    ...
                                </footer>
                            </article>
                            ...
                        </div>
                    </div><!-- end #content -->
                    <div id="sidebar">
                        <div id="sidebar-inner">
                            <div class="module"></div>
                            <!-- more sidebar widgets, modules, blocks, what-have-you -->
                        </div>
                    </div><!-- end #sidebar -->
                    <!-- more columns if necessary -->
                </div>
            </div>
            <footer id="footer">
                <div id="footer-inner">
                    <!-- copyright notice, footer menu, contact form, etc -->
                </div>
            </footer>
        </div>
    </div>
</body>

    Although if you don't need so many <div>s, keep it simple with:

    <body>
    <header></header>
    <nav></nav>
    <div id="wrapper">
        <div id="content">
            <article></article>
            ...
        </div>
        <div id="sidebar">
            <div class="module"></div>
            ...
        </div>
    </div>
    <footer></footer>
</body>
    0 讨论(0)
  • 终归单人心
    2021-02-04 15:14

    The HTML documentation tends to use sections only inside articles. It seems to suggest that you should always use an <article> and use each <section> for, well, a section of that article. The example they give involves apples:

    <article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <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>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for apple pies.</p>
 </section>
</article>

    I don't see many examples where a <section> is not contained by an <article>, but an <article> can contain another <article> within it, such that a blog would be represented by an article, and then a comment to that blog would be represented by another article inside the parent article. So, that looks like the direction you should be headed.

    So, continuing from the apples example: If you wanted to allow users to comment on each type of apple, then in that case you would have an article inside a section, which would still be inside an article.

    After looking more into it and thinking harder about it, this is the generalization I've come up with:

    Using articles should be reserved for "posts" such as a blog, a topic (and each of its subsequent posts), comments, etc. Anything which can have an author should be using an <article> element.

    Using sections should be reserved for separating sections of your website, such as an introduction (to what your site might be about), some news articles, or an area within an article used for comments. Anything which is a "section" of something (doesn't really have an author).

    0 讨论(0)
 看不清?
提交回复
热议问题