HyperText Markup Language (HTML) とは、ウェブサイトのコンテンツを記述するためのマークアップ言語です。
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要素に指定できる。
<title lang="th-TH">ม่านมุก</title>title要素の使用例を次に示す。
<!DOCTYPE html>
<html>
<head>
<title>HTML example</title>
</head>
<body>
<!-- content -->
</body>
</html>他の文献からの引用文であることを示します。<BLOCKQUOTE> はブロック要素（前後に改行が入る）であり、インデント（字下げ）表示されます。引用をインライン要素（前後に改行が入らない）として扱うには、<Q> を使用します。
<blockquote>
<!-- flow content -->
</blockquote>開始タグおよび終了タグは省略できない。
内容モデル（開始タグと終了タグの間に出現する要素）は HTML のバージョンによって異なります。BLOCKQUOTE 要素の内容モデルを次に示します。
次に示す属性をblockquote要素に指定できる。
blockquote要素の使用例を次に示す。
<blockquote cite="https://www.w3.org/">
The World Wide Web Consortium (W3C) is an international community
that develops open standards to ensure the long-term growth of the Web.
</blockquote>上記のHTMLはブラウザで次のように表示される。
The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.
datalistタグでデータのリストを定義することができる。データのリストはフォームの入力値として利用できる。
<label for="bank">金融機関コードを入力してください:</label>
<input list="bank-list" id="bank" name="bank" />
<datalist id="bank-list">
<option value="0001">みずほ銀行</option>
<option value="0005">三菱UFJ銀行</option>
<option value="0009">三井住友銀行</option>
<option value="9900">ゆうちょ銀行</option>
</datalist>次に示す属性をdatalist要素に指定できる。
概要（summary）の部分をクリックすると、詳細（details）を表示したり、隠したりできる。
<details open>
<summary>HTML</summary>
<ol>
<li>要素</li>
<li>属性</li>
</ol>
</details>次に示す属性をdetails要素に指定できる。
<footer> はコンテンツのフッターを表すHTMLタグである。フッターにはサイト名、著作権、連絡先およびリンクなどを記載する。
<body>
<header>
<img src="logo.png">
</header>
<main>
<h1>サンプル</h1>
</main>
<footer>
<p>Copyright 2021 SE学院</p>
<address>
<a href="contact-form.php">お問い合わせ</a>
</address>
</footer>
</body>引用文の出典を記載するのにも使える。
<blockquote>
<p>
The World Wide Web Consortium (W3C) is an international community
that develops open standards to ensure the long-term growth of the Web.
</p>
<footer>
<cite>
<a href="https://www.w3.org/">World Wide Web Consortium</a>
</cite>
</footer>
</blockquote>次に示す属性をfooter要素に指定できる。
<header> はコンテンツのヘッダーを表すHTMLタグである。
ページのヘッダーにはロゴ画像、検索フォームおよびナビゲーションメニューなどを記載する。
<body>
<header>
<img src="logo.png">
</header>
<main>
<h1>サンプル</h1>
</main>
<footer>
<p>Copyright 2021 SE学院</p>
</footer>
</body>次に示す属性をheader要素に指定できる。
文字列をハイライトする。
<mark>
<!-- phrasing content -->
</mark>次に示す属性をmark要素に指定できる。
開始タグ <mark> と終了タグ </mark> の間には、記述コンテンツを含むことができる。具体的には、次の要素である。
<p>This is a <mark>marked</mark> word.</p>This is a marked word.
<nav> はナビゲーションを表すHTMLタグである。
<nav>
<ol>
<li>
<a href="#">ホーム</a>
</li>
<li>
<a href="#">お問い合わせ</a>
</li>
</ol>
</nav>次に示す属性をnav要素に指定できる。
<picture>は画像のセットを表すHTMLタグである。Webブラウザに応じて画像フォーマットを使い分けることができる。
<picture>
<!-- WebPに対応しているブラウザではWebP画像を表示する -->
<source srcset="/images/image.webp" type="image/webp">
<!-- WebPに対応していないブラウザではJPEG 2000画像を表示する -->
<img src="/images/jpeg2000.jpg">
</picture>次に示す属性をpicture要素に指定できる。
<time> タグは機械可読な形式で日付や時刻を記述することができる。
機械可読な形式で日付や時刻を記述することによって、プログラムから利用しやすくなる。
<time datetime="2019-12-31">令和元年12月31日</time><time datetime="15:00">午後３時</time>次に示す属性をtime要素に指定できる。
開始タグ <b> と終了タグ </b> に囲まれた文字列を太文字（Bold）で表示します。インライン要素です。
<b>
<!-- phrasing content -->
</b>終了タグは省略できません。開始タグと終了タグの間には、0個以上のインライン要素を含めることができます。
属性は全て省略可能です。
文字列を<b>太文字で</b>表示します。文字列を太文字で表示します。
次に示す属性をb要素に指定できる。
開始タグ <cite> と終了タグ </cite> で囲まれた文字列が他の書籍名やサイト名である(Citation)ことを表します。
<cite>
<!-- phrasing content -->
</cite>開始タグと終了タグは省略できません。開始タグと終了タグの間には>インライン要素が任意回数表れます。
次に示す属性をcite要素に指定できる。
HTMLタグ <cite> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
<blockquote>
<p>
The World Wide Web Consortium (W3C) is an international community
that develops open standards to ensure the long-term growth of the Web.
</p>
<footer>
<cite>
<a href="https://www.w3.org/">World Wide Web Consortium</a>
</cite>
</footer>
</blockquote>The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.
開始タグ <dfn> と終了タグ </dfn> に囲まれた文字列が定義語 (definition) であることを示します。用語がドキュメントで最初に出現したときに定義語とします。
開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。
HTMLタグ <dfn> の使用例と表示サンプルを次に示します。
<dfn>dfn要素タイプ</dfn>は定義語であることを指定します。dfn要素タイプは定義語であることを指定します。
次に示す属性をdfn要素に指定できる。
開始タグ <code> と終了タグ </code> で囲まれた文字列がプログラムのコードであることを表します。通常、等幅フォントで表示されます。
<code>
<!-- phrasing content -->
</code>開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。
HTMLタグ <code> の使用例と表示サンプルを次に示します。
<code>printf("Hello World");</code>printf("Hello World");
次に示す属性をcode要素に指定できる。
開始タグ <samp> と終了タグ </samp> で囲まれた文字列がプログラムの出力サンプル(Sample)であることを表します。
<samp>
<!-- phrasing content -->
</samp>開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。
HTMLタグ <samp> の使用例と表示サンプルを示します。
プログラムを実行すると <samp>Hello World</samp> と出力されます。プログラムを実行すると Hello World と出力されます。
次に示す属性をsamp要素に指定できる。
開始タグ <SMALL> と終了タグ </SMALL> に囲まれた文字列を小さく表示します。インライン要素です。
<small>
<!-- phrasing content -->
</small>終了タグは省略できません。開始タグと終了タグの間には、0個以上のインライン要素を含めることができます。
属性は全て省略可能です。
HTMLタグ <small> の使用例と表示サンプルを次に示します。文字のサイズを大きくしないと判別できないほど微妙な違いです。
文字列を<small>小さく</small>表示します。文字列を小さく表示します。
次に示す属性をsmall要素に指定できる。
開始タグ <strong> と終了タグ </strong> で囲まれた文字列を強調します。<em> より強い強調を表します。強調された単語はブラウザで表示したときに太文字などで表示されます。
<strong>
<!-- phrasing content -->
</strong>開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。
HTMLタグ <strong> の使用例と表示サンプルを次に示します。
文字が<stron>強調表示</strong>されます。文字が強調表示されます。
次に示す属性をstrong要素に指定できる。
開始タグと終了タグに囲まれた文字列を下付き文字(Subscript)に指定します。
<sub>
<!-- phrasing content -->
</sub>開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。
HTMLタグ <sub> の使用例と表示サンプルを次に示します。
水の分子記号は H<sub>2</sub>O と表します。水の分子記号は H2O と表します。
次に示す属性をsub要素に指定できる。
開始タグ <kbd> と終了タグ </kbd> で囲まれた文字列がキーボード(Keyboard)から入力する文字であることを表します。通常、ブラウザで固定幅フォントで表示されます。
<kbd>
<!-- phrasing content -->
</kbd>開始タグと終了タグの間にはインライン要素を含めることができます。終了タグは省略できません。属性はすべて省略可能です。
HTMLタグ <kbd> の使用例と表示サンプルを次に示します。
プログラムを中断するには <kbd>exit</kbd> と入力します。プログラムを中断するには exit と入力します。
次に示す属性をkbd要素に指定できる。
var要素はプログラムの変数（variable）を表す。挙動はブラウザによって異なるが、一般的にイタリック体で表示される。
<var>
<!-- phrasing content -->
</var>開始タグおよび終了タグは省略できない。
記述コンテンツを内容に含めることができる。
次に示す属性をvar要素に指定できる。
varタグの使用例を次に示す。
変数 <var>argv[1]</var> には対象となるファイル名が格納されています。上記のHTMLは、ブラウザで次のように表示される。
変数 argv[1] には対象となるファイル名が格納されています。
単語の区切り（Word Break）であることを明示的に指定する。改行は単語の区切りで行われる。
<wbr />次に示す属性をwbr要素に指定できる。
<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要素に指定できる。
| 文字 | Unicode | 文字参照 |
|---|---|---|
| ก | U+0E01 | ก |
WHATWG (2021) HTML Living Standard