HTML の標準仕様
html / CSS

HTML Living Standard のタグを再確認する

First

HTML5で廃止されたタグ

HTML5(HTML Living Standard) は、従来のHTMLと比べて、文書の論理構造をより明確に記述したり、アプリケーションの作成を容易にした仕様となっている。もっと具体的いうと、CSS にてレイアウトや装飾をより完全にコントロールし、html では、CSS を外して表示すると分かり易いが、レポート文書のような構造を執る。

さて、以下にピックアップしたものは、HTML5で廃止されたタグの中で、注意が必要なものだ。

  • <hr>

    <hr> は html5 では非奨励のタグであるので、対応策として区切りたい要素に CSS を指定する。例えば以下を参照のこと。

    この上に罫線を引きます。 

    <p style="border-top:1px solid #ff0000;">この上に罫線を引きます。</p>

  • <center>

  • <big>

  • <font>

    <font> は html5 では非奨励のタグであるので、対応策として<span> 要素にCSSを指定する。

  • <align>

    見栄えに関する設定は CSS によるスタイルシートを用いる ことが徹底されたため廃止

Second

構造化タグ

<header>

<nav> は HTML の要素で、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表す。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがある。 

<header>//ヘッダー
  <nav>//ナビゲーション
    <ul>
      <li>デザイン・コーディング</li>
      <li>セキュリティ</li>
      <li>バックエンド</li>
      <li>CMS</li>
    </ul>
  </nav>
</header>

<html>

<article> は HTML の要素で、文書、ページ、アプリケーション、サイトなどの中で自己完結しており、（集合したものの中で）個別に配信や再利用を行うことを意図した構成物を表す。例えば、雑誌や新聞の記事、ブログの記事、商品カード、その他の独立したコンテンツの項目が含まれる。

<section>

<section> は HTML の要素で、文書の自立した一般的なセクション（区間）を表す。そのセクションを表現するより意味的に具体的な要素がない場合に使用する。少数の例外を除いて、セクションには見出しを置いて使う。

<aside>

<aside> は は HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現する。サイドバーやコールアウトボックスなどを表現するためによく使われる。 

<html>
 <head>
 <body>
  <div id="wrapper">
   <header>//ヘッダー</header>
   <div id="hero">//ウェブサイトのトップページに表示される大きな画像や動画のデザインを指し、主要なメッセージやブランドの価値を視覚的に伝える役割を果たす。</div>
   <main>//文書の <body> の主要なコンテンツを表します。メインコンテンツ領域は、文書の中心的なトピック、またはアプリケーションの中心的な機能に直接関連する、または展開されたコンテンツで構成されます。
     <article>//独立した一つの記事
        <section>//記事の中の文節</section>
        <section>//記事の中の文節</section>
     </article>
   </main>
   <aside>//HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。</aside>
   <footer>//フッター</footer>
  </div>
 </body>
</html>
Third

<main> タグ以下の構造の例

<main> は HTML の要素で、文書の <body> の主要なコンテンツを表す。メインコンテンツ領域は、文書の中心的なトピック、またはアプリケーションの中心的な機能に直接関連する、または展開されたコンテンツで構成される。文書には hidden 属性が指定されていない <main> 要素を 2 つ以上置くことはできない。

この内容はサイドバー、ナビゲーションリンク、著作権表示、サイトロゴ、検索フォームのような、文書のセットや文書のセクションにまたがって繰り返されるものを除くべきである。 

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>…</p>
    <p>…</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>…</p>
    <p>…</p>
  </article>
</main>

mdm web docs <main>より引用
Fourth

コンテンツモデルとは

コンテンツ・モデルとは、HTML5から登場した概念で、各要素ごとに中に配置できる要素を定義した配置ルールである。

要素のカテゴリー名で表されることが多く、ブロックレベル要素やインライン要素を細かく定義し直したものだ。コンテンツ・モデルを理解するには、次のセクションで扱うカテゴリーを理解しなければならない。

例えば、<section> 要素の中にはフロー・コンテンツを入れることができる、<p> 要素の中にはフレージング・コンテンツしか入れられない、といったルールが、各要素のコンテンツ・モデルによって詳細に決められているのである。

Fifth

カテゴリー

html5 では全ての要素がいずれかのカテゴリーに属している。

このセクションの内容は概要である。今まで諸君が習得してきた定義内容の言い換えであり、ざっと流し読みすれば良いと思う。

フローコンテンツ

HTMLのタグのカテゴリーの1つで、<body> タグ内で使用できるタグを指す。ほぼすべてのタグがフローコンテンツに属している。

  • p
  • picture
  • pre
  • progress
  • q
  • ruby
  • s
  • samp
  • script
  • section
  • select
  • slot
  • small
  • span
  • strong
  • sub
  • sup
  • div
  • table
  • template
  • textarea
  • time
  • u
  • ul
  • var
  • video
  • wbr

ヘッディングコンテンツ

HTMLのタグのカテゴリーの1つで、ページ内の重要なポイントを際立たせ、内容を整理するためのコンテンツカテゴリーである。

  • （HTML の見出し要素）
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

インタラクティブコンテンツ

HTMLのタグのカテゴリーの1つで、 ユーザーが能動的に関与できるコンテンツの総称で、双方向性を持ったコンテンツを指す。ユーザーの反応や希望を反映させることで、コンテンツの内容を変化させることができるのが特徴だ。

  • （ユーザーが操作可能なコンテンツ）
  • a
  • audio（controls属性がある場合）
  • button
  • details
  • embed
  • iframe
  • img（usemap属性がある場合）
  • input
  • label
  • select
  • textarea
  • video（controls属性がある場合）

フレージングコンテンツ

段落内で使用するようなコンテンツだ。 従来で言うインライン要素(インライン要素は横一列に並ぶが、ブロック要素は横に並ばず改行して表示される。)に相当する要素が、このカテゴリーに属することになる。

  • メタデータコンテンツ (文書のヘッダ部に記載する要素群で、ブラウザの画面上には表示され)
    • meta
    • title
    • style
    • link
    • csrpt
  • エンベディッドコンテンツ(埋め込みコンテンツは、文書に他のリソースを取り込んだり、他のマークアップ言語や名前空間を挿入したりするものである。)
    • iframe
    • img
    • video
  • a
  • button
  • cite
  • code
  • iframe
  • img
  • input
  • label
  • select
  • span
  • strong

セクショニングコンテンツ

セクションの範囲を定義するコンテンツである。

  • article
  • aside
  • nav
  • section
Sixth

DOCTYPE宣言

HTML5以降のDOCTYPE宣言は、文書の先頭に以下のように記述する。<!DOCTYPE> はドキュメントタイプ宣言と呼ばれ、その HTML ファイルで使用している HTML のバージョンを宣言する。

<!DOCTYPE> は、HTML4.01 では必須であった。HTML5 では、その文書が HTML5 で記述されたものであることを示すものと定義されている。多くのブラウザでは、ドキュメントタイプ宣言が記述されていなければ、過去互換モードで表示する。

HTML5 / HTML Living Standard の場合

ドキュメントタイプ宣言が無くても表示されるが、その場合、互換モードで表示されてしまうので注意が必要だ。 

<!DOCTYPE html>
<html>
  :
</html>

HTML5 以前の DOCTYPE 宣言を以下にふたつ提示しておく。数あるクライアントのウェブサイトの中で、この状態で時間が止まっているかもしくは再利用する案件があるかもしれない。

HTML 4.01 Strict の場合

Strict は「厳格な」という意味で、このDTD（Document Type Definition）は、HTMLの以前のバージョンで許可されていたプレゼンテーショナル（見た目を整えるための）要素や属性を使用しない厳密なマークアップを奨励した。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional の場合

Transitionalモードは、過渡的な文書型で、HTML4.01に準拠しつつも、従来の要素や属性が許容される。これにより、古いHTML文書の互換性が確保される。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

html5 への移行

HTML 4.01 Strict を長く使ってきた人にとって、html5 への準備は整っていると考えて良いだろう。

全ての装飾やレイアウトは 2011 年頃から段階的に策定が進行中の CSS3 が担ってきた慣習があるからだ。ここで注視したいのは、追加されたタグと廃止になったタグを見直す程度で移行できそうである。というのも、廃止になったタグが現状機能しない、非表示になるなどの影響は受けていないからだ。