👌

HTMLの仕様を徹底解説-チートシートにどうぞ

2022/11/25に公開

4件

HTMLの仕様をしっかりと理解してコーディングしてますか？

labelタグの中にdivタグを入れたりしてませんか？

当てはまる場合は、この記事が参考になるはずです。

本記事では、HTMLの基本的な仕様を解説していきます。

この記事を読む終わる頃には、HTMLの書き方で迷うことが大幅に減るはずです。

ぜひ、参考にしてください。

HTMLの基礎知識

まず、HTMLの基本的なことについて説明していきます。

属性

タグに「属性」を書くことで、要素に情報を付け足すことができます。

例えば、aタグにsrc属性をつけることで、指定したURLへのリンクを形成することができます。

この属性において知っておくべきことは、次のあたりかと思います。

「=""」は省略が可能
同じ属性を複数指定した場合は、後続が無視される
タグごとに固有の属性と、全てのタグに使えるグローバル属性がある

ちなみに独自の属性をつけたい場合は、data-*と書くのことが推奨されています。

文字コード

HTMLでは、文字コードを設定する必要がありますが、基本的にUTF-8を使うべきとされています。

また、ブラウザが文字コードを判定する時は、次のような順序になります。

ユーザー独自の設定がある場合はそれを使う
HTTPレスポンスヘッダーに文字コード情報がある場合はそれを使う
先頭1024バイトまでにあるmetaタグのcharsetを使う

なので、HTTPレスポンスヘッダーの情報として文字コードを伝えるのが最良とされています。

ただ、一応metaタグの設定もしておきましょう。

文字コードを正しくブラウザ認識できないと、文字化けなどを起こしてしまうのでここはしっかりと設定するようにしましょう。

グローバル属性

先ほど説明したように、HTMLにはグローバル属性というものが存在します。

ここでは、主に使われるグローバル属性をいくつか紹介していきます。

class

クラスを指定できます。

クラスは基本的に、CSSやJavaScriptのために使われます。

id

idを指定できます。

こちらも基本的には、CSSやJavaScriptのために使われます。

また、他のタグから参照する際などにも使われます。

style

スタイリングを指定することができます。

style属性で指定したCSSは、詳細度が1番高くなります。(要は一番優先して適用される)

lang

使用する自然言語を指定することができます。

基本的に言語はhtmlタグに指定するので、あまり普通のタグに使うことはないです。

tabindex

この属性を指定することで、フォーカス不可の要素もフォーカスを受け取れるようなります。

また、フォーカスの順番も指定できます。

autofocus

この属性が設定しているものが、コンテンツの読み込みと同時にフォーカスされます。

この属性は、1ページに1つしか使えません。

イベントハンドラー

クリックや、入力などのユーザー側のイベントが起こった際の処理を設定できます。

イベントリスナーというイベントを監視する機能と、実際に実行されるイベントから構成されます。

イベントの戻り値が「false」の場合は、prevendeDefault()と同じ効果があります。

ただ、基本的にここはJSから操作するので、HTML上に書くことはほぼないです。

hidden

hidden属性を指定することで、現在のページとは無関係であることを伝えて非表示にできます。

けれど、CSSの上書きなどによって表示されてしまう可能性があります。

なので、CSSにhidden属性に対して、「display:none」を指定することが推奨されています。

[hidden]{
  display: none !important;
}

また、非表示にしてもDOM上は存在するので、開発者ツールなどで見たら表示されます。

カスタムdata属性

「data-hoge」という形式で、独自の属性をつけることができます。

これ自体に機能はなく、基本的にJavaScriptで処理するための属性を設定します。

また、CSSで個別にスタイルを当てたい時などにも使われます。

その他

他にも、マイクロデータ用のための属性などもありますが、長くなるのでこちらは割愛します。

コンテンツモデル

HTMLの仕様では、いくつかのタグごとに種類が設けられています。

その種類ごとに、どのコンテンツを子要素に入れていいかなども指定されています。

その種類ごとの仕様を「コンテンツモデル」と言います。

まず、覚えておくべきなのが、以下のコンテンツモデルになります。

メタデータ・コンテンツ

これは主にheadタグ内で使用できるタグになります。

linkタグなどがこれに該当します。

フロー・コンテンツ

大多数のタグがここに属します。

また、大多数のタグを子に入れることができます。

ただし、liタグなどの特定のタグを親に指定しなければいけないタグなどは、例外となります。

また、タグだけではなく、テキストも入れることが可能です。

フレージング・コンテンツ

フロー・コンテンツの中の文章内で使用するタグになります。

このコンテンツは、フレージング・コンテンツと、その他一部のタグだけを子要素に持つことができます。

例えば、divタグはフロー・コンテンツなのでspanタグを子要素にできますが、spanタグはフレージング・コンテンツなので、divタグを子要素にできないです。

ただ、このコンテンツモデルには多くの例外があるので、迷った時は仕様を確認する必要があります。

他にも、ヘディング・コンテンツや、セクショニング・コンテンツなどもありますが、こちらは追々説明します。

MDNの画像がわかりやすかったので、こちらも引用しておきます。

コンテンツ・モデルを紹介

それぞれのコンテンツ・モデルの種類や特徴などを紹介していきます。

メタデータ・コンテンツ

まずは、メタデータ・コンテンツを紹介していきます。

こちらは、主にheadタグ内で使われるタグになります。

html

HTMLの一番の親要素。

子としてheadとbodyを1つずつ持ちます。

head

メタデータを記述します。

タイトルタグを1つ含める必要があります。

title

ページのタイトルを指定します。

タブや、検索結果として使われます。

metaタグ

様々なメタデータを設定することができます。

charsetが代表的です。

あとはname属性を使って、様々なデータを持たせることも可能です。

link

他のファイルとの繋がりを記述するタグになります。

rel属性は、リンク先とこの文章の関係性を示します。

他にも様々な属性がありますが、全て説明するとかなり長くなるので今回は割愛します。

ザックリと、「SEOやパフォーマンス向上に役立つ属性がある」と認識していればOKです。

style

スタイルを記述します。

base

基準となるURLを指定できます。

これを指定することで、相対パスなどから形成されるURLが変わります。

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

次に、セクショニング・コンテンツを紹介します。

こちらは、文章構造を機械に伝えるためのタグになります。

おそらく、内部SEO的にここが一番需要な要素になるかと思います。

暗黙のセクション

まず、暗黙のセクションという機能を説明します。

セクショニング・コンテンツを使わずとも、普通にHTMLを書くだけで、hタグを元にして予想されるセクションを構成することができます。

ただ、これだと機械に正しく文章構造が伝わるとは限らないので、しっかりとセクショニング・コンテンツを使う必要があります。

明示的セクション

セクションを構成するタグは、次の4つになります。

article
nav
aside
section

これらセクショニング・コンテンツは、見出しの範囲を表します。

「このh2の内容はここまで」といったことを明示出来るわけです。

なので、それぞれのタグごとにタイトルタグを持つ必要があります。

また、セクションのルートとなる要素をセクショニング・ルートと呼びます。

セクショニング・ルートからh1,h2,h3と見出しを書いていきます。

ただ、セクショニング・ルートをh1から始めなければならないという決まりはないみたいです。

けれど、特に理由がない場合は、h1から書き始めるのが無難でしょう。

例えば、以下のように書くのが正しい書き方になります。

<body>
    <h1>記事タイトル</h1>
    <section>
      <h2>見出し</h2>
      <p>文章</p>
    </section>
    <section>
      <h2>見出し2</h2>
      <p>文章</p>
    </section>
    <aside>
      <h2>付帯情報</h2>
    </aside>
 </body>

bodyタグもセクショニング・ルートを構成するので、タイトルを持つことができます。

ちなみに、セクショニング・ルートは、外側のセクションとは独立したコンテンツだとみなされます。

article

articleタグは、そのセクションだけで自己完結する要素になります。

メインコンテンツの一部ではなく、独立してるものが対象になります。

例えば、記事のコメント一覧などはarticleタグを使うのが一般的です。

aside

asideタグは、メインコンテンツと関連するものの、取り除いても成立するものになります。

例えば、サイドに表示される広告などが該当します。

nav

navタグは、ナビゲーションのセクションになります。

主にヘッダーに置くリンクなどに使います。

section

sectionタグは一般的なセクションを表します。

他に要素を表現するために適しているセクショニング・タグがない場合に使用します。

articleタグとどちらを使うか迷うかと思いますが、別ページとして切り離しても成立するかで考えると良い気がします。(ここは個人の感想です。)

その他

以下はセクショニング・コンテンツではありませんが、関係するタグになるので合わせて紹介します。

ちなみに、全てフロー・コンテンツになります。

headerは、一番近い祖先セクションのヘッダーになります。

footerは、一番近い祖先セクションのフッターになります。

address

addressは一番近い祖先セクションのアドレス情報になります。

要は、問い合わせ先を表します。

blockquote

blockquoteタグは、他からの引用を表します。

このタグは、新しいセクショニングルートを作ります。

ヘディング・コンテンツ

こちらは、h1やh2タグの見出しのためのコンテンツになります。

一応フローコンテンツですが、中にはフレージング・コンテンツしか入れることができないです。

ちなみに、h1タグをページ内に複数使ってもいいかと迷う人も多いと思いますが、仕様的には問題ないです。

ただ、余程の理由がない場合は、1つに絞るのが良いでしょう。

フロー・コンテンツ

次に、主なフローコンテンツを紹介していきます。

pre

preタグは、整形済みテキストです。

改行をそのまま保って出力するので、アスキーアートなどに使われます。

ol

olタグは、順序に意味のあるリストになります。

li要素のみを小要素に持てます。

属性としては、次の3つがあります。

1.reversed

これを設定することで、リストマーカーの順序を逆にできます。

2.start
最初のリストマーカーを指定できます。

3.type
リストマーカーの種類を指定できます。

ul

ulタグは、順序に意味のないリストになります。

こちらも、li要素のみを小要素に持てます。

type属性でリストマーカーを変更できます。

li

リストの子要素として使われます。

フロー・コンテンツになるので、ほとんどのタグを子要素に置けます。

p

こちらは、1つの段落を意味します。

ただ、論理的なまとまりにする必要はないです。

こちらのタグは、フレージング・コンテンツだけを子要素に持てます。

dl,dt,dd

こちら3つのタグを使うことで、名前と要素からなるデータのまとまりを表すことができます。

dlタグは、dtタグとddタグだけを子要素に持てます。

dtタグとddタグは、一般的なフロー・コンテンツになります。

figure

文章から独立してる図表や、画像などを表現します。

使うかどうか迷う場合も多いですが、「文章から切り離しても内容が成立するかどうか」で判断すればOKです。

figcapitionタグを入れることでキャプションを追加できますが、このタグは先頭か末尾に入れる必要があります。

main

このタグは、メインのコンテンツを表します。

原則、bodyタグの直下におく必要があります。

また、置けるのはHTML1ページに1つとなっています。

div

divタグは、特別な意味は持ちません。

基本的に、idやクラスを持たせるためなどに使います。

他に適切なタグがある場合は、そちらを使うべきです。

例えば、セクションをdivを使って分けているサイトがよくありますが、この使い方は間違いです。

テーブル

次にテーブルについて解説していきます。

table/thead/tbody/tfoot

tableタグは、thead/tbody/tfootタグしか入れられないです。

tbodyは複数設置が可能です。省略した場合も勝手にDOMに追加されます。

これら3つのタグは子要素にtrタグしか持てないです。

tr

テーブルの列を表します。

子要素に持てるのは、th/tdタグのみです。

th/td

th,tdタグはフロー・コンテンツになりますが、セクショニングコンテンツや見出しを入れることはできないです。

rowspan,colspan属性で、複数行にまたがる要素を作れます。

また、captionタグとの併用もできます。

col/colgroup

colタグで縦列にスタイルを当てられます。

colgroupタグで入れ子にするのが一般的ですが、省略しても勝手にDOMに追加されます。

 <table>
    <colgroup>
      <col span="1" style="background-color: pink;">
      <col span="1" style="background-color: skyblue;">
      </colgroup>      
      <tr>
        <th>タイトル</th>
        <th>タイトル2</th>
      </tr>
      <tr>
        <td>要素</td>
        <td>要素2</td>
      </tr>
 </table>

フレージング・コンテンツ

こちらはテキスト自体をマークアップためのタグになります。

a

リンクを形成するためのタグです。

こちらのタグはややこしいですが、トランスペアレント・コンテンツと言います。

これは、親の性質を受け継ぐコンテンツになります。

要は、親がフレージングコンテンツだけの場合はフレージングコンテンツとして扱い、親がフロー・コンテンツの場合はフロー・コンテンツとして扱います。

また、aタグの子要素にインタラクティブ・コンテンツを置くことはできないです。

href属性

href属性でURLを指定できますが、必須ではないです。

download属性

download属性を付与することで、ファイルダウンロードのリンクを作成することもできます。

target属性

target属性も様々な使い道がありますが、主に使われる「_blank」だけ覚えていればOKです。

ちなみに、アクセシビリティの観点から見て、リンクテキストは内容を予測できるものにするべきとされています。

em

emタグは、強調を表します。

strong

strongタグは、重要性・深刻性・急用性を表します。

なので、文字を強調したいためだけに使うのは間違いです。

small

smallタグは、細い説明などを表します。

s

sタグは、今はもう正確で無くなった情報を表します。

cite

citeタグは、作品のタイトルを表すときに使います。

q

qタグは、引用されたフレージング・コンテンツに使います。

time

time、日付をマシンリーダーブルにするタグです。

datetime属性を使って、形式を指定できます。

data

日付以外のデータをマシンリーダブルにしたい場合は、dataタグを使います。

code

codeタグはプログラミングコードを表します。

preタグとの組み合わせがよく使われます。

sup/sub

sup要素、sub要素は、上付き文字と下付き文字を表します。

span

spanタグは、特別な意味を持たないです。

主に、スタイリングやidをつけるために使われます。

なので適切なタグがある場合は、そちらを使うべきです。

br

br要素は改行したい時に使います。

多用すべきではなく、意味的な区切りな場合は適切なタグを使用するべきです。

個人的に不要と思ってるタグ

異論もあるともいますが、以下は個人的にあまり使わなくていいと思っています。

dfn、abbr,var,samp,kbd,ruby

dfn、abbr,var,samp,kbdタグは、わざわざ明示する必要性を感じないです。

ルビ関連のタグは対応してないブラウザも多いので、積極的に使う必要性はないです。

ただ、アクセシビリティを高めたい場合は、これらを設定するのもありです。

i,bdi,bdo

i,bdi,bdoタグは、日本語で使う必要性がないです。

いつもと違った自然言語を使うときにだけ意識すれば良いでしょう。

b,u,mark

b,u,mark要素は他に適切なタグがあるはずなので、使う機会がないはずです。

例えば、emタグやstrongタグ、CSSを使えば十分だと思います。

wbr

このタグを使うことで、改行の位置を操作できます。

ただ、CSSで指定すれば良い気がします。

アクセシビリティを高める効果がなくもないので、導入するのもなしではないかと思います。

エンベデッド・コンテンツ

次に、エンベデッド・コンテンツについて解説してきます。

これは、文章に他のリソースのデータなどを埋め込むときなどに使います。

フロー・コンテンツや、フレージング・コンテンツの子要素として使用することができます。

img

こちらは画像の表示に使います。

loading属性で、遅延読み込みを操作できます。

alt属性が空の場合は、装飾の画像として扱われます。

また、secret属性でviewportに合わせた画像の表示も可能です。

iframe

iframeタグは、別ページのwebコンテンツを埋め込めます。

例えば、YouTube動画の埋め込みなどによく使われます。

属性によって様々な設定が可能ですが、長くなるので割愛します。

video/autio

動画や音声を埋め込めます。

これらはそれぞれフォールバックが可能です。

複数コンテンツをフォールバックさせたい場合は、sourceタグを一緒に使います。

また、trackタグで字幕の追加もできます。

map

map要素というのもありますが、あまり使わないと思うので頭の片隅置いておけばOKです。

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

次に、インタラクティブ・コンテンツを紹介していきます。

こちらは、ユーザーとのやり取りが発生するコンテンツになります。

details/summary

details/summaryタグを使うことで、アコーディオンを実装することができます。

detailsタグは、必ず子要素の冒頭にsummaryタグ1つを持つ必要があります。

それ以降は、フロー・コンテンツを入れることができます。

detailsタグは、セクショニング・ルートを作成します。

summaryタグはフレージング・コンテンツですが、見出しなどを入れることはできます。

開閉はopen属性で操作できます。

dialog

ダイアログを表示することができます。

また、formタグと組み合わせた使い方もすることができます。

このタグもセクショニング・ルートを作成します。

こちらも開閉はopen属性で操作できます。

フォーム

HTMLには、フォームという機能があります。

これは、ユーザーが入力した内容をサーバー側に送る処理になります。

この機能についても解説していきます。

form

formタグはフロー・コンテンツですが、formの入れ子はできないです。

action属性で、送り先のURLを指定できます。

また、methodで処理内容を指定できます。

methodの説明は、次の通りです。

get	post	dialog
HTTPのGETメソッドを実行します	HTTPのPOSTメソッドを実行します	実行と同時にdialogが閉じられます。この処理の場合、データはサーバーに送られません。

label

こちらは、フォームのインプットにラベルをつけるためのタグになります。

入れ子にするか、for属性で対象のidを指定することで、対象のインプットと紐づけることができます

input

inputタグは、フォームで送信する情報を入力するためのタグになります。

type属性で、入力内容を指定できます。

適切なtypeを設定することで、適切なUIが実現できます。

具体的な説明は次の通りです。

text:テキスト
search:検索用のテキスト
tel:電話番号
url:URL
email:email
password:パスワード
時刻(datetimeなど):時刻
number:数字
color:カラー
checkbox:on/offのチェックボックス
radio:ラジオボタン
file:ファイル

また、指定できる属性は次の通りです。

maxLength:最大の文字数
minLength:最小の文字数
max:数字などの最大値
min:数字などの最小値
readonly:ユーザーが変更できない内容
diabled:ユーザーが操作できない内容(trueだと送信されない)
required:必須項目かどうか
pattern:正規表現でパターンを指定できる
name:JSなどでデータを読み取る際の目印

Select

選択肢から選ぶことのできるインプット要素になります。

optionタグと組み合わせて使います。

multiple属性を指定した場合は、複数選択が可能になります。

size属性で、表示するサイズを指定できます。

button

主に、フォームの実行で使用されます。

type属性で、次の3つを指定することができます。

submit	reset	button
フォームの実行	フォームのリセット	何も起きない。JSのイベントと組み合わせて使う

datalist

インプットタグの入力補完などに使用できます。

<label>
     好きな果物は？
    <input type="text" list="fruits">
    <datalist id="fruits">
      <option>りんご</option>
      <option>バナナ</option>
    </datalist>
 </label>

textarea

複数行のテキストインプットとして使用できます。

legend+fieldset

インプット要素をグループ化することができます。

また、fieldsetタグはセクショニング・ルートを作ります。

<fieldset>
    <legend>データ1</legend>
    <p>名前<input type="text" name="name1" size="10"></p>
    <p>住所<input type="text" name="address1" size="30"></p>
 </fieldset>