正確使用 <header> HTML5中的標簽

Question

我讀過，標簽是一節的標題。 在文檔中可以使用1次以上。

我應該在本節中使用<header>標記：

<section>
<header>
</header>
</section>

或在<section>上方，例如：

<header>
</header>
<section>
</section>

是否可以使用此結構來獲取標題信息和以下各節：

<section id="main">

    <header id="results">
      <h1>My Results</h1>
    </header>

    <section id="results">
        <section id="result1">
           <h2>Title</h2>
           <div class="body"></div>
        </section>
        <section id="result2">
           <h2>Title</h2>
           <div class="body"></div>
        </section>
       .
       .
       .
    </section>

</section>

您覺得此示例對於語義用法來說是一個很好的例子嗎？HTML5標簽的標頭和部分？

還是應該使用<main>標記代替<section id="main"> ？

Answer 1

您的兩種情況具有不同的含義：

這section有一個header ：

<section>
<header>
</header>
</section>

此處的父節（*）有一個header和一個子section （沒有header ）：

<header>
</header>
<section>
</section>

（*可以是section元素，例如article / section / nav / aside ，或者是section root，例如body / etc。）

兩種情況都是可能的，這取決於您內容的含義。

請參閱我對一個相關問題的回答，其中包含具有不同header元素的示例文檔。

Answer 2

不要將section用作樣式的包裝。 正確的方法是

<body>
    <header>        
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>        
    </header>    
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>        
    </aside>
    <footer>Footer</footer>
</body>

關於部分和頭點擊這里和HTML5可能出現的錯誤這里

您的html應該是

<body>
    <header>
        <h1>Search Form</h1>
    </header>
    <section id="content">
       <h1>Search Result Title</h1>
       <ul id="sponsored_ads">
           <li></li>
           <li></li>
       </ul>
       <ul id="organic_ads">
        <li></li>
           <li></li>
      </ul>        
       <article id="left_menu_1">
         <ul>
           <li></li>
           <li></li>
         </ul>
       </article>
       <article id="left_menu_2>
         <ul>
           <li></li>
           <li></li>
         </ul>
       </article>
    </section>
    <footer></footer>
</body>

正確使用 <header> HTML5中的標簽

問題描述

2 個解決方案

解決方案1
1 2014-04-17 14:03:42

解決方案2
0 2014-04-17 11:57:56

正確使用 <header> HTML5中的標簽

問題描述

2 個解決方案

解決方案1 1 2014-04-17 14:03:42

解決方案2 0 2014-04-17 11:57:56

解決方案1
1 2014-04-17 14:03:42

解決方案2
0 2014-04-17 11:57:56