HTMLのセクションとアウトラインを理解する
HTMLを書く際、アウトラインを意識する。
アウトラインとは、ページの階層構造のことで、HTML上の記述順と情報の順番、タグは本体の使い方をすることで、正しく形成される。
アウトラインチェックツール
https://gsnedders.html5.org/outliner/
●HTML5 / 要素の入れ子構造で文書のアウトラインを表す。
<section>
<h1>マルミミゾウ</h1>
<section>
<h1>はじめに</h1>
<p>このセクションでは、あまり知られていない方のマルミミゾウについて説明します。</p>
</section>
<section>
<h1>生態</h1>
<p>マルミミゾウはサバンナには生息せず、森林に生息しています。</p>
</section>
</section>
これは、以下の構造(アウトライン)となります。
1. マルミミゾウ
1.1 はじめに
1.2 生態
相対的な順位付けはセクション内のみのことであり、セクションの見出し順位ではなく、セクションの構造がアウトラインを決定します。
●HTML5 よく使うタグ
セクション
<body>
<section>
<article>
<aside>
<nav>
<h1> ~ <h6>
※これらのタグは別記事で解説。
ヘッダーとフッター
<header>
<foooter>
<header>【ページのヘッダー】と【セクションのヘッダー】を定義し、<article>、<section>、<aside>、<nav> が、自身の <header> を持つことができる。<footer>も同様。
ヘッダーとフッターはアウトラインの新たなセクションを生成せず、ページ内のセクションのコンテンツをマークアップするものです。
●よく使うタグの整理
グループ
<p>・・・・・ 段落
<div>・・・・ ひとかたまりの範囲を定義
<ul> ・・・・ 順序のないリスト
<li>・・・・・ リストの項目
<dl>・・・・・ 定義を表す
<dt>・・・・・ 定義する言葉を囲む
<dd>・・・・・ 言葉の説明を囲む
<main>・・・・ メインコンテンツ
テキスト
<a>・・・・・ ハイパーリンク
<span>・・・ ひとつの範囲として定義
コンテンツの埋め込み
<img>・・・・ 画像表示
<ifrane>・・・ インラインフレーム
<video>・・・ 動画再生
テーブル
<table>・・・・ テーブルを作成
<tbody>・・・ テーブルのボディ部分を定義
<tr>・・・・・ 横 一行を定義
<td>・・・・・ データセルを作成
<th>・・・・・ 見出しセルを作成
フォーム
<form>・・・・ 入力・送信フォームを作成
<input>・・・・ フォームを構成する様々な入力部品を作成
<button>・・・ ボタンを作成
入れ子ルールについて、わかりやすい記事
WEB設計手順について、わかりやすい記事