HTML

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

<blockquote>

他の文献からの引用文であることを示します。<BLOCKQUOTE> はブロック要素（前後に改行が入る）であり、インデント（字下げ）表示されます。引用をインライン要素（前後に改行が入らない）として扱うには、<Q> を使用します。

<blockquote>
  <!-- flow content -->
</blockquote>

タグの省略

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

内容モデル（開始タグと終了タグの間に出現する要素）は HTML のバージョンによって異なります。BLOCKQUOTE 要素の内容モデルを次に示します。

属性

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

cite: 引用元のURIを指定する。
class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: HTML文書内で一意な識別子を指定する。
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。
title: ソースに関する詳細情報など、ツールチップに適した要素のアドバイザリ情報を指定する。

使用例

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.

CSS

border-right

右の境界線の太さ、種類、色を指定するCSSプロパティ

<blockquote style="border-right: medium solid gray">
  The quick brown fox jumps over the lazy dog.
</blockquote>

The quick brown fox jumps over the lazy dog.

参考文献

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

<datalist>

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要素に指定できる。

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: データリストの識別子
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

参考文献

Web Hypertext Application Technology Working Group (2022) The datalist element HTML Living Standard

<details>

概要（summary）の部分をクリックすると、詳細（details）を表示したり、隠したりできる。

<details open>
  <summary>HTML</summary>
  <ol>
    <li>要素</li>
    <li>属性</li>
  </ol>
</details>

HTML

要素
属性

属性

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

class: CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id: データリストの識別子
style: CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

参考文献

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

<footer> はコンテンツのフッターを表すHTMLタグである。フッターにはサイト名、著作権、連絡先およびリンクなどを記載する。

Figure 1. footer

<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要素に指定できる。

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

参考文献

Web Hypertext Application Technology Working Group (2022) Sections HTML Living Standard

<header> はコンテンツのヘッダーを表すHTMLタグである。

ページのヘッダーにはロゴ画像、検索フォームおよびナビゲーションメニューなどを記載する。

Figure 2. header

<body>
  <header>
    <img src="logo.png">
  </header>
  <main>
    <h1>サンプル</h1>
  </main>
  <footer>
    <p>Copyright 2021 SE学院</p>
  </footer>
</body>

属性

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

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

参考文献

Web Hypertext Application Technology Working Group (2022) Sections HTML Living Standard

main

<main> はコンテンツのヘッダーを表すHTMLタグである。

Figure 3. main

属性

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

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

参考文献

Web Hypertext Application Technology Working Group (2022) Sections HTML Living Standard

<mark>

文字列をハイライトする。

<mark>
  <!-- phrasing content -->
</mark>

属性

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

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

開始タグ <mark> と終了タグ </mark> の間には、記述コンテンツを含むことができる。具体的には、次の要素である。

テキスト
abbr
audio
b
bdo
br
button
canvas
cite
code
data
datalist
dfn
em
embed
i
iframe
img
inpput
kbd
label
meter
noscript
object
output
picture
progress
q
ruby
samp
script
select
small
span
strong
sub
sup
svg
textarea
time
var
video
wbr

<p>This is a <mark>marked</mark> word.</p>

This is a marked word.

参考文献

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

<nav>

<nav> はナビゲーションを表すHTMLタグである。

<nav>
  <ol>
    <li>
      <a href="#">ホーム</a>
    </li>
    <li>
      <a href="#">お問い合わせ</a>
    </li>
  </ol>
</nav>

属性

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

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

参考文献

Web Hypertext Application Technology Working Group (2022) Sections HTML Living Standard

<picture>

<picture>は画像のセットを表すHTMLタグである。Webブラウザに応じて画像フォーマットを使い分けることができる。

<picture>
  <!-- WebPに対応しているブラウザではWebP画像を表示する -->
  <source srcset="/images/image.webp" type="image/webp">
  <!-- WebPに対応していないブラウザではJPEG 2000画像を表示する -->
  <img src="/images/jpeg2000.jpg">
</picture>

属性

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

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

参考文献

Web Hypertext Application Technology Working Group (2022) Embedded content HTML Living Standard

<time>

<time> タグは機械可読な形式で日付や時刻を記述することができる。

機械可読な形式で日付や時刻を記述することによって、プログラムから利用しやすくなる。

<time datetime="2019-12-31">令和元年12月31日</time>

<time datetime="15:00">午後３時</time>

属性

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

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

参考文献

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

<B>

開始タグ <b> と終了タグ </b> に囲まれた文字列を太文字（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

<CITE>

開始タグ <cite> と終了タグ </cite> で囲まれた文字列が他の書籍名やサイト名である(Citation)ことを表します。

書式

<cite>
  <!-- phrasing content -->
</cite>

開始タグと終了タグは省略できません。開始タグと終了タグの間には>インライン要素が任意回数表れます。

属性

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

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

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.

World Wide Web Consortium

参考文献

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

<CODE>

開始タグ <code> と終了タグ </code> で囲まれた文字列がプログラムのコードであることを表します。通常、等幅フォントで表示されます。

書式

<code>
  <!-- phrasing content -->
</code>

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

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

<code>printf("Hello World");</code>

printf("Hello World");

属性

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

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>

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

書式

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

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

属性

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

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

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

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

属性

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

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

参考文献

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

<STRONG>

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

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

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

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

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

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

属性

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

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

参考文献

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

<SUB>

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

書式

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

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

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

水の分子記号は 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

<wbr>

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

<wbr />

属性

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

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

参考文献

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

<U>

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

<U> は 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