Question

<section>标签应该在<main>标签内还是相反？是否可以制作包含许多<main>标签作为其后代的<section>标签？例如：

<body>
  <main>
    <section></section>
    <section></section>  
    <section></section>
    <section></section>
  </main>
</body>

Answer 1

<main>元素应包含我们网页的主要内容，并且内容应该是各个页面的唯一内容，并且不应出现在网站的其他位置。

<section>元素用于表示一组相关内容。

您可以在<section>标记内使用<main>。

HTML语义标记的理想结构是

<main id="wrapper">
   <section id="content">
      <article id="post">
                    <header>
                        <h1>HTML Semantic tags</h1>
                        <p>Correctly Use Semantic HTML5 <article>, <main> and <section> 
                        Tags</p>
                    </header>
     <footer>
           <p>Correctly Use Semantic HTML5 <article>, <main> and <section> 
                        Tags</p>
     </footer>

                    <section id="comments">

                        <article>
                            <p>This is my all important comment, please don't delete it. 
                            </p>
                        </article>

                    </section>

                </article>

            </section>

            <aside>
            </aside>

        </main>

Answer 2

好吧，基本上，您可以在这里使用您的逻辑。部分是您网站的一部分。例如，页脚将是一个部分。同样，页面的任何PART都是一部分。现在，您可以将这些部分包装在其他部分中或其他任何地方。..仅使用queryParams标记或

this.router.navigate(['/list',{a:1}], {queryParams:data} );
// http://localhost:8100/list;a=1?map-center=13.7414025,100.51102500000002

可以这么简单地说，首先要比第一个更重要：）

Answer 3

我不同意divya jyothi。在该示例中，“节”用于构造页面的各个块，而应使用“节”将文章中的内容划分为有意义的块。显然，这取决于个人喜好，但这是我向客户推荐的建议：

<html>
    <head></head>

    <body>
        <header>
            <nav>[main menu]</nav>
        </header>

        <main>
            <article>

                <h1></h1>
                <p>Intro</p>

                <section>
                    <h2>Header for theme of first section</h2>
                    <p>Text</p>
                </section>
                <section>
                    <h2>Header for theme of second section</h2>
                    <p>Text</p>
                </section>
                <section>
                    <h2>Header for theme of third section</h2>
                    <p>Text</p>
                </section>

                <aside>
                    Comments directly related to the article
                </aside>
                <aside>
                    Other articles similar to the main article
                </aside>

            </article>

            <aside>
                Block of content not directly related to article ie form to sign up
            </aside>



        </main>
        <nav>[right column menu]</nav>

        <footer>
            <nav>[bottom menu]</nav>
        </footer>       
    </body>
</html>

变化显然是无限的，但我认为这是一个很好的基本模板。在https://www.semrush.com/blog/semantic-html5-guide/处阅读更多内容，并在https://sitegardien.com/html5viewer/semantichtml5viewer.php

处可视化语义HTML5结构。

主标签和部分标签哪个先出现？

3 个答案: