0

私は初めて HTML5 タグを適切に見ていて、このページ構造 (ブログ サイト用) を考え出しました:

<header>
    <nav>
        <ul>
            <li>list 1</li>
            <li>list 2</li>
        </ul>
    </nav>
</header>
<main>
    <h1>Main page heading</h1>
    <article><h1>Post 1</h1></article>
    <article><h1>Post 2</h1></article>
    <div id=“sidebar”&gt;
        <aside><h1>Aside heading</h1></aside>
    </div>
</main>
<footer>
    <aside><h1>Footer widget heading</h1></aside>
    <aside><h1>Footer widget heading</h1></aside>
</footer>

これを HTML アウトライナー ツールhttps://gsnedders.html5.org/outliner/で実行すると、次のようになります。

1. Main page heading
    1. Untitled Section
    2. Post 1
    3. Post 2
    4. Aside heading
    5. Footer widget heading
    6. Footer widget heading

概要を説明する必要があると私が思っていた方法とは正確には異なります。

Q1. 「無題のセクション」がそこにある理由がわかりません。遊んでみると、これは実際には<nav>. 「無題セクション」について心配する必要がありますか? 私に関する限り、ナビは本当に見出しを必要としません...

Q2. 明らかに、私のページ構造は実際には望ましい効果をもたらしていません。とをページ コンテンツ<header>と区別したかったのです。これらのタグは要素自体を区切るものではないことは理解していますが、そうでない場合、特にとの場合、それらは何のためにあるのでしょうか? 私の理解では、それはあなたが以前に使用した可能性のある場所で使用する必要があり、ページのメイン領域を示す必要があり、それはまさにそれが行っていることです.<footer><main><header><footer><main><div id="main"><div id="wrapper">

タグを使用していない理由<section>は、タグをスタイリング ラッパーとして使用するべきではなく、「ページの章」として使用するべきであることを理解しているためです。このページには章がありません (自己完結型のものだけが既に と で区別されています<article>)<aside>ので、 を使用する理由がわかりませんでした<section>

<h1>また、タグを使用してみましたが<header><footer>これで問題が解決したようです。

<header>
    <h1>Site title</h1>
    <nav>
        <ul>
            <li>list 1</li>
            <li>list 2</li>
        </ul>
    </nav>
</header>
<main>
    <h1>Main page heading</h1>
    <article><h1>Post 1</h1></article>
    <article><h1>Post 2</h1></article>
    <div id=“sidebar”&gt;
        <aside><h1>Aside heading</h1></aside>
    </div>
</main>
<footer>
    <h1>Footer heading</h1>
    <aside><h1>Footer widget heading</h1></aside>
    <aside><h1>Footer widget heading</h1></aside>
</footer>

概要:

1.  Site title
    1.  Untitled Section
2.  Main page heading
    1.  Post 1
    2.  Post 2
    3.  Aside heading
3.  Footer heading
    1.  Footer widget heading
    2.  Footer widget heading

しかし、ヘッダーにはタイトルが必要かもしれませんが、フッターにはタイトルを付けたくないので、これは素晴らしい解決策とは思えません...代替案があれば幸いです。タグを正しい目的で使用しながら、物事をできるだけシンプルに保ちたいだけです。

この質問全体を読んでくれてありがとう。このアウトラインに執着しすぎている場合は、お知らせください。

4

1 に答える 1