Brat Creator

HTML入門～セクショニングコンテンツ～

セクショニングコンテンツというものを学ぶことで、
ブラウザに意味を理解させるサイトを作れるようになり、
SEO(検索エンジン最適化)に強いサイトが作れるようになります。

セクショニングコンテンツとは

HTML4までは、ヘッダーやサイドバーなどを示す場合に
div要素にidやclassを付与していました。
しかし、それだとブラウザ側が理解できなかったので、
HTML5からそれらをタグとして使用出来るようになりました。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
    <nav>
      <h1>ロゴ</h1>
      	<ul>
      		<li><a href="">1</a></li>
      		<li><a href="">2</a></li>
      		<li><a href="">3</a></li>
    	</ul>
	</nav>
  </header>
  <main>
    <section>
      <article>記事1</article>
      <article>記事2</article>
      <article>記事3</article>
      <article>記事4</article>
    </section>
  </main>
  <aside>
    <article>サイド1</article>
    <article>サイド2</article>
  </aside>
  <footer>
  	<p>© nantoka</p>
  </footer>
</body>
</html>

main

メインコンテンツであることを示します。

<!DOCTYPE html>
<html>
<head>
  ～
</head>
<body>
  <header>
    ～
  </header>
  <main>
    ～
  </main>
  <aside>
    ～
  </aside>
  <footer>
  	<p>© nantoka</p>
  </footer>
</body>
</html>

section

sectionは、章や節を表します。
見出しを入れることを強く推奨されています。
もし見出しがない場合でも暗黙的にあるものとみなされます。
また、段組みのためやdivの代わりに使ってはいけません。

<!DOCTYPE html>
<html>
<head>
  ～
</head>
<body>
  <header>
    ～
  </header>
  <main>
    <section>
      ～
    </section>
  </main>
  <aside>
    ～
  </aside>
  <footer>
  	<p>© nantoka</p>
  </footer>
</body>
</html>

article

articleは、section要素より、さらに使い方が特定されます。
ページの残りから隔離されても意味が分かるものに使います。
例えばブログだと記事の部分に使います。

articleの中にsectionを入れたり、
sectionの中にarticleを入れることもokです。

例えば、
article要素の中に章や節がある場合はarticleの中にsectionを入れたり、
章や節の中に単体で意味を持つ部分がある場合はsectionの中にarticleを入れるなど

<!DOCTYPE html>
<html>
<head>
  ～
</head>
<body>
  <header>
    ～
  </header>
  <main>
    <section>
      <article>記事1</article>
      <article>記事2</article>
      <article>記事3</article>
      <article>記事4</article>
    </section>
  </main>
  <aside>
    ～
  </aside>
  <footer>
  	<p>© nantoka</p>
  </footer>
</body>
</html>

header

headerは、ヘッダー要素を示すために使います。
一般的に1番上のロゴやナビゲーションなどを囲むヘッダー部分などで使います。
その他にもsectionやarticleなどの見出し部分などでも使います。
hタグを入れることを推奨されていますが、なくても問題ないです。

文書のヘッダ情報を表す「head」タグとは別物なのでご注意下さい。

<!DOCTYPE html>
<html>
<head>
  ～
</head>
<body>
  <header>
    ～
  </header>
  <main>
    ～
  </main>
  <aside>
    ～
  </aside>
  <footer>
  	<p>© nantoka</p>
  </footer>
</body>
</html>

nav

navは、ナビゲーションであることを示す際に使います。
一般的にheader内のulで囲まれているナビゲーションを囲みますが、
他のページにリンクした箇所のすべてをnavで囲む必要はなく、
主要なナビゲーションとなる部分のみに使いましょう。

<!DOCTYPE html>
<html>
<head>
  ～
</head>
<body>
  <header>
    <nav>
      <h1>ロゴ</h1>
      <ul>
	  	<li><a href="">1</a></li>
      	<li><a href="">2</a></li>
      	<li><a href="">3</a></li>
	  </ul>
	</nav>
  </header>
  <main>
    ～
  </main>
  <aside>
    ～
  </aside>
  <footer>
  	<p>© nantoka</p>
  </footer>
</body>
</html>

aside

asideは、その部分がウェブページ内における余談・補足情報の
セクションであることを示すために使います。
一般的にサイドバーなどで使用されることが多いです。

<!DOCTYPE html>
<html>
<head>
  ～
</head>
<body>
  <header>
    ～
  </header>
  <main>
    ～
  </main>
  <aside>
    ～
  </aside>
  <footer>
  	<p>© nantoka</p>
  </footer>
</body>
</html>

footer

footerは、フッター要素だと示すために使います。
一般的に1番下にあるヘッダー部分で使用します。

<!DOCTYPE html>
<html>
<head>
  ～
</head>
<body>
  <header>
    ～
  </header>
  <main>
    ～
  </main>
  <aside>
    ～
  </aside>
  <footer>
  	<p>© nantoka</p>
  </footer>
</body>
</html>

Comment