HTMLのセクションとアウトラインを理解する

2019年4月22日 19:23

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設計手順について、わかりやすい記事