HTML5の基本要素まとめ。アウトラインを意識して書こう！

作成:2018.05.07 01:00 更新:2019-10-31T13:09:59Z

こんばんわ。きっしーです。

HTML5の特徴である、構造化タグについてまとめておきたいと思います。基本的な内容ですので、すでにご存じの方は読み飛ばしていただければと思います。

また、HTML5ドキュメントの追加要素も記載しています。アウトラインに関係ないものも一部記載しています。

構造化タグって何？

これまでのHTMLでは、div要素やtable要素を使って文章の見た目を制御してきました。

でも、文章は書籍のように章・節・段落などのように構造的であるべきだよね？HTMLは文章の構造（アウトライン）を表現するものであって、見た目を制御するものではないよね？ということ。

ドキュメント関連

!DOCTYPE

ドキュメントの種類を示すタグでドキュメントの先頭に記載します。HTMLの場合は以下のように記載します。

<!DOCTYPE html>

ルート要素

html要素

HTMLドキュメントを示すタグになります。lang属性を使って表示言語を指定します。日本語であればjaになります。

<!DOCTYPE html>
<html lang="ja">

</html>

メタデータ関連

head要素

metaタグやtitle要素、style要素、link要素、script要素などを定義する要素になります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTML5の基本要素まとめ</title>
  </head>
</html>

セクション関連

body要素

HTMLとして、実際に表示されるドキュメントを定義する要素になります。

<!DOCTYPE html>
<html lang="ja">
  <head></head>
  <body>
    <h1>構造化タグって何？</h1>
    <p>
      ...
    </p>
  </body>
</html>

コンテンツのヘッダーを表します。主に見出しや投稿日などを定義することが多いです。

<!DOCTYPE html>
<html lang="ja">
  <head></head>
  <body>
    <header>
	  <h1>ブログタイトル</h1>
    </header>

	<main>
	  <article>
	    <section>
	      <header>
	        <h2>記事見出し</h2>
		  </header>
		  <p>
			ブログ記事
		  </p>
		</section>
	  </article>
	</main>

	<footer>
	  Copyright (c) Kissy
	</footer>
  </body>
</html>

nav
メニューー

<!DOCTYPE html>
<html lang="ja">
  <head></head>
  <body>
    <header>
      <h1>ブログタイトル</h1>
      <nav>
        <ul>
          <li>メニュー1</li>
          <li>メニュー2</li>
          <li>メニュー3</li>
        </ul>
      </nav>
    </header>
  </body>
</html>

nav要素

メニューなどナビゲーションを

main要素

コンテンツの主たる部分を表します。

article要素

独立したコンテンツを表します。article要素とすべきかsection要素とすべきか悩ましいところです。「独立したコンテンツ」として成り立つかどうか？を考えると良いでしょう。

section要素

ひとかたまりのコンテンツを表します。article要素の中に複数のsection要素が定義されることが多い。しかし、section要素の中にarticle要素があってもよい。（この辺りは賛否両論がある）

aside要素

コンテンツに付随する要素を定義します。サイドバーやシェアボタンなどが当たります。

フッター部を表します。

address要素

連絡先などを表します。

コンテンツ関連

figure要素

図や表、動画、画像などを表します。

テキスト関連

time要素

日時を表します。

<time date time=“2017-05-08T09:00:00+09:00>今日は2018/05/08 9:00(日本時間)</time>

strong要素

テキスト中の重要な部分を表します。重要なテキスト部分をstrong要素で囲。

<p>HTML5では<strong>アウトラインを意識して</strong>書くことが重要です<p>

mark要素

テキスト中の目立たせたい部分を表します。strong要素は意味的に重要なものを表しますが、というよりは表示上で強調する部分を表す。強調したい部分をmark要素で囲う。

あの<mark>イーハトーヴォ</mark>のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

ruby要素、rt要素、rp要素

ルビを表す。rt要素でルビのテキスト、rp要素でルビが使えないブラウザでルビのテキストを囲う記号を表します。

五月のしまいの日曜でした。わたくしは<ruby>賑<rp>(</rp><rt>にぎ</rt><rp>)</rp></ruby>やかな市の教会の鐘の音で眼をさましました。

WEBアプリ関連

details要素、summary要素

折りたたみ可能な要素を表します。summay要素のテキストは常に表示されますが、details要素はsummay要素をクリックした時に、表示されます。

<details>
  <summary>詳細はこちら</summary>
  <p>
    ここに詳しい内容を書く。
  </p>
</details>

template要素

複製することを前提とした要素です。Scriptから利用します。template要素自体はレンダリングされません。

dialog要素

ダイアログボックスやウィンドウなどユーザー操作によって相互作用するインタフェースを表します。

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。

【2023年】これからブログを始める人へおすすめの書籍