HTML5 - タグの入れ子構造(ネスト)について

Webサイト制作

HTML5

応用

投稿日時 : 2024/09/30 更新日時 : -

HTMLタグを書く際に一行、一行で完結するものだと思われるかもしれない。
例えば


<nav>メニュー</nav>
<header>ヘッダー</header>
<main>記事の内容</main>
<aside>サイドバーメニュー<aside>
<footer>フッター</footer>

上記のようにタグの構造が単純になる事はほとんどない。実際はタグの中にタグを記述して複雑な構造を取る。この事を入れ子またはネストと言う。


<div id="oya">
 <div id="ko"></div>
</div>

oyaのdivタグの中にkoのdivタグがある。まさにこの事でkoが入れ子、ネストされていると言う。現在の当サイトのHTMLのコードで例を挙げるとnavタグの中はこんな入れ子構造はこうなっている。


<nav>
  <ul>
    <li>
      <a href="/website/">Webサイト制作</a>
      <ul>
        <li><a href="/website/html5/">HTML</a></li>
        <li><a href="/website/css3/">CSS</a></li>
        <li><a href="/website/scss/">SCSS</a></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li>
      <a href="/software/">ソフトウェア</a>
      <ul>
        <li><a href="/software/vscode/">VSCode</a></li>
      </ul>
    </li>
  </ul>
  ...省略
</nav>

ulタグの中に更にulタグがネストされている。しかし、HTMLタグはどんなタグでもネストする事ができる訳ではない。ネストできるタグとできないタグが明確に分かれているので、次のページでそれを紹介する。