Web

HTML の基礎

投稿日:2017年6月16日 更新日:

HTML の各タグに関する情報を提供します。主に HTML5 の情報を扱います。

(HTML5の仕様書である HTML Standard を翻訳している部分も多くあります)

後半では、タグ毎に使い方などを書いていくつもりですが、まだ途中です。

目次

1. HTMLの仕様となる文書

現在、WHATWG というコミュニティーと W3Cという組織がHTMLの仕様を公開していますが、WHATWG が公開している HTML Standard が主流のようです。

HTML Standard には バージョンがなく常に更新されていきます。最近のウェブブラウザもバージョンという考え方は薄れてきていて、バックグラウンドで自動的に更新されていきますが、これは HTMLの仕様と同じ更新方法であるといえます。

この更新方法に関しては、以下のページで詳しく説明されています。

2. コンテンツモデル と カテゴリー

HTML 要素(<p>, <div> など)は内容(コンテンツ)を持っています。
例として、p 要素で説明しますと、以下のように <p></p> で囲まれた部分がコンテンツです。

<p> ここが p の持つコンテンツ(内容)です。 </p>

HTML5 では、コンテンツの性質をいくつかの種類にカテゴリ分けしています。1つの要素が複数のカテゴリに属していることもあります。

コンテンツは以下のカテゴリーに分類されます。

  • メタデータ・コンテンツ(Metadata content)
  • フロー・コンテンツ(Flow content)
  • セクショニング・コンテンツ(Sectioning content)
  • 見出しコンテンツ(Heading content)
  • フレージング・コンテンツ(Phrasing content)
  • 埋め込みコンテンツ(Embedded content)
  • インタラクティブ・コンテンツ(Interactive content)
カテゴリーの関連図

参考

以下、各コンテンツについて説明します。

1. メタデータ・コンテンツ(Metadata content)

以下の性質のどれかを持つコンテンツです。

  • そのコンテンツ以外の部分の見栄えや振る舞いを定める。
  • その文書と他の文書との関係を定める。
  • その他のメタ情報を定める

このコンテンツに当てはまる要素

  • base, link, meta, noscript, script, style, template, title

参考

2. フロー・コンテンツ(Flow content)

body 内で使用される要素のほとんどは、フロー・コンテンツに分類されます。

このコンテンツに当てはまる要素

  • a, abbr, address, area ( map 要素の子孫である場合 ), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, details, dfn, dialog, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, label, link ( body 内で許可されている場合 ), main, map, mark, mathml math, menu, meta, meter, nav, noscript, object, ol, output, p, picture, pre, progress, q, ruby, s, samp, script, section, select, slot, small, span, strong, sub, sup, svg svg, table, template, textarea, time, u, ul, var, video, wbr, 自立型カスタム要素, text

mathmlsvg は名前空間です。
text は、「何もない」もしくは「Text ノード」を表します。

参考

3. セクショニング・コンテンツ(Sectioning content)

見出しとフッターの適用範囲を定義するコンテンツです。

それぞれのセクショニング・コンテンツ要素は、潜在的に「見出し」と「アウトライン」を持ちます(「アウトライン」とは、階層構造になっているセクションのことです)。

このコンテンツに当てはまる要素

  • article, aside, nav, section

参考

4. セクショニングルート(sectioning roots)

これとは別に、 セクショニングルート(sectioning roots)と呼ばれる要素もあります。
こちらの要素もアウトラインを持ちますが、その内容は「外部の文書である」という扱いになります。

セクショニングルートに当てはまる要素

  • blockquote, body, details, dialog, fieldset, figure, td

参考

5. 見出しコンテンツ(Heading content)

セクションの見出しを定義するコンテンツです。セクショニング・コンテンツを使って明示的に記述する場合と見出しコンテンツ自身により暗黙的に記述する場合があります。

このコンテンツに当てはまる要素

  • h1, h2, h3, h4, h5, h6, hgroup

参考

6. フレージング・コンテンツ(Phrasing content)

フレージング・コンテンツは、文書におけるテキスト部分、または段落内でテキストを表す要素です。フレージング・コンテンツが続くと段落になります。

フレージング・コンテンツに分類されるほとんどの要素は、フレージング・コンテンツしか含むことができません。

このコンテンツに当てはまる要素

  • a, abbr, area ( map 要素の子孫である場合 ), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, link ( body 内で許可されている場合 ), map, mark, mathml math, metaitemprop属性がある場合 ), meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, slot, small, span, strong, sub, sup, svg svg, template, textarea, time, u, var, video, wbr, 自立型カスタム要素, text

mathmlsvg は名前空間です。
text は、「何もない」もしくは「Text ノード」を表します。

参考

7. 埋め込みコンテンツ(Embedded content)

以下の性質のどちらかを持つコンテンツです。

  • 他のリソースを文書にインポートする
  • 他の名前空間からきたコンテンツを文書に挿入する

このコンテンツに当てはまる要素

  • audio, canvas, embed, iframe, img, mathml <math>, object, picture, svg <svg>, video

MathMLSVG は名前空間です。

参考

8. インタラクティブ・コンテンツ(Interactive content)

ユーザーとのやり取りを特に意図したコンテンツです。

また、`tabindex` 属性を付けることによって、どんな要素も インタラクティブ・コンテンツにすることができます。

このコンテンツに当てはまる要素

  • a ( href 属性があった場合 ), audio ( controls 属性があった場合 ), button, details, embed, iframe, img ( usemap 属性があった場合 ), input ( type 属性が Hidden 状態でない場合), label, select, textarea, video ( controls 属性があった場合 )

参考

9. まとめ図

各コンテントと要素との関係がおおまかに分かるように図にまとめてみました。

※ 要素に対して条件付きで当てはまるコンテンツがある場合は、現実的にありそうな条件であれば当てはまるものとみなして書いています(あくまで参考です)。

コンテントモデルと各要素

参考

3. HTML の要素

各要素についての説明です。

執筆中

以下の表を利用して説明します。

カテゴリー その要素が属するカテゴリーです。
使用できる場所 その要素を置くことのできる場所です。
コンテンツ その要素の中に配置することのできるコンテンツです。

1. ルート要素

参考

html 要素

2. メタデータ(Document metadata)

参考

head 要素

カテゴリー なし
使用できる場所 html 要素の1つ目の要素として
コンテンツ ドキュメントが iframe 要素の srcdoc 属性で指定されたドキュメントである場合、またはタイトル情報が上位プロトコルから利用可能な場合: メタデータ・コンテンツの0個以上の要素。その中で title 要素は2つ以上ありません。base 要素も2つ以上ありません。
そうでなければ: メタデータ・コンテンツの1つ以上の要素。そのうち title 要素が1つだけあり、base 要素は2つ以上ありません。
  • head 要素は、文書のメタデータの集合を表します。

コードサンプル

<!doctype html>
<html>
 <head>
  <title>A document with a short head</title>
 </head>
 <body>
 ...
<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <META CHARSET="UTF-8">
  <BASE HREF="http://www.example.com/">
  <TITLE>An application with a long head</TITLE>
  <LINK REL="STYLESHEET" HREF="default.css">
  <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
  <SCRIPT SRC="support.js"></SCRIPT>
  <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
 </HEAD>
 <BODY>
 ...

title 要素

base 要素

  • base 要素は使わない方がよい。

link 要素

meta 要素

style 要素

3. セクション(Sections)

参考

body 要素

article 要素

カテゴリー フロー・コンテンツ, セクショニング・コンテンツ, パルパブル・コンテンツ
使用できる場所 フロー・コンテンツが期待される場所
コンテンツ フロー・コンテンツ

section 要素

  • h1 から h6 のどれかを含むことが推奨される。

参考

nav 要素

aside 要素

h1, h2, h3, h4, h5, h6 要素

header 要素

footer 要素

address 要素

4. グループ化 コンテンツ(Grouping content)

参考

p 要素

hr 要素

pre 要素

blockquote 要素

サンプルコード

<blockquote>
  <p>For writing maintainable and scalable HTML documents.</p>

  <footer>— HTML Best Practices</footer>
</blockquote>

ol 要素

ul 要素

li 要素

dl 要素

dt 要素

dd 要素

figure 要素

figcaption 要素

div 要素

main 要素

5. テキストレベル セマンティクス(Text-level semantics)

参考

a 要素

em 要素

カテゴリー フロー・コンテンツ, フレージング・コンテンツ, パルパブル・コンテンツ
使用できる場所 フレージング・コンテンツが期待される場所
コンテンツ フレージング・コンテンツ
  • 重要」ではなく「強調」を表す。
  • 入れ子にすることで、強調の度合いを強めることができる。
  • 強調」というのは、どこを強調するかで文章の意味を変えてしまう。

strong 要素

カテゴリー フロー・コンテンツ, フレージング・コンテンツ, パルパブル・コンテンツ
使用できる場所 フレージング・コンテンツが期待される場所
コンテンツ フレージング・コンテンツ
  • 強調」ではなく「重要」を表す。
  • ここでの「重要」とは、英単語で言うと importance(重要), seriousness(深刻), urgency(緊急) といった意味である。

small 要素

s 要素

cite 要素

q 要素

dfn 要素

abbr 要素

data 要素

time 要素

code 要素

var 要素

samp 要素

kbd 要素

sub, sup 要素

i 要素

b 要素

u 要素

mark 要素

ruby 要素

rb 要素

rt 要素

rtc 要素

rp 要素

bdi 要素

bdo 要素

span 要素

br 要素

wbr 要素

6. リンク (Links)

参考

a 要素

area 要素

7. 編集(Edits)

参考

ins 要素

del 要素

8. 埋め込みコンテンツ(Embedded content)

参考

picture 要素

  • ブラウザによってサポートされていない形式のファイルを指定する場合に、異なる形式の代替えリソースと合わせて指定することができる(source 要素を使う)。
  • スマートフォンや Retinaディスプレイなど高解像度のディスプレイに向けて、ピクセル密度記述子を使った画像の指示を行いたい場合は、代わりに srcset 属性をセットした img 要素を使用します。

source 要素

主に picture 要素の中で使用する。

画面幅などに応じて、表示する画像を指定することができる。

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The wolf runs through the snow.">
</picture>

img 要素

ドキュメント: 4.8.3 The img element – HTML Standard

Srcset 属性

  • 画面の解像度に応じて、表示する画像を指定することができる。

<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x,
             /uploads/200-marie-lloyd.jpg 2x"
     alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

decoding 属性

  • その画像を同期で読み込むのか、非同期で読み込むのかを指定することができる。

iframe 要素

ドキュメント: 4.8.5 The iframe element

srcdoc 属性

  • iframe 内に表示するコンテンツを記述する。

embed 要素

object 要素

param 要素

video 要素

audio 要素

track 要素

map 要素

area 要素

9. 表形式データ(Tabular data)

参考

table 要素

caption 要素

colgroup 要素

col 要素

tbody 要素

thead 要素

tfoot 要素

tr 要素

td 要素

th 要素

10. フォーム(Forms)

参考

form 要素

label 要素

input 要素

button 要素

select 要素

datalist 要素

optgroup 要素

option 要素

textarea 要素

keygen 要素

output 要素

progress 要素

meter 要素

fieldset 要素

legend 要素

11. インタラクティブ要素(Interactive elements)

参考

details 要素

summary 要素

dialog 要素

12. スクリプト(Scripting)

参考

script 要素

nonscript 要素

template 要素

canvas 要素

13. その他

mathml math 要素

svg svg 要素

4. HTMLの書き方

参考になるページ

5. 参照

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

Notification API のポイント解説

目次1. はじめにNotification API が行うこと補足2. Notification API の使い方(1) デスクトップ通知が許可されているかどうかを取得する。(2) ユーザーにデスクト …

インターネット上での検索方法

Google 画像検索を表すURL http://images.google.com/search?tbm=isch&q=検索キーワード 執筆中

Web

Gmail でよく使うキーボードショートカット

Gmail でよく使うキーボードショートカットを紹介します。 1. Gmail のキーボードショートカットを有効にする手順 まず、Gmail でキーボードショートカットを利用するには、設定で有効にする …

Glitch

ブラウザだけで完結するウェブアプリ作成環境 Glitch

ブラウザだけで完結するウェブアプリ作成環境 Glitch を紹介します。

ただ今、本ウェブサイトを改造しています

現在、このウェブサイトを改造しています。 今回、WordPress の「Attitude」というテーマを使ってみたのですが、評判が良いだけあって使いやすいです。デザインがすっきりしていてシンプルなのも …