HTML タグの基本と使い方

HTML とは

HTML とは、HyperText Markup Language の略で、Web ページを作るためのもっとも基本的なマークアップ言語のひとつです。インターネットで公開されている Web ページ の多くは HTML をベースに作成されています。

HTML の書き方

HTMLを始めるためには、テキストエディターとブラウザがあれば、すぐに始めることができます。クイックスタートとして下記のコードを新規のテキストにコピーし、hello.html の名前で保存してからブラウザで開いてみて下さい。保存する際は、文字コードに UTF-8 を忘れずに指定しましょう。

<!DOCTYPE html>
<html lang=ja>

  <!-- head部 -->
  <head>
    <title> 初めてのHTML </title>
    <meta charset="UTF-8">
  </head>

  <!-- body部 -->
  <body>
    <h1> 初めてのHTML </h1>
    <p> Hello, World Wide Web. </p>
  </body>

</html>
HTMLでHello, World (Wide Web)

開始タグと終了タグ

HTML は、英単語が 2 つの不等号 <, > で囲まれた タグ と呼ばれる要素で構成されています。タグには 開始タグ終了タグがあり、対になっています。例えば、html タグの開始タグは <html>で、終了タグは </html> となります。終了タグには、開始タグの名前の前に / を入れて記述します。タグは、開始タグと終了タグに囲まれた範囲において、ドキュメントの内容をどのように表示するかを決定します。

ただし、meta タグ等の一部のタグは終了タグがありません。その場合、終了タグは省略、または <meta ... /> のように、後方に / を付けて区別する書き方があります。後方に / を付けて区別する書き方は、XHTML の記述方法であるため、HTML4.01 では非推奨の記述方法でしたが、HTML 5 からは正しい文法となりました。

HTMLの構造

HTML の構造は、<html> で始まり、</html> で終わります。html タグは、ドキュメント全体が HTML で書かれていることをブラウザに伝えています。ブラウザは、ドキュメントを HTML として読み込み、レンダリングを行うことで正しく表示されます。

HTML ドキュメントは、<head>, <body> の 2 つの主要な構造で成り立っています。head 部にはドキュメントに関する情報を記述し、body 部にはブラウザに表示したい内容を記述します。

コメント

HTML ドキュメントはタグが多く埋め込まれているため、コメントを付けた方が読みやすくなります。コメントは、特殊なタグ <!--, --> で囲まれた範囲に記述します。コメントはドキュメントの一部ですが、ブラウザ上には表示されません。ただし、HTML ドキュメントのソースコードは誰でも見ることができるため、コメントに重要な情報は記述するべきではありません。

テキスト

タグでもコメントでもないものはテキストデータとして扱われ、ブラウザによって表示されます。HTML は、テキスト主体のドキュメントに対して定義付けを行うための言語であるため、テキスト関連のタグがもっとも種類が豊富です。マルチメディア (画像、音楽、動画) を定義するタグも存在しますが、HTML にとっては付加的なタグになります。

テキストの装飾

テキストの文字には、サイズ、色、書体など様々な装飾を施すことが可能です。HTML の本質はテキストの定義付けとなるため、テキストの装飾は CSS (Cascading Style Sheets) で行います。CSS は、テキストの定義と装飾を分離するための仕様となります。

<!DOCTYPE html>
<html lang=ja>

  <!-- head部 -->
  <head>
    <title> 初めてのHTML </title>
    <meta charset="UTF-8">
    <!-- CSS部 -->
    <style> p { color:blue; } </style>
  </head>

  <!-- body部 -->
  <body>
    <h1> 初めてのHTML </h1>
    <p> Hello, World Wide Web. </p>
  </body>

</html>
CSSでpタグの文字色を青色に装飾

タグと属性

HTMLは、ドキュメントにタグと呼ばれるマークアップを埋め込む言語です。マークアップとは、指定した範囲の文章を見出し段落といった意味付けを行うマーキングを意味します。また、タグは一般的な英単語、もしくはそれらを省略した頭文字で表記されます。例えば、<p> タグは Paragraph の頭文字で、段落を表します。

すべてのタグは、タグの名前と省略可能な属性のリストからなり、それらが 2 つの不等号 <, > の中に記述されます。属性は、1つ以上のスペース、タブ、改行で区切られ、そのタグの振る舞いを指定したり、変更したりするために使われます。タグに属性を付与する場合は、タグの名前の後ろに属性の名前を記述し、値を指定する場合は = で区切り、"' で囲みます。

<!-- pタグにstyle属性を付与 -->
<p style="color:blue;"> Hello, World Wide Web. </p>
pタグにstyle属性を付与

タグのネスト

タグは、ネスト構造にすることができます。ネスト構造とは、ロシアのマトリョーシカ人形のように入れ子になっている構造のことです。既にタグによって制御されている範囲に対して、別のタグをネストすることで複合的な効果を持たせることができます。

<!-- タグのネストによる複合的な効果 -->
<a href="http://murashun.jp/"> リンクの一部を<b>太字</b>にします </a>
タグのネストによる複合的な効果

上記の例では、テキストの一部は <b> タグにより太字になっていますが、同時に <a> タグによりアンカーの一部でもあります。ただし、タグがネストしている場合、終了タグの順番に注意を払う必要があります。終了タグは、最後の開始タグから順番に終了し、最初に開始されたタグが最後に終了する形でなければなりません。

<!-- 正しいネスト構造 -->
<a href="http://murashun.jp/"> <b>正しい太字のリンク</b> </a>

<!-- 誤ったネスト構造 -->
<a href="http://murashun.jp/"> <b>誤った太字のリンク</a> </b>
ネスト構造の終了タグの順番

多くのブラウザは、誤ったネスト構造の例でも問題なく動作します。しかし不適切なネストは、HTMLドキュメントが大きくなるにつれて表示が崩れたり、動作がエラーとなる可能性が高まります。HTMLドキュメントが大きい場合、修正箇所の特定が困難になったり、修正範囲が大きくなったりしますので、シンプルな構造を心がけ、不適切なネストは避けましょう。

終了タグを持たないタグ

HTMLには終了タグを持たないタグがいくつかあります。例えば、改行を行う <br>タグは終了タグを必要としません。これらの終了タグを持たないタグは、空要素と呼ばれます。空要素であるタグは、以下の通りです。

<area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>

終了タグを省略できるタグ

空要素以外のタグは、基本的に開始タグと終了タグで囲みます。しかし、終了タグが省略することが認められているタグがいくつかあります。終了タグを省略した場合、次の開始タグの前に、自動的に終了タグが入ります。終了タグが認められているタグは、以下の通りです。

<li>, <dt>, <dd>, <p>, <tr>, <td>, <th>, <rt>, <rp>, <optgroup>, <option>, <thread>, <tfoot>

開始タグも終了タグも省略できるタグ

もはや意味不明ですが、開始タグも終了タグも省略できるタグがあります。タグが省略されてもブラウザが省略されたものと判断し、適切に扱われます。開始タグも終了タグも省略できるタグは、以下の通りです。

<html>, <head>, <body>, <tbody>, <colgroup>

上記を踏まえた上で、以下のようにHTMLドキュメントを書くこともできます。

<!DOCTYPE html>
<title> 必要最低限のタグ </title>
必要最低限のテキスト
文法的には正しい必要最低限のタグ

DOCTYPE 宣言

<!DOCTYPE html>
<html lang=ja>

  <!-- head部 -->
  <head>
    <title> 初めてのHTML </title>
    <meta charset="UTF-8">
  </head>

  <!-- body部 -->
  <body>
    <h1> 初めてのHTML </h1>
    <p> Hello, World Wide Web. </p>
  </body>

</html>
DOCTYPE 宣言

DOCTYPE 宣言(文書型宣言)とは、1行目に書かれている <!DOCTYPE html> を指します。DOCTYPE 宣言は、ドキュメントと文書型定義 (Document Type Definition:DTD) を結びつけるための命令です。この命令は、ブラウザに読み込まれたページが HTML ドキュメントであること、HTML ドキュメントがどの DTD に従っているかを伝えています。DTD の種類によって、後述するブラウザの表示モードが決定されます。

HTML 4.01 における 3 種類の DTD
DTDの種類定義
Strict非推奨の要素・属性・フレームが使用できない
Transitional非推奨の要素・属性は使用できるが、フレームは使用できない
Frameset非推奨の要素・属性・フレームが使用できる
<!-- HTML 5 -->
<!DOCTYPE html>

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

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

<!-- HTML4.01 Frameset -->
<!DOCTYPE HTML 
  PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPE 宣言

HTML5 からは DTD の指定が省略され、<!DOCTYPE html> だけになりました。HTML5 の DOCTYPE 宣言では、ブラウザの表示モードはすべて標準モードとなります。

DOCTYPE スイッチ機能と表示モード

DOCTYPE 宣言は、ブラウザの表示モードを切り替えるスイッチとして機能します。ブラウザの表示モードは標準モード互換モードの 2 種類あります。ブラウザは DOCTYPE 宣言を参照し、どちらの表示モードとするかを決定します。

ブラウザの表示モード
表示モード表示モードの説明
標準モード CSS 標準に準拠してページのレンダリングを行うモード。CSS が正しく解釈されるため、表示レイアウトが崩れにくい。
互換モード 過去のブラウザとの表示互換を保つレンダリングを行うモード。CSS が独自解釈されるため、表示レイアウトが崩れやすい。

HTML タグの一覧

根本となる要素 - The root element

html
html 要素は、HTML/XHTML 文書のルート要素です。html 要素には、lang 属性を指定して、その文書で使用されている言語の種類 (日本語は ja、英語は en など) を示すことが推奨されています。

文書のメタデータ - Document metadata

head
head 要素は、HTML/XHTML 文書自身に関する情報 (メタデータ) を格納するための要素です。
title
title 要素は、その要素内容が HTML 文書のタイトル、または名称となる要素です。
base
base 要素は、文書中にある相対 URL の基準とする URL と、リンクのデフォルトの表示先 (ウィンドウ、タブ、インラインフレームなど) を設定できる要素です。前者は href 属性で、後者は target 属性で指定します。base 要素を使用する際は、これらの属性のいずれか一方、または両方を必ず指定する必要があります。
link
link 要素は、現在の HTML 文書と他のファイルを関連付ける要素です。具体的には関連付けるファイルの URL を href 属性に指定し、rel 属性に指定するキーワードでそのファイルが何であるのかを示します。HTML5 以降では、rel 属性の値が stylesheet のときに type 属性を省略すると、デフォルト値の text/css が適用されます。
meta
meta 要素は、title 要素link 要素base 要素style 要素script 要素では表現できない様々な種類のメタデータ (文書自身に関する情報) を示すための要素です。meta 要素には、charset 属性・name 属性・http-equiv 属性のうち、いずれかひとつを必ず指定する必要があります。このうち、文字コードを指定する charset 属性は単独で指定できますが、name 属性、および http-equiv 属性は必ず content 属性とセットで指定する必要があります。
style
style 要素は、その文書に適用するスタイル情報 (スタイルシート) を書き込むための要素です。

セクション - Sections

body
body 要素は、HTML/XHTML 文書のコンテンツ (ブラウザで表示される内容) を格納するための要素です。
article
article 要素は、その範囲内に独立した完結しているひとつの記事 (コンテンツ) が含まれていることを示す要素です。article 要素内に複数のセクションが存在する場合は、section 要素を子要素として配置します。
section
section 要素は、その範囲が一般的なセクションであることを示す要素です。一般的にセクション内には h1-h6 要素を子要素として配置し、主題を示して各セクションを識別するべきです。また、複数の section 要素を、ひとつの記事としてまとめる場合には親要素として article 要素を配置します。
nav
nav 要素は、要素内容がナビゲーションのリンクであるセクションを示す要素です。ただし、フッター領域などにあるリンクのリスト全体を nav 要素でマークアップする必要はありません。nav 要素は、主要なナビゲーションに対してのみ使用するべきです。
aside
aside 要素は、その配下に含まれるコンテンツがメインコンテンツから切り離されるコンテンツであることを示す要素です。例えば、サイドバー、広告、補足記事、参考情報、ナビゲーションなどです。
h1-h6
h1h2h3h4h5h6 要素は、その要素内容が見出し (heading) であることを示す要素です。セクションが導入された HTML5 からはセクション、またはセクショニングルートの見出しを表す要素となっています。要素名に含まれる数字は見出しの階層を表しています。h1 がもっとも上位の階層の見出し (大見出し) で、h6 がもっとも下位の階層の見出しとなります。
header
header 要素は、それを含むもっとも近いセクション、またはセクショニングルートのヘッダーであることを示す要素です。セクショニングルートである body 要素がもっとも近い場合、header 要素は文書全体のヘッダーになります。多くの場合、header 要素内には、セクションの見出し (h1-h6 要素) を配置しますが必須ではありません。header 要素の要素内容としては、ロゴやナビゲーション、検索フォーム、セクションの目次などを含むことが可能です。
footer
footer 要素は、それを含むもっとも近いセクション、またはセクショニングルートのフッターであることを示す要素です。セクショニングルートである body 要素がもっとも近い場合、footer 要素は文書全体のフッターになります。footer 要素の要素内容としては、一般的に著作権情報や関連文書へのリンク、問い合わせ先などが含まれます。セクションの内容が索引や使用許諾契約、奥付け、巻末資料などの場合、セクションの内容を footer 要素に含むことが可能です。

コンテンツの分類 - Grouping content

p
p 要素は、その内容がひとつの段落 (paragraph) であることを示す要素です。
address
address 要素は、その内容が問い合わせ先であることを示す要素です。article 要素に含まれている場合はセクションに関する問い合わせ先となり、そうでない場合は文書全体に関する問い合わせ先となります。address 要素の要素内容には、問い合わせ先以外の情報を含めるべきではありません。
hr
hr 要素は、HTML5 で要素の意味と役割が大きく変更された要素です。HTML4.01 や XHTML1.0 では、横罫線を表示させる要素でしたが、HTML5 からは主題の「変わり目」や「区切り」を表す要素となりました。ただし、セクションはそれ自身が内容の区切りを表すため、セクションを区切るために hr 要素を使用するべきではありません。hr 要素は段落レベルにおいての区切りとして用いるべきです。
pre
pre 要素は、その範囲のテキストが半角スペースやタブ、改行によって整形済み (preformatted) のブロックであることを示す要素です。ブラウザでは、要素内容が整形されたとおりの状態で表示されるため、ソースコードの内容をそのまま掲載したい場合などに利用できます。ただし、ソースコードを掲載する場合は code 要素と組み合わせて使用します。
blockquote
blockquote 要素は、その内容が引用された文章であることを示す要素です。blockquote 要素は、引用文をブロックレベルの要素として扱いたいときに使用され、インラインレベルとして扱いたいときには q 要素を使用します。「出典」や「誰の言葉であるのか」などの情報を要素内容として含めることも可能です。その場合は footer 要素や、cite 要素の中に含める必要があります。
ol
ol 要素は、項目に順序性があるリストを表す要素です。各項目の行頭には自動的に連番が表示されます。ol 要素は、リストの全体をマークアップするために使用し、リスト内の各項目は li 要素としてマークアップします。
ul
ul 要素は、項目の順番を入れ替えても意味的には変わらないリストを表す要素です。ul 要素は、リストの全体をマークアップするために使用し、リスト内の各項目は li 要素としてマークアップします。
li
li 要素は、リストの1項目を表す要素です。
dl
dl 要素は、内部の各項目が dt 要素dd 要素のペア形式になっているタイプのリストを表す要素です。dt 要素dd 要素は、用語とその定義文、メタデータの名前と値、質問と解答など、何かしらのペア形式となっているものを表現するために使用できます。
dt
dt 要素は、dl 要素内において「用語」や「名前」の部分を表す要素です。dt 要素は、HTML4.01 と XHTML1.0 では「定義する用語」を表していましたが、HTML5 からは「定義」の意味が削除されています。そのため、HTML5 以降で「定義する用語」を表す場合には、dfn 要素を併用する必要があります。
dd
dd 要素は、dl 要素内において dt 要素に対応する内容 (説明文や定義文など) の部分を表す要素です。
figure
figure 要素は、図表を表すための要素です。要素内容としてはフローコンテンツならば何でも指定することが可能で、figcaption 要素を使ってキャプションを付けることができます。
figcaption
figcaption 要素は、figure 要素で表す図表のキャプション (見出しや説明文など) となる要素です。
main
main 要素は、その範囲が文書、またはアプリケーションの body 要素の内容におけるメインコンテンツであることを示す要素です。main 要素の重要な役割のひとつは、スクリーンリーダのような支援技術を使用しているユーザが各ページのメインコンテンツの前に含まれている内容を読み飛ばし、すぐにメインコンテンツの情報が得られるようにすることです。そのため、main 要素の要素内容にはサイトのロゴや検索フォーム、グローバルナビゲーション、著作権情報などの各ページで共通している内容は含めるべきではありません。
div
div 要素は、要素としてその内容が何であるかを一切示さない要素です。単純にタグで囲まれた範囲がひとつのブロックレベル要素になっていることだけを示します。div 要素は、他に適切な要素がない場合に使用することが推奨されます。

テキストの意味 - Text-level semantics

a
href 属性が指定されている場合、a 要素はその要素内容をラベルとするリンクになります。href 属性が指定されていない場合、a 要素はプレースホルダーになります。また、href 属性が指定されていない場合は、rel 属性、rev 属性、hreflang 属性、type 属性、target 属性、download 属性 は指定できません。
em
em 要素は、文章のその部分が強調されていることを示す要素です。HTML5 以降の em 要素は、ネストすることで強調の度合いを高めることが可能です。HTML5 より前の HTML/XHTML では em 要素よりも強い強調を表す場合は strong 要素を使用します。
strong
strong 要素は、HTML5 で要素の持つ意味と役割が大きく変更された要素です。HTML4.01 や XHTML1.0 では、em 要素よりもさらに強い強調を表す要素でしたが、HTML5 からは「重要であること (importance)」、「重大・深刻であること (seriousness)」、「緊急性があること (urgency)」のいずれかを強く示す要素となりました。そのため、HTML4.01 や XHTML1.0 の strong 要素は文章の意味合いが変化しますが、HTML5 以降の strong 要素は文章の意味合いが変化することはありません。strong 要素は、見出し・キャプション・段落の中で本当に重要な部分を区別できたり、ユーザが注視する必要があるコンテンツを示すために使用します。
small
small 要素は、HTML5 で要素の持つ意味と役割が大きく変更された要素です。HTML4.01 や XHTML1.0 では要素内容のテキストのフォントサイズを小さくするための要素でしたが、HTML5 からは補足情報や注記をマークアップするための要素になりました。そのため、HTML5 以降では Copyright (著作権) や、免責事項、警告、帰属、法的規制などを表記する際に使用されます。
s
s 要素は、HTML5 で要素の持つ意味と役割が大きく変更された要素です。HTML4.01 や XHTML1.0 では要素内容のテキストを取り消し線つきで表示させる要素でしたが、HTML5 からは「すでに正しい情報ではなくなってしまった部分」、または「すでに関係のない情報となってしまった部分」を表す要素となりました。
cite
cite 要素は、創作物の出典を表すための要素です。そのため、要素内容には作品の題名か作者の名前、または URL などを含める必要があります。作者の名前は、個人名でも団体名でもかまいません。
q
q 要素は、その内容が引用された文章であることを示す要素です。q 要素は、引用文をインライン (HTML5.1 では文章内コンテンツ) の要素として扱いたいときに使用され、ブロックレベルの要素として扱いたいときには blockquote 要素を使用します。q 要素の前後には、ブラウザが引用符を付けて表示することになっています。そのため、q 要素を使用する際、引用文の前後にはカッコや装飾記号で括るべきではありません。ブラウザで表示させる引用符の種類は CSS で変更可能であるため、装飾は CSS で指定を行うべきです。
dfn
dfn 要素は、その要素内容が定義の対象となっている用語であることを示す要素です。そのため、この要素を p 要素dl 要素、セクションなどの内部には dfn 要素で示された用語を定義する文章もセットで含まれている必要があります。
abbr
abbr 要素は、その要素内容が略語であることを示す要素です。省略していない状態の元の言葉を示したい場合は、title 属性を使用します。一般的な title 属性とは異なり、abbr 要素の title 属性の値には「省略していない状態の元の言葉」以外は含めるべきではありません。
ruby
テキストにルビ (ふりがな) を振るには、ルビを振る対象のテキストがわかるようにするだけでなく、ルビとして表示させるテキストを指定し、必要に応じてその他の関連要素も使用しなければなりません。ruby 要素は、そのようなルビに関連するテキストや要素全体を括る要素です。
rt
rt 要素は、ruby 要素内でルビ (ふりがな) として表示させるテキストを示すために使用します。
rp
rp 要素は、ブラウザがルビ (ふりがな) をサポートしていない場合に、ルビのテキストが ( ) 内に表示されるようにするために使用する要素です。rp 要素の要素内容としては文章内コンテンツを入れることができますが、この要素内容はルビに対応したブラウザではそのまま表示されます。そのため日本語の場合は、ルビとして表示させるテキスト全体の直前に <rp>(</rp> を配置し、直後に <rp>)</rp> を配置するのが一般的な使用方法です。
data
data 要素は、要素内容と一緒に「要素内容を機械可読形式にしたデータ」も提供するための要素です。機械可読形式のデータは、value 属性の値として指定します。value 属性は必ず指定しなければならず、その値は要素内容を機械可読形式にしたものでなければなりません。
time
time 要素は、「機械可読形式にした日付や時刻のデータ」を提供するための要素です。data 要素と似ていますが、time 要素の場合は機械可読形式で提供するデータが日付と時刻 (タイムゾーンなどを含む) に限定されています。また、time 要素の機械可読形式のデータは datatime 属性の値として指定できるだけでなく、datatime 属性を指定せずに要素内容として直接書き込むことも可能です。
code
code 要素は、その部分がコンピュータのコードの一部であることを示す要素です。プログラムのソースコードだけではなく、要素名やファイル名のようにコンピュータが認識可能な文字列全般に対して使用できます。
var
var 要素は、その部分が変数 (variable) であることを示す要素です。var 要素は、数式やプログラム内の変数に使用できる他、定数を表す識別子や関数パラメータ、通常の文の中でプレースホルダーとして使用されている文字列などにも使用できます。
samp
samp 要素は、その部分がコンピュータやプログラムによって出力されたものの引用やサンプルであることを示す要素です。
kbd
kbd 要素は、その部分がユーザによって入力される内容であることを示す要素です。一般的にはキーボードから入力する内容を示しますが、音声入力などの他の入力の場合でも使用できます。
sub
sub 要素は、その部分が下付き文字 (subscript) であることを示す要素です。sub 要素は、下付き文字で表記することが習慣となっている部分をマークアップするための要素です。sub 要素は、要素を使用しなければコンテンツの意味が変わるような部分に対してのみ使用するべきです。数式をマークアップする際は、MathML を使用することが推奨されますが、sup 要素sub 要素で行うことも認められています。
sup
sup 要素は、その部分が上付き文字 (superscript) であることを示す要素です。sup 要素は、上付き文字で表記することが習慣となっている部分をマークアップするための要素です。sup 要素は、要素を使用しなければコンテンツの意味が変わるような部分に対してのみ使用するべきです。数式をマークアップする際は、MathML を使用することが推奨されますが、sup 要素や sub 要素で行うことも認められています。
i
i 要素は、HTML5 で要素のもつ意味と役割が大きく変更された要素です。HTML4.01 や XHTML1.0 ではテキストをイタリック体で表示させるための要素でしたが、HTML5 からは文章全体の中で、その部分だけが異なる性質・状態のものであることを示す要素となりました。i 要素は、「学名」や「専門用語」などを表す場合に使用される他、部分的に異なる種類の言語が使われている部分 (例えば、英語の中にフランス語など) などを表す場合に使用されます。
b
b 要素は、HTML5 で要素のもつ意味と役割が大きく変更された要素です。HTML4.01 や XHTML1.0 ではテキストを太字で表示させるための要素でしたが、HTML5 からは実用的な意味で目立たせたほうが良いと思われる部分をマークアップする要素となりました。ただし、b 要素は strong 要素のように重要であることを示すわけでもなく、i 要素のようにテキストの性質・状態が異なることを示すわけでもありません。b 要素は、例えば概要説明における「キーワード」や、レビュー記事における「製品名」、記事の「リード文」などで使用されます。
u
u 要素は、HTML5 で要素のもつ意味と役割が大きく変更された要素です。HTML4.01 や XHTML1.0 では要素内容のテキストを下線付きで表示させるための要素でしたが、HTML5 からは「音声で読み上げた場合には気付かないが、表示上は明確に示されるテキスト以外のものによる注釈」の部分を示す要素となりました。HTML5 以降における u 要素の用途はごく限られており、中国語で固有名詞を示す場合や、スペルが間違っている箇所を示す場合などにほぼ限定されています。
mark
mark 要素は、本来そのテキストが持つものとは異なる状況や意図において、ある特定の部分に注目してもらうために目立つようにした部分であることを示す要素です。mark 要素で括られた範囲は、蛍光ペンで線を引いたように表示されます。
bdi
テキストの一部に文字表記の方向が逆のテキストを挿入すると、Unicode の双方向アルゴリズムによって挿入したテキストの前後の語順が変化してしまうことがあります。このようにならないようにするために、テキストの一部を Unicode の双方向アルゴリズムから分離・独立させて、前後のテキストに影響を与えないようにするのが bdi 要素の役割です。bdi 要素は、ユーザが入力したテキストをコンテンツの一部として表示させる場合などに役立ちます。
bdo
bdo 要素は、Unicode の双方向アルゴリズムを上書きして、要素内容の文字表記の方向 (「左から右」または「右から左」) を設定できる要素です。bdo 要素には、グローバル属性の dir 属性を必ず指定する必要があります。また、その際は値には auto ではなく ltr (left-to-right:左から右へ)、または rtl (right-to-left:右から左へ) のいずれかを指定する必要があります。
span
span 要素は、要素としてその内容が何であるかを一切示さない要素です。単純にタグで囲まれた範囲がひとつのインラインレベル要素になっていることだけを示します。span 要素は、他に適切な要素がない場合に使用することが推奨されます。
br
br 要素を配置すると、その位置で改行して表示されます。br 要素による改行は、詩や住所の表記など改行がコンテンツの一部である場合にのみ使用するべきです。
wbr
wbr 要素は、br 要素のように必ずその位置で改行されるわけではなく、文字列が表示領域の幅に収まらない場合に限り、その位置での改行 (折り返し) できるようにするための要素です。例えば、長い英単語や URL のような文字列は、それを表示できるだけの幅が確保できない場合でも途中では改行されずに、その領域をはみ出して表示されることがあります。そのようなことを避けるために、その文字列内の「改行しても良いと思われる位置」に挿入して、改行を可能にするのが wbr 要素の役割です。

挿入と削除 - Edits

ins
ins 要素は、編集の過程で文書に対して追加された部分を表すための要素です。
del
del 要素は、編集の過程で文書から削除された部分を表すための要素です。

コンテンツの埋め込み - Embedded content

picture
picture 要素は、出力対象とする機器のピクセル密度やビューポートのサイズなどブラウザが適切な画像を選択できるようにするために、複数の候補画像を内容として入れておける要素です。要素内容には、配下直後に source 要素を 0 個以上入れて、その後に img 要素を 1 個だけ入れます。(picture 要素に非対応の環境では、最後に配置した画像が表示されます。) 要素内容として入れた source 要素media 属性には、メディアクエリの ( ) 内で指定する条件がそのまま指定でき、最初に条件に合致した画像が表示されます。どの条件にも合致しない場合は、最後の img 要素の画像が使用されます。
source
source 要素は、出力先に合わせて用意した複数の候補データの中から最適なデータだけを読み込んで利用できるようにする際の候補となる個々のデータを指定する要素です。source 要素内で使用する場合と、audio 要素video 要素の内部で使用する場合とでは、指定可能な属性や指定方法が異なる点に注意してください。画像の候補データを指定する場合は、picture 要素の内部に source 要素を必要なだけ配置し、最後に img 要素をひとつ入れます。media 属性には、どの画像を読み込むかを判断するためのメディアクエリの条件を指定できます。また、media 属性を使用せずに type 属性で MIME タイプを示し、表示可能な形式の最初の画像を表示させることもできます。picture 要素の内部では、その他にも srcset 属性と sizes 属性が指定可能です。
img
img 要素は、表示させる画像とその代替テキスト (画像が利用できないときに代わりに使用するテキスト) を指定する要素です。
iframe
iframe 要素は、インラインフレーム (文書内でさらに別の文書を表示させる領域) となる要素です。要素内容は、この要素に未対応の環境およびインラインフレームを表示しない設定になっている環境でのみ表示されます。
embed
embed 要素は、主に HTML 以外で作成された外部アプリケーションやインタラクティブなコンテンツ (プラグインを使用するリソース) を組み込むための要素です。embed 要素は、空要素であるため、利用可能なプラグインが存在しなかった場合の代替コンテンツは指定できない点に注意してください。
object
object 要素は、様々な外部リソース (画像や別文書、プラグインを使用するデータなど) を HTML 文書に組み込むために使用します。組み込む外部リソースは、data 属性の値として指定します。object 要素を使用する際は、data 属性、または type 属性の少なくとも一方は必ず指定する必要があります。object 要素をネストして複数のデータ形式を用意しておくと、ブラウザが取扱可能なもっとも外側のデータだけが使用され、それよりも内部にある要素内容 (param 要素map 要素は除く) は無視される仕様になっています。
param
param 要素は、object 要素によって呼び出されるプラグインや Java アプレットにパラメータを渡すために使用する要素です。要素内容として、他の要素よりも前に配置する必要があります。
video
video 要素は、動画を再生させる要素です。字幕付きの音声ファイルを再生するために使用することもできます。一方で audio 要素は字幕を表示させる領域を持ちません。要素内容には video 要素をサポートしていない古いブラウザ向けの内容 (動画ファイルへの直接リンクなど) を入れることができます。
audio
audio 要素は、音声データを再生させる要素です。要素内容には audio 要素をサポートしていない古いブラウザ向けの内容 (音声ファイルへの直接リンクなど) を入れることができます。
track
track 要素は、動画、または音声データの外部テキスト・トラックを指定するための要素です。
map
map 要素は、イメージマップを定義するための要素です。ユーザの操作に反応する各領域とリンク先は、map 要素の内部に入れた area 要素 (HTML4.01 と XHTML1.0 では a 要素も使用可能) で個別に指定します。map 要素の name 属性でイメージマップに名前をつけ img 要素で指定することにより、イメージマップの定義と画像が関連付けられます。
area
area 要素は、イメージマップ上のリンクとして反応する領域とそのリンク先などを設定する要素です。この要素は map 要素、または template 要素の内部でしか利用できません。href 属性が指定されている場合 area 要素はリンクになります。その場合、alt 属性 (リンク先を示すテキスト) も必ず指定しなければなりません。href 属性が指定されていない場合は選択できない領域となり、alt 属性も指定できません。

テーブル (表) - Tabular data

table
table 要素は、表の全体を表す要素です。表関連の各種要素はすべてこの要素の中に配置します。表内部のマークアップは、各セルを th 要素 (見出しセル)、td 要素 (データセル)で表し、それらを一行ごとに tr 要素でグループ化します。
caption
caption 要素は、表のタイトルを表す要素です。タイトルのテキストには、表の内容 (セル同士の関係など) が理解しやすくなるような説明を含めるべきです。
colgroup
colgroup 要素は、表の縦列をグループ化する要素です。何列分の縦列をグループ化するかは、span 属性で指定するか、この要素の内部に col 要素を配置して示します。要素内容として col 要素を含んでいる場合は、colgroup 要素に span 属性を指定できない点に注意してください。
col
col 要素は、colgroup 要素の内部で使用され、そのグループ内での1列以上の縦列を表します。複数の縦列を表す場合には、その数を span 属性で指定します。
tbody
tbody 要素は、表の本体 (ヘッダーやフッターでない部分) となっている横列をグループ化する要素です。
thead
thead 要素は、表のヘッダーとなっている横列をグループ化する要素です。要素内容として「th 要素で構成される tr 要素」のみを含みますが、表によっては td 要素を含む場合もあります。例えば、見出しセルの内容を補足する情報を格納するために th 要素の下の td 要素も使用している場合などです。
tfoot
tfoot 要素は、表のフッター (合計などを表す部分) となっている横列をグループ化する要素です。
tr
tr 要素は、表内の横一列分のセルを含む列を表す要素です。
td
td 要素は、表内のひとつのデータセルを表す要素です。セルの内容として「データ」ではなく「見出し」を入れる場合には th 要素を使用します。
th
th 要素は、表内のひとつの見出しセルを表す要素です。セルの内容として「見出し」ではなく「データ」を入れる場合には td 要素を使用します。

フォーム - Forms

form
form 要素は、入力フォームを構成する様々な入力・選択部品 (テキスト入力フィールド、ボタン、メニューなど) をとりまとめ、それらのデータの取り扱いに関する設定を行う要素です。ユーザが送信ボタンを押すと、フォームの内容は action 属性で指定された URL に送信されます。
label
label 要素は、ユーザインターフェースのキャプション (フォーム部品のラベル) となる要素で特定のフォーム部品と関連付けることが可能です。ラベルのテキストを特定の部品と関連付けるには、関連付ける部品を label 要素の内容として含めるか、関連付ける部品の id 属性の値を label 要素の for 属性に指定します。
input
input 要素は、入力や選択が可能な様々な種類のフォーム部品になる要素です。type 属性に指定するキーワードによって、どのフォーム部品になるのか決定します。
button
button 要素は、要素内容をそのままラベルとして表示させるタイプのボタンになる要素です。
select
select 要素は、あらかじめ決められた選択肢の中から該当する項目を選ぶタイプの部品となる要素です。各選択肢は select 要素の内部で option 要素としてマークアップします。
datalist
datalist 要素は、input 要素の部品にサジェスト機能を提供するために、その入力候補となる複数の option 要素を取りまとめる要素です。input 要素datalist 要素を関連付けるには、datalist 要素の id 属性の値を input 要素list 属性に指定します。datalist 要素に対応したブラウザでは、datalist 要素とその子要素は、サジェスト機能として使用されるとき以外は表示されません。
optgroup
optgroup 要素は、option 要素をグループ化し、そのグループにラベルを付ける要素です。
option
option 要素は、select 要素の各選択肢、または datalist 要素が提供するサジェスト機能の各入力候補となる要素です。
textarea
textarea 要素は、プレーンテキストの入力・編集が可能な複数行のテキスト入力フィールドとなる要素です。要素内容がそのまま編集可能なテキストとなって表示されます。
output
output 要素は、アプリケーションによる計算結果、またはユーザの操作による結果を表すための要素です。samp 要素は他のプログラムによる過去の出力内容を引用する形で表すのに対して、output 要素はユーザが現在使用しているアプリケーションの出力結果をリアルタイムで表す際に使用されます。
progress
progress 要素は、タスクの全体量に対する進捗状況を示すための要素です。現在値を更新するには、Javascript などを使用します。progress 要素に未対応のブラウザでも進捗状況が分かるようにするために、要素内容としてインラインのテキストを含めることが推奨されています。
meter
meter 要素は、あらかじめ分かっている特定の範囲内における量、または割合を表す要素です。例えば、ハードディスクなどの使用状況を示す場合や、選挙の投票率を示す場合などに使用されます。meter 要素に未対応のブラウザでもメーターの示す量や割合がわかるようにするために、要素内容としてメーターの示す値をテキストで含めることが推奨されています。
fieldset
fieldset 要素は、フォームの各種部品をひとつのグループにまとめるための要素です。グループにタイトルを付ける場合は、要素内容の先頭に legend 要素を配置して、その要素内容として指定します。
legend
legend 要素は、フォームの各種部品を fieldset 要素でグループ化したもののタイトルとなる要素です。

ユーザによる操作 - Interactive elements

details
details 要素は、ディスクロージャー・ウィジェット (詳細情報の表示・非表示を切り替えられる部品) になる要素です。要素内容の先頭に summary 要素を配置して、どんな詳細情報が見られるのかを示す見出しやキャプションを表示させることができます。summary 要素の内容は常に表示され、残りの内容が表示・非表示の対象となります。summary 要素がない場合は、ブラウザが「詳細:」のような文字列を表示します。
summary
summary 要素は、親要素である details 要素の (常に表示される) 見出しやキャプションとなる要素です。

スクリプト - Scripting

script
script 要素は、HTML 文書の中にスクリプトを組み込むための要素です。スクリプトは要素内容として書き込むことや、別のファイルに記述したものを src 属性で読み込ませることも可能です。また、HTML5 以降ではデータブロックを組み込むために使用することもできます。データブロックを組み込む場合は、必ず要素内容として格納する必要があります。
noscript
noscript 要素の要素内容は、スクリプトが機能する場合は存在しないものとして処理され、スクリプトが機能しない場合はコンテンツとして使用されます。つまり、スクリプトが機能しない環境向けに別途用意したコンテンツを提供するための要素です。
template
template 要素は、その部分がスクリプトによって内容を追加したり増やしたりするためのテンプレートであることを宣言する要素です。
canvas
canvas 要素は、スクリプトを使用してその場で描画可能なビットマップのキャンパスとなる要素です。要素内容には、canvas 要素に未対応の環境で使用する同じ目的や機能を持った内容を指定します。
Category:
プログラミング
公開日:
更新日:
Pageviews:
1,780
Shares:
15
Tag:
HTML
コンテンツ制作