【HTML5】要素(タグ)の使用例(文書構造)

      2016/08/15

HTML5のタグの使い方を忘れないように、このページでは文書構造に関するタグの使用例を載せています。

文書構造に関する要素(タグ)の使用例

文章構造
タグ 用途
article 自己完結できるセクション
section 一般的なセクション
nav ナビゲーション
aside 補足的なセクション
header ヘッダ
footer フッタ
	<!DOCTYPE HTML>
	<html lang="ja">
		<head>
			<title>住んでみたい県</title>
		</head>
		<body>
		    <header>
		        <h1>住んでみたい県</h1>
		        <nav>
		            <ul>
		                <li>北海道・東北</li>
		                <li>関東</li>
		                <li>信越・北陸</li>
		                <li>東海</li>
		                <li>近畿</li>
		                <li>中国</li>
		                <li>四国</li>
		                <li>九州・沖縄</li>
		            </ul>
		        </nav>
		    </header>
		  
		    <main role="main">
		        <article>
		            <h2>北海道・東北</h2>
	
		            <section>
		                <h3>北海道</h3>
		            </section>
		  
		            <section>
		                <h3>青森</h3>
		            </section>
		  
		        </article>
		    </main>
		  
		    <aside>
		        <h2>関東地方</h2>
		        <p>関東地方では…</p>
		    </aside>
		  
		    <footer>
		        :
		    </footer>
		</body>
	</html>

 - HTML , ,