HTML (Hypertext Markup Language) タグの一覧と使い方

HyperText Markup Language (HTML) とは、ウェブサイトのコンテンツを記述するためのマークアップ言語です。

<TITLE>

HTML文書のタイトル（題）を指定します。<HEAD> と </HEAD> の間に記述します。

html要素やhead要素、body要素はHTML文書に必ず存在しますが、タグの記述は省略できます。HTML文書に必ず存在する要素のうち、タグを省略できない唯一の要素がtitle要素です。したがって、1番単純なHTML文書は次のようになります。

<title>Simple HTML</title>

これはHTML文書の一部を抜粋したものではなく、この1行だけでひとつの完全なHTML文書となります。

<title>
  <!-- text -->
</title>

タグの省略

開始タグおよび終了タグは省略できない。

title要素の内容モデルはタグ無しテキストです。他の要素を含めることはできません。

親要素

title要素の親要素はhead要素である。

属性

次に示す属性をtitle要素に指定できる。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

id

HTML文書内で一意な識別子を指定する。ただし、HTML文書内にtitle要素はひとつしか存在しないので、識別子が無くても特定できる。

lang

言語を指定する。

<title lang="th-TH">ม่านมุก</title>

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

使用例

title要素の使用例を次に示す。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML example</title>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

参考文献

Web Hypertext Application Technology Working Group (2022) The elements of HTML HTML Living Standard

開始タグ  と終了タグ  に囲まれた文字列を太文字（Bold）で表示します。インライン要素です。

<b>
  <!-- phrasing content -->
</b>

終了タグは省略できません。開始タグと終了タグの間には、0個以上のインライン要素を含めることができます。

属性は全て省略可能です。

文字列を<b>太文字で</b>表示します。

文字列を太文字で表示します。

属性

次に示す属性をb要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: HTML文書内で一意な識別子を指定する。
lang: 言語を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

<DFN>

開始タグ <dfn> と終了タグ </dfn> に囲まれた文字列が定義語 (definition) であることを示します。用語がドキュメントで最初に出現したときに定義語とします。

開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。

HTMLタグ <dfn> の使用例と表示サンプルを次に示します。

<dfn>dfn要素タイプ</dfn>は定義語であることを指定します。

dfn要素タイプは定義語であることを指定します。

属性

次に示す属性をdfn要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: HTML文書内で一意な識別子を指定する。
lang: 言語を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

<SAMP>

開始タグ <samp> と終了タグ </samp> で囲まれた文字列がプログラムの出力サンプル(Sample)であることを表します。

書式

<samp>
  <!-- phrasing content -->
</samp>

開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。

HTMLタグ <samp> の使用例と表示サンプルを示します。

プログラムを実行すると <samp>Hello World</samp> と出力されます。

プログラムを実行すると Hello World と出力されます。

属性

次に示す属性をsamp要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: HTML文書内で一意な識別子を指定する。
lang: 言語を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

開始タグ  と終了タグ  に囲まれた文字列を小さく表示します。インライン要素です。

書式

<small>
  <!-- phrasing content -->
</small>

終了タグは省略できません。開始タグと終了タグの間には、0個以上のインライン要素を含めることができます。

属性

属性は全て省略可能です。

HTMLタグ の使用例と表示サンプルを次に示します。文字のサイズを大きくしないと判別できないほど微妙な違いです。

文字列を<small>小さく</small>表示します。

文字列を小さく表示します。

属性

次に示す属性をsmall要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: HTML文書内で一意な識別子を指定する。
lang: 言語を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

開始タグ  と終了タグ  で囲まれた文字列を強調します。 より強い強調を表します。強調された単語はブラウザで表示したときに太文字などで表示されます。

<strong>
  <!-- phrasing content -->
</strong>

開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。

HTMLタグ の使用例と表示サンプルを次に示します。

文字が<stron>強調表示</strong>されます。

文字が強調表示されます。

属性

次に示す属性をstrong要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: HTML文書内で一意な識別子を指定する。
lang: 言語を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

開始タグと終了タグに囲まれた文字列を下付き文字(Subscript)に指定します。

書式

<sub>
  <!-- phrasing content -->
</sub>

開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。

HTMLタグ の使用例と表示サンプルを次に示します。

水の分子記号は H<sub>2</sub>O と表します。

水の分子記号は H₂O と表します。

属性

次に示す属性をsub要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: HTML文書内で一意な識別子を指定する。
lang: 言語を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

<KBD>

開始タグ <kbd> と終了タグ </kbd> で囲まれた文字列がキーボード(Keyboard)から入力する文字であることを表します。通常、ブラウザで固定幅フォントで表示されます。

書式

<kbd>
  <!-- phrasing content -->
</kbd>

開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。

HTMLタグ <kbd> の使用例と表示サンプルを次に示します。

プログラムを中断するには <kbd>exit</kbd> と入力します。

プログラムを中断するには exit と入力します。

属性

次に示す属性をkbd要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: HTML文書内で一意な識別子を指定する。
lang: 言語を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

<VAR>

var要素はプログラムの変数（variable）を表す。挙動はブラウザによって異なるが、一般的にイタリック体で表示される。

<var>
  <!-- phrasing content -->
</var>

タグの省略

開始タグおよび終了タグは省略できない。

内容

記述コンテンツを内容に含めることができる。

属性

次に示す属性をvar要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: 要素の一意な識別子を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

使用例

varタグの使用例を次に示す。

変数 <var>argv[1]</var> には対象となるファイル名が格納されています。

上記のHTMLは、ブラウザで次のように表示される。

変数 argv[1] には対象となるファイル名が格納されています。

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

単語の区切り（Word Break）であることを明示的に指定する。改行は単語の区切りで行われる。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。

<wbr></wbr>

<WBR></WBR>

wbr 要素の終了タグは省略できる。

<wbr>

<WBR>

XML形式で終了タグを省略することもできる。

<wbr />

属性

次に示す属性をwbr要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: HTML文書内で一意な識別子を指定する。
lang: 言語を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

Mary Poppins said, 'It's Super<wbr>cali<wbr>fragilistic<wbr>expiali<wbr>docious.'

Mary Poppins said, 'It's Supercalifragilisticexpialidocious.'

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

<ABBR>

<ABBR>タグは<ACRONYM>タグと同様に、単語の頭文字からなる略語 (abbreviation) であることを表します。例えば、HTML (Hyper Text Markup Language) や WWW (World Wide Web) などです。

開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。

HTMLタグ<abbr> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

株価収益率を表す<abbr title="Price Earnings Ratio">PER</abbr>は、米国ではPE ratioと表記される。

株価収益率を表すPERは、米国ではPE ratioと表記される。

属性

次に示す属性をabbr要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: HTML文書内で一意な識別子を指定する。
lang: 言語を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

<S>

開始タグと終了タグに囲まれた文字列に下線を引きます。

<S> は HTML 4.01 transitional で使用できるタグです。HTML 4.01 strict や XHTML では廃止されました。<del> またはスタイルシート属性 text-decoration で代用できます。

書式

<S [attribute=value ...] content-model </S>

開始タグと終了タグは省略できません。

内容モデル

開始タグと終了タグの間には任意数のインライン要素が現れます。

属性

属性はすべて省略可能です。

使用例

S 要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

Extensible <S>HyperText</S> Markup Language

Extensible ~~HyperText~~ Markup Language

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

開始タグと終了タグに囲まれた文字列に下線を引きます。

は HTML 4.01 transitional で使用できるタグです。HTML 4.01 strict や XHTML では廃止されました。スタイルシート属性 text-decoration で代用できます。

書式

<U [attribute=value ...] content-model </U>

開始タグと終了タグは省略できません。

内容モデル

開始タグと終了タグの間にはインライン要素を含めることができます。

属性

属性はすべて省略可能です。

使用例

U 要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

Extensible <u>HyperText</u> Markup Language

Extensible HyperText Markup Language

参考文献

Web Hypertext Application Technology Working Group (2022) Text-level semantics HTML Living Standard

HTML

<TITLE>

タグの省略

親要素

属性

使用例

参考文献

<B>

属性

参考文献

<DFN>

属性

参考文献

<SAMP>

書式

属性

参考文献

<SMALL>

書式

属性

属性

参考文献

<STRONG>

属性

参考文献

<SUB>

書式

属性

参考文献

<KBD>

書式

属性

参考文献

<VAR>

タグの省略

内容

属性

使用例

参考文献

<wbr>

構文

属性

参考文献

<ABBR>

属性

参考文献

<S>

書式

内容モデル

属性

使用例

参考文献

<U>

書式

内容モデル

属性

使用例

参考文献