文章構造を表すタグ

2014年5月22日：HTML

ホームページの構造はある程度決まっています。例えば、

  • ヘッダー
  • ナビゲーション
  • 記事
  • フッター

といった要素はたいていのホームページに記載されています。

これらの文章構造をHTMLファイルできちんと示しておくと、HTMLの構造がわかりやすくなります。

 

ヘッダーやフッターなどの文章構造を表すタグが「HTML５」では導入されました。

それらのタグは

  • ヘッダー<header>
  • ナビゲーション<nav>
  • 記事<article>
  • フッター<footer>
  • 副次的な情報<aside>
  • その他の区切り<section>

の６つあります。例えば、以下のようにして使用します。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>

<body>
<nav>
<ul>
    <li><a href="#">MENU1</a></li>
    <li><a href="#">MENU2</a></li>
    <li><a href="#">MENU3</a></li>
    <li><a href="#">MENU4</a></li>
</ul>
</nav>
<div>
	<header>
	<h1>Sample Web</h1>
    </header>
	<article>
	<section>
		<h2>記事タイトル</h2>
		<p>記事テキスト.......................</p>
	</section>
	</article>
</div>
<footer>
	Copyright (c) Sample Web
</footer>
</body>
</html>

かなり文章構造がはっきりして見やすいですね。

 

HTML５以前のバージョンでは上記のようなタグはありませんでした。

ですから代わりに、

<div id="header">
<h1>サンプルサイト</h1>
</div>

という具合に、divとidを使って文章構造を表記していました。HTML5以前の形式のサイトではよく出てくるので覚えておくといいでしょう。

著者：安井 真人(やすい　まさと)

TOP