メタデータ・コンテンツには、文書に関連する情報や外部ファイルの参照先を指定する要素などが含まれます。

所属する要素： base | link | meta | noscript | script | style | title

フロー・コンテンツには、文書を構成するテキストや埋め込まれるメディアが含まれます。

所属する要素： a | abbr | address | article | aside | audio | b | bdi | bdo | blockquote | br | button | canvas | cite | code | datalist | del | dfn | div | dl | em | embed | fieldset | figure | footer | form | h1〜h6 | header | hr | i | iframe | img | input | ins | kbd | keygen | label | main | map | mark | math | meter | nav | noscript | object | ol | output | p | pre | progress | q | ruby | s | samp | script | section | select | small | span | strong | sub | sup | svg | table | template | textarea | time | u | ul | var | video | wbr | テキスト

条件付きで所属する要素： area（この要素が map 要素の中にある場合）

セクショニング・コンテンツには、文書の階層構造のアウトラインを決定する要素が含まれます。この要素によって生成されたスコープが、h1 〜 h6 | header | footer の影響範囲を決めます。

所属する要素： article | aside | nav | section

ヘッディング・コンテンツには、文書の見出しを表す要素が含まれます。これは見出し自身によって生成される暗黙的なアウトラインとセクショニング・コンテンツによって定義される明示的なアウトラインの見出しを意味します。

所属する要素： h1 〜 h6

フレージング・コンテンツには、文書の内容をマークアップする要素が含まれます。これらはコンテンツをグループ化したり文字列に意味を与えて段落を構成するための要素です。

所属する要素： a | abbr | audio | b | bdo | br | button | canvas | cite | code | datalist | del | dfn | em | embed | i | iframe | img | input | ins | kbd | keygen | label | map | mark | math | meter | noscript | object | output | progress | q | ruby | s | samp | script | select | small | span | strong | sub | sup | svg | template | textarea | time | u | var | video | wbr | テキスト

条件付きで所属する要素： area（この要素が map 要素の中にある場合）

エンベッデッド・コンテンツには、文書の中に他のリソースやメディアファイル、他のマークアップ言語や名前空間を挿入する要素が含まれます。

所属する要素： audio | canvas | embed | iframe | img | math | object | svg | video

インタラクティブ・コンテンツには、ユーザーが干渉可能な機能やインターフェイスを持つ要素が含まれます。

所属する要素： a | button | embed | iframe | keygen | label | select | textarea

条件付きで所属する要素： audio（ controls 属性が指定された場合） | img（ usemap 属性が指定された場合） | input（ type 属性の値が hidden でない場合） | object（ usemap 属性が指定された場合） | video（ controls 属性が指定された場合）

パルパブル・コンテンツは、コンテンツが空でも非表示でもない時の状態を表すカテゴリです。フロー・コンテンツとフレージング・コンテンツに属する要素は、知覚可能なノードを少なくとも一つ持ちます。

属性には、全ての要素に指定可能なグローバル属性と要素単位に決められている固有属性があります。本項では、主要なグローバル属性について記述します。

accesskey

その要素にアクセスするキーボードショートカットの文字を指定します。この値は、空白区切りの文字のリストで指定します。ブラウザは、この文字リストの中からコンピューターのキーボードに存在する最初の文字を採用します。

autocapitalize

ユーザーの文字入力に対して、自動的に大文字化を行うか、どこを大文字化するかを制御します。

off / none

大文字化を行いません。全ての文字は小文字のままです。

on / sentences

先頭の文字を大文字にします。それ以外の文字は小文字のままです。

words

単語ごとに最初の文字を大文字にします。それ以外の文字は小文字のままです。

characters

全ての文字を大文字にします。

autofocus

ページの読み込み時、または dialog が表示された時点で、その要素が自動的にフォーカスされるように設定します。初期値は、false です。この属性は論理値です。

class

要素にクラス名を指定します。この値は空白区切りのリスト形式で、任意の文字列を与えられます。スタイルシート（CSS）や JavaScript の適応名称として使えます。クラス名は、複数箇所に同一の名称を付与することができます。スタイルシート（CSS）のセレクターでクラス名を使用する場合は、先頭にピリオド（.）を付与して指定します。

contenteditable

ユーザーによる編集を可能にするかどうかを指定します。編集可能な場合、ブラウザはその要素を編集可能なものにします。この属性の値は以下のものが有効です。

true

要素が編集可能であることを示します。空文字列の場合も同様です。

false

要素が編集不可であることを示します。

data-*

カスタムデータを定義します。HTML と DOM の間で、特定の情報を交換できるようにします。全てのカスタムデータは、その属性を設定した要素の HTML Element インターフェイスを通して使用できます。そして、HTML Element.dataset プロパティでカスタムデータにアクセスできます。

dir

テキストの記述方向を指定します。この属性では以下の値が使用できます。

ltr

「left to right」を表します。左から右へ書かれる言語に対応します。

rtl

「right to left」を表します。右から左へ書かれる言語に対応します。

auto

ユーザーエージェントの判別を優先します。要素に書かれた文字を解析し記述方向を決定する要因を基準にアルゴリズムを定めます。

draggable

Drag and Drop API を使用して要素をドラッグできるかどうかを指定します。この属性には以下の値が用意されています。

true

要素がドラッグ可能であることを示します。

false

要素がドラッグ不可であることを示します。

enterkeyhint

仮想キーボードの Enter キーに、どのようなラベルまたはアイコンを表示するかを指定します。

hidden

要素を隠します。この属性が指定されている間、その要素は閲覧中のページとは関係がないものとみなされます。本来、表示されても問題のない正当な要素を隠す目的で使用してはいけません。

id

ドキュメントの中で一意となる識別子（id 名）を指定します。リンクのジャンプ先として指定する URL フラグメント、スタイルシート（CSS）や JavaScript の適応名称として使えます。id 名は、ページ内に一箇所しか同一の名称を付与することができません。スタイルシート（CSS）のセレクターで id 名を使用する場合は、先頭にハッシュ（#）を付与して指定します。

spellcheck

要素の中でスペルチェックを行うかどうかを指定します。この属性では以下の値が使用できます。

true

スペルチェックを行うことを示します。

false

スペルチェックを行わないことを示します。

style

要素に対して直接スタイルシートを記述したい場合に使います。特定のページで共通のファイルから呼び出したスタイルではなく固有のスタイルを与えたい時に有効な属性です。

tabindex

要素がフォーカス状態を受け入れる場合、キーボードナビゲーションに参加するかどうかを指定します。整数値を値に入れて順番的なキーボードナビゲーションの参加の方法を定義します。

負の数

フォーカスを受け入れつつ、順次キーボードナビゲーションでは到達できないようにします。

0

フォーカスを受け入れ、順次キーボードナビゲーションで到達可能にします。

正の数

フォーカスを受け入れ、順次キーボードナビゲーションは他の要素に与えられた tabindex 属性の値の昇順で移動可能にします。

title

要素に関する補足情報を指定します。対応している環境ではツールチップに情報が表示されます。

translate

ページを翻訳する祭に要素の内容を翻訳対象に含めるか除外するかを指定します。

yes

翻訳可能とみなします。空文字列の場合も同様です。

no

翻訳不可とみなします。

HTML のコードを記述する時に HTML 文法に矛盾を発生させないために、特別な記述が必要な文字があります。

特殊文字の規格には、多くの文字が定義されています。特殊文字の一覧を参照する場合は、ブラウザで「html 特殊文字」と検索してください。

特殊文字で主要な文字は、以下の文字になります。

例えば、画面に「<」を表示させたい場合は「&lt;」（名称記述）、「&#60;」（10進数記述）、「&#x3C;」（16進数記述）のどれかを記述します。

<!DOCTYPE html>

作成した HTML が、どのバージョンで記述されているかを宣言します。HTML5 以降では、<!DOCTYPE html> と記述するだけで良くなりました。

昔に作成された Web サイトでは、!DOCTYPE 宣言の書き方が異なっているかもしれません。この場合は、HTML の書き方や使用できるタグが異なる場合がありますので注意してください。

使用上の注意事項

• !DOCTYPE 宣言は、HTML ドキュメントの一行目に記述してください。
• 厳密には !DOCTYPE 宣言は、HTML の要素ではありません。
• DOCTYPE の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML

<!DOCTYPE html>
<html>
<head>
<title>ドキュメントタイトル</title>
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

<!-- （コメント） -->

ソースコード中に画面には表示されないコメントを定義します。<!-- で始まって、--> が出現されるまでをコメントとして扱われますので複数行をコメントのコメントも記述できます。head 要素と body 要素の、どちらにも記述できます。

使用上の注意事項

• コメントは、ブラウザのレンダリングに一切影響しません。
• 画面には表示されませんがソースコードを開けば、誰でも見ることができますので、公開してはいけない情報をコメントで記述してはいけません。

使用例

HTML

<!-- 一行コメントです。 -->

<!--
	複数行のコメントです。
	複数行のコメントです。
	複数行のコメントです。
	複数行のコメントです。
-->

<html lang="言語"> ドキュメント </html>

HTML 文章の開始を宣言します。html 要素は、HTML 文章の起点となり「ルート」（一番上の階層）と呼ばれます。

主な固有属性

lang

記述している言語を指定します。日本語：ja、英語：en などのように各国の言語を表す略語を指定します。

使用上の注意事項

• 全ての要素のルートです。HTML を構成する全ての要素は、このタグの間に書かなければいけません。
• HTML は、HyperText Markup Language の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>ドキュメントタイトル</title>
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

<head> ドキュメントヘッダコンテンツ </head>

ブラウザの画面に表示されない領域で、文章のメタデータ、スクリプト、スタイルシートなどを記述します。ここに書かれた内容は、ブラウザの画面には表示されなく機械が処理するために必要となる情報です。

使用上の注意事項

• ここに書かれる内容はブラウザの画面には表示されませんが表示される内容に間接的に寄与します。
• html は、HyperText Markup Language の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントタイトル</title>
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

<title> ドキュメントタイトルコンテンツ </title>

ドキュメントのタイトルを記述します。ここに書かれた内容は、ブラウザのウィンドウタブ、ブックマークの名称、検索結果の表題などで使用されます。ページに書かれている内容を示すものになるので分かりやすい名称を付けるように心がけましょう。

使用上の注意事項

• この要素はブラウザのページに直接表示されないためレイアウトには影響を与えません。
• ドキュメントタイトルは SEO（検索エンジン最適化）に影響を与えることで知られています。ページ内容を適切に表すと同時に適度な長さの文字列が有効だとされています。一般的には以下のような形式が良く使われています。
  
  • ページの記載内容 | サイト名
  • HTML title要素の説明 | HTML-CSS入門講座
  • titleタグ | HTMLリファレンス | HTML-CSS入門講座
  • title要素 - HTML-CSS入門講座
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントタイトル</title>
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

<base href="基準リンク先" target="基準表示先">

ドキュメントの基準となる URL をヘッダ内に記述します。指定されたページの中で、その内容に準じた相対パスを使用することができます。

主な固有属性

href

リンクの基準となる URL を指定します。

target

基準となる表示先を指定します。a 要素または form 要素が明示的に target 属性を持たない場合に移動の結果を表示する先として使用されます。以下のキーワードは特別な意味を持ちます。

_self

同じウィンドウで開く（初期値）

_blank

新しいタブまたはウィンドウで開く

使用上の注意事項

• この要素はブラウザのページに直接表示されないためレイアウトには影響を与えません。
• この要素は空要素です。終了タグはありません。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントタイトル</title>
<base href="https://hamaya2020.com/" target="_blank">
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

<link href="URL" rel="リンク先との関係">

外部ファイルとの関連付けを行います。外部ファイルは、スタイルシートやアイコン（ファビコン）ファイルになります。

主な固有属性

href

外部ファイルの URL を相対パスまたは絶対パスで指定します。

rel

外部ファイルの種別を以下の値で指定します。

stylesheet

外部スタイルシートファイルを指定します。

icon

アイコン（ファビコン）ファイルを指定します。一般的に、ファビコンファイルのファイル名は、favicon.ico が使用されます。

使用上の注意事項

• この要素はブラウザのページに直接表示されないためレイアウトには影響を与えません。
• この要素は空要素です。終了タグはありません。
• type 属性を使用してリンク先のファイル属性を明示的に指定する（「type="text/css"」など）ことも可能ですがスタイルシートやアイコンの場合はリンク先のファイル属性が明確なので省略可能です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントタイトル</title>
<link href="css/style.css" rel="stylesheet">
<link href="images/favicon.ico" rel="icon">
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

<meta charset="文字コード" name="メタデータ名" content="メタデータ" property="OGP属性">

ドキュメントに必要なメタデータを指定します。

主な固有属性

charset

ドキュメントで使用する文字のエンコーディング方式を指定します。この値は、ファイルを保存した時のエンコーディング方式と一致している必要があります。通常は「UTF-8」を使用します。

name

メタデータの名前を指定します。内容は、content 属性で指定します。通常は、http-equiv 属性、charset 属性、property 属性と同時には指定しません。

property

OGP（Open Graph Protcol）を使う場合に採用される属性です。現時点では、OGP 指定は、HTML の標準仕様ではありませんが一般的に使用されています。

content

name 属性、property 属性で定義されたメタデータの値を表します。

使用上の注意事項

• この要素はブラウザのページに直接表示されないためレイアウトには影響を与えません。
• この要素は空要素です。終了タグはありません。
• meta は、META-information の略称です。メタは「高次の」や「超越的な」という意味を持っていますが、ここではメタデータとして「あるデータについての内容や性質を記述」と理解してください。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

meta 要素は、指定する項目によって記述パターンで理解してください。

(1) 文字エンコード方式

ドキュメントで使用する文字のエンコーディング方式を指定します。

HTML

<meta charset="UTF-8">

(2) ドキュメントの概要

ドキュメントの説明文を指定します。この値は、検索結果やブラウザのブックマーク時の説明文などで利用されます。

HTML

<meta name="description" content="ドキュメントの説明文">

(3) ビューポートの設定

ユーザーエージェントに合わせて適切なレンダリングが行えるように、viewport と呼ばれる値を指定します。

下記の「width=device-width」は、デバイスの表示幅に合わせた表示領域を使用することを示し「initial-scale=1.0"」は 1.0 倍の倍率で表示することを示します。 viewport を指定していない Web ページをスマートフォンで表示すると PC 用の画面が縮小されて表示されます。 viewport を指定して複数の装置のデザインを実装することをレスポンシブ Web デザインといいますが正しく実装するには、HTML に viewport を記述すると同時に CSS にレイアウト調整を行う記述が必要となります。レスポンシブ Web デザインについては「Lesson-12 RWD 対応のサイトを作りましょう」を参照してください。

HTML

<meta name="viewport" content="width=device-width,initial-scale=1.0">

(4) 検索クローラーの制御

検索サービスのインデックスを作成するために巡回しているロボットに振る舞いを要求します。検索対象に含んで欲しいページと、そうでないページを指定できます。

index

インデックスを許可

noindex

インデックスを禁止

follow

リンク先の参照を許可

nofollow

リンク先の参照を禁止

HTML

<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,nofollow">

(5) OGP の設定

SNS などで利用されている（Open Graph Protcol）という仕組みを設定できます。OGP 指定は、HTML の標準仕様ではありませんが一般的に使用されています。

HTML

<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの概要">
<meta property="og:site_name" content="サイト名">
<meta property="og:type" content="ページの種類">
<meta property="og:image" content="アイキャッチ画像のURL">

<style> スタイルシートコンテンツ </style>

HTML ファイル内にスタイルシート（CSS）を記述します。通常は、head 要素内に記述します。

一般的にスタイルシートは、スタイルシート（CSS）ファイルに記述して link 要素を使って紐付けを行いますが、ページ固有のスタイルを定義する場合は、HTML ファイルに記述した方が良い場合があります。状況によって使い分けれるようにしましょう。

使用上の注意事項

• この要素はブラウザのページに直接表示されないためレイアウトには影響を与えませんがスタイルシートとして記述した内容は、各要素のスタイルに影響を与えます。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントタイトル</title>
<style>
h1 {
	font-size: 32px;
	color: green;
}
p {
	font-size: 20px;
	color: blue;
}
</style>
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

<body> 表示内容コンテンツ </body>

ブラウザの画面に表示される領域で、この要素の範囲が HTML 文章コンテンツ領域を意味します。

使用上の注意事項

• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>ドキュメントタイトル</title>
</head>
<body>
	ここに記述された内容がブラウザの画面に表示されます。
</body>
</html>

<article> 自己完結記事コンテンツ </article>

単独で成り立つコンテンツのブロックを定義します。独立した意味のある記事であると明示できる範囲に対して使用できます。このブロックを切り出した時に前後の文脈が読み取れなくなってしまう部分には適用できません。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• セクショニング・コンテンツなので文章構造のアウトラインに影響を与えます。
• 原則として見出しを含むことを想定しています。必ず子要素に h1 ～ h6 を設置しましょう。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<article>
	<h1>タイトル</h1>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
</article>

<section> 文書構造セクションコンテンツ </section>

章（セクション）のブロックを定義します。一つのまとまりとして見なすことができる節目となります。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• セクショニング・コンテンツなので文章構造のアウトラインに影響を与えます。
• 原則として見出しを含むことを想定しています。必ず子要素に h1 ～ h6 を設置しましょう。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<section>
	<h1>タイトル</h1>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
</section>

<nav> ナビゲーションコンテンツ </nav>

ページ上の主要なナビゲーションを定義します。良く使われる場所としてヘッダーのグローバルナビゲーションやサイドバーのコンテンツナビゲーションなどがあります。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• セクショニング・コンテンツなので文章構造のアウトラインに影響を与えます。
• nav は、navigation の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<nav>
	<ul>
		<li><a href="リンク先">ナビゲーション項目</a></li>
		<li><a href="リンク先">ナビゲーション項目</a></li>
		<li><a href="リンク先">ナビゲーション項目</a></li>
		<li><a href="リンク先">ナビゲーション項目</a></li>
	</ul>
</nav>

<aside> 余談や補足コンテンツ </aside>

親要素に含まれる情報の中で余談や補足および本筋から分離しても問題のない内容のコンテンツを定義します。必ずしもサイドバーに使うことを推奨されているわけではありません。コンテンツ内容に従って適切に使用してください。このブロックを切り出した時に本筋の文脈が失われてしまう部分には適用できません。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• セクショニング・コンテンツなので文章構造のアウトラインに影響を与えます。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<aside>
	<h1>タイトル</h1>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
</aside>

<h1> レベル1 見出しコンテンツ </h1>
<h2> レベル2 見出しコンテンツ </h2>
<h3> レベル3 見出しコンテンツ </h3>
<h4> レベル4 見出しコンテンツ </h4>
<h5> レベル5 見出しコンテンツ </h5>
<h6> レベル6 見出しコンテンツ </h6>

h1 ～ h6 要素は、文章やセクションなどの見出しを定義します。レベル 1 から レベル 6 の 6 段階の見出しが定義できます。見出しは、文章のアウトラインに影響を与える重要な要素です。h1 要素から順に使用するようにしてください。h1 要素の後に h3 要素が出てくるような途中を飛ばすような使い方は避けてください。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• ヘディング・コンテンツとしてセクショニング・コンテンツで区分された要素の中で見出しを定義します。
• 文章構造のアウトラインに影響を与えます。
• 親要素が定義したセクションに定義できる h1 要素は一か所です。h2 要素以降は複数箇所で定義できます。
• h は、heading の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<section>
	<h1>タイトル</h1>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
	<h2>章の見出し</h2>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
</section>

<header> ヘッダーコンテンツ </header>

セクションの先頭となるグループを定義します。body 要素直下や article 要素の開始直後などで使用されます。例えば、body 要素直後に記載にサイト全体に共通するヘッダーとしてロゴ画像・サイトタイトルやグローバルナビゲーションなどを配置します。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• セクショニング・コンテンツではないので文章構造のアウトラインに影響を与えません。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<body>
	<header>
		<h1>タイトル</h1>
		<nav>
			<ul>
				<li><a href="リンク先">ナビゲーション項目</a></li>
				<li><a href="リンク先">ナビゲーション項目</a></li>
				<li><a href="リンク先">ナビゲーション項目</a></li>
				<li><a href="リンク先">ナビゲーション項目</a></li>
			</ul>
		</nav>
	</header>
	その他のページコンテンツ
</body>

<footer> フッターコンテンツ </footer>

セクションの終了となるグループを定義します。body 要素の最下部や article 要素の文末などで使用されます。例えば、body 要素最下部に記載しサイト全体に共通するフッターとして連絡先や著作権表示などを配置します。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• セクショニング・コンテンツではないので文章構造のアウトラインに影響を与えません。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<body>
	その他のページコンテンツ
	<footer>
		<small>著作権表示</small>
	</footer>
</body>

<address> 連絡先コンテンツ </address>

連絡先や問い合わせ先の情報を定義します。例えば、サイト運営者の住所やメールアドレスなどが記載されている範囲を示します。article 要素の中に address 要素を配置した場合は、直近の article 要素に書かれた文書に関する連絡先であることを表します。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>ご意見・ご質問は下記までお送りください。</p>
<address>
	Mail：メールアドレス<br>
	URL：サイトアドレス<br>
</address>

<p> 文書段落コンテンツ </p>

文章段落を定義します。段落の中には、テキストだけでなく画像も配置できます。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• 段落の中で改行したい場合は、br 要素を使用します。
• p は、paragraph の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<section>
	<h1>タイトル</h1>
	<p>段落を表すテキスト</p>
	<p>段落を表すテキスト</p>
	<p>段落を表すテキスト</p>
</section>

<hr>

段落と段落の間に区切りを定義します。規定値では、話題やテーマの区切りを示す要素として水平線が引かれます。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• この要素は空要素です。終了タグはありません。
• アウトラインに影響を与えませんが、段落に一区切りを付けるという意味があります。
• hr は、horizontal rule の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<article>
	<h1>タイトル</h1>
	<p>段落を表すテキスト 1</p>
	<p>段落を表すテキスト 2</p>
	<hr>
	<p>段落を表すテキスト 3</p>
	<p>段落を表すテキスト 4</p>
</article>

表示例

<pre> 整形済みテキストコンテンツ </pre>

整形済みテキストを定義します。ソースコードなどの改行やスペースが、そのままの状態で表示されます。但し、< 、>、& は、HTML タグと解釈されてしまうので &lt;、&gt;、&amp; と記述する必要があります。一般的にソースコードを表示させる場合は、pre 要素と code 要素を入れ子構造で使用します。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• pre は、preformatted text（整形済みテキスト）の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<pre>
改行やスペースが、そのままで表示されます。
br 要素がなくても改行されます。
          スペースも、そのまま表示されます。
</pre>

表示例

改行やスペースが、そのままで表示されます。
br 要素がなくても改行されます。
          スペースも、そのまま表示されます。

HTML例

<pre><code>&lt;script&gt;
function sample(a) {
    console.log(a);
}
&lt;/script&gt;
</code></pre>

表示例

<script>
function sample(a) {
    console.log(a);
}
</script>

<blockquote> 複数行の長文の引用コンテンツ </blockquote>

書籍やニュース記事などの第三者が書いたものから比較的に長文の引用を定義します。一行程度の引用は、q 要素を使用してください。

主な固有属性

cite

引用の出典を提示します。URL や書籍情報、補足事項などを記述することができます。cite 属性に関する情報を表示する場合は、cite 要素を使用します。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• 規定値では、インデント（字下げ）された状態で表示されます。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

自分で書いたテキスト
<blockquote>
引用したテキスト 1<br>
引用したテキスト 2<br>
引用したテキスト 3<br>
</blockquote>
自分で書いたテキスト

表示例

HTML例

自分で書いたテキスト
<blockquote site="https://html-css.hamaya2020.com">
引用したテキスト 1<br>
引用したテキスト 2<br>
引用したテキスト 3<br>
引用したサイト名：<cite>HTML-CSS 入門講座</cite>
</blockquote>
自分で書いたテキスト

表示例

<ul> 順序性のないリストコンテンツ </ul>

順序性のないリストを定義します。リスト項目は、li 要素を使って定義します。規定値では、リスト項目の先頭にマーカーが表示されます。リスト項目の中にリスト要素を配置して入れ子構造を作ることもできます。順序性のあるリストを定義する場合は、ol 要素を使用してください。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• マーカーの種類は、スタイルシート（CSS）で変更することができます。
• ul は、unorderd list（順序がないリスト）の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<ul>
	<li>リスト項目テキスト 1</li>
	<li>リスト項目テキスト 2</li>
	<li>リスト項目テキスト 3</li>
</ul>

表示例

HTML例

<ul>
	<li>リスト項目テキスト 1</li>
	<li>
		リスト項目テキスト 2
		<ol>
			<li>リスト項目テキスト 2-1</li>
			<li>リスト項目テキスト 2-2</li>
			<li>リスト項目テキスト 2-3</li>
		</ol>
	</li>
	<li>リスト項目テキスト 3</li>
</ul>

表示例

<ol start="開始値" reversed> 順序性のあるリストコンテンツ </ol>

順序性のあるリストを定義します。リスト項目は、li 要素を使って定義します。規定値では、リスト項目の先頭にマーカーが表示されます。リスト項目の中にリスト要素を配置して入れ子構造を作ることもできます。順序性のないリストを定義する場合は、ul 要素を使用してください。

主な固有属性

start

リスト項目のリーダーの開始値を整数で指定します。

reversed

リーダーを逆順で表示します。項目は大きい順に番号付けされます。本属性は値のない論理属性です。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• マーカーの種類は、スタイルシート（CSS）で変更することができます。
• ol は、orderd list（順序のあるリスト）の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<ol>
	<li>リスト項目テキスト 1</li>
	<li>リスト項目テキスト 2</li>
	<li>リスト項目テキスト 3</li>
</ol>

表示例

HTML例

<ol start="5" reversed>
	<li>リスト項目テキスト 1</li>
	<li>リスト項目テキスト 2</li>
	<li>リスト項目テキスト 3</li>
</ol>

表示例

HTML例

<ol>
	<li>リスト項目テキスト 1</li>
	<li>
		リスト項目テキスト 2
		<ul>
			<li>リスト項目テキスト 2-1</li>
			<li>リスト項目テキスト 2-2</li>
			<li>リスト項目テキスト 2-3</li>
		</ul>
	</li>
	<li>リスト項目テキスト 3</li>
</ol>

表示例

<li> リスト項目コンテンツ </li>

リストのリスト項目を定義します。li は list item を短縮したものです。ul 要素（順序性のないリスト）、ol 要素（順序性のあるリスト）の子要素として使用します。リスト項目の先頭にマーカーが表示されます。

主な固有属性

value

ol 要素（順序性のあるリスト）の場合にマーカーの値を整数で指定します。通常は、1 から始まる値を途中で変更することができます。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• li 要素の display の値は、list-item になります。。
• マーカーの規定値は、親要素の規定値になります。
• マーカーの種類は、スタイルシート（CSS）で変更することができます。
• li は、list item の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<ul>
	<li>順序性のないリスト項目テキスト 1</li>
	<li>順序性のないリスト項目テキスト 2</li>
	<li>順序性のないリスト項目テキスト 3</li>
</ul>

表示例

HTML例

<ol>
	<li>順序性のあるリスト項目テキスト 1</li>
	<li>順序性のあるリスト項目テキスト 2</li>
	<li>順序性のあるリスト項目テキスト 3</li>
</ol>

表示例

<dl> 定義リストコンテンツ </dl>

定義する用語と用語の説明や解説を組み合わせた定義リストを定義します。定義リストコンテンツには、用語を表す dt 要素と説明を表す dd 要素を組み合わせて記述します。dt 要素と dd 要素の組み合わせは、複数記述することができます。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• dl は、definition list（定義リスト）の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<dl>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
</dl>

表示例

float プロパティを使用した横並び

HTML例

<dl class="dl-01">
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
</dl>

CSS例

dl.dl-01 dt {
	float: left;
}
dl.dl-01 dd {
	margin-left: 120px;
}

表示例

flexbox（フレックスレイアウト）を使用した横並び

HTML例

<dl class="dl-02">
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
</dl>

CSS例

dl.dl-02 {
	display: flex;
	flex-wrap: wrap;
}
dl.dl-02 dt {
	width: 120px;
}
dl.dl-02 dd {
	margin-left: 0;
	width: calc(100% - 120px);
}

表示例

<dt> 定義リストの用語コンテンツ </dt>

定義する用語と用語の説明や解説を組み合わせた定義リストの用語を定義します。dt は definition team を短縮したものです。dt 要素は、dl 要素の子要素で使用します。また、用語の説明や解説には dd 要素を使用します。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• dt は、definition team の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<dl>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
</dl>

表示例

<dd> 定義リストの用語の説明や解説コンテンツ </dd>

定義する用語と用語の説明や解説を組み合わせた定義リストの用語の説明や解説を定義します。dd 要素は、dl 要素の子要素で使用します。また、用語には dt 要素を使用します。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• dd は、definition description の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<dl>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
</dl>

表示例

<figure> 写真・図表コンテンツ </figure>

写真や図表などの自己完結した情報を定義します。figure 要素で定義する内容は、別の場所に移動しても前後のコンテンツに影響を与えないものとされています。写真や図表のキャプションを指定する場合は、figcaption 要素を figure 要素の一番最初または一番最後の子要素として指定します。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<figure>
	<figcaption>画像のキャプション</figcaption>
	<img src="images/sample1.jpg" alt="Sample Image" width="600" height="400">
</figure>

<figcaption> 写真・図表のキャプションコンテンツ </figcaption>

写真や図表などキャプションを定義します。figcaption 要素は、figure 要素の子要素として使用します。キャプションを指定する場合は、figcaption 要素を figure 要素の一番最初または一番最後の子要素として指定します。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<figure>
	<figcaption>画像のキャプション</figcaption>
	<img src="images/sample1.jpg" alt="Sample Image" width="600" height="400">
</figure>

<div> ブロックレベル要素コンテンツ </div>

汎用的なブロックレベルのコンテナを定義します。div 要素は、文章の意味や文脈には影響を与えないで見た目をスタイルシートで設定する場合などで使用します。文章の意味や文脈に影響を与える部分には適切な要素を使用してください。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• 文章のアウトラインには影響を与えません。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<div>
	<img src="images/sample1.jpg" alt="Sample Image" width="600" height="400">
	<p>段落を表すテキスト</p>
</div>

<main> 主要文書コンテンツ </main>

文章の中で主要な部分を定義します。ヘッダーやフィッターを除く文章の中の主要コンテンツになります。

使用上の注意事項

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• 文章のアウトラインには影響を与えません。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<body>
	<header>
		<h1>タイトル</h1>
	</header>
	<main>
		<h2>見出し</h2>
		<p>段落テキスト</p>
	</main>
	<footer>
		<p>フッターテキスト</p>
	</footer>
</body>

<a href="リンク先URL" target="リンク先を開く環境" rel="リンク先との関係"> リンクコンテンツ </a>

リンクコンテンツに対してリンク（ハイパーリンク）を定義します。a は anchor を短縮したものです。リンクコンテンツには、テキストだけでなく画像などを指定することもできます。

主な固有属性

href

リンク先 URL を指定します。リンク先がページ内の特定の場所になる場合は、ハッシュ（#）に続けて id 名を指定します。メールアドレスや電話番号を指定することもできます。

target

リンク先を開くフレーム名やウィンドウ名を指定します。以下の名前は特別な意味を持ちます。

_self

同じウィンドウで開きます。（初期値）

_blank

新しいタブまたは新しいウィンドウで開きます。

rel

リンク先との関係を指定します。

noopener

外部サイトへ移動する場合に発信元の文章改ざんを防ぎます。リンク先が信頼できない場合は指定してください。

noreferrer

Referer ヘッダー情報を発信したくない場合に指定します。リンク先が信頼できない場合は指定してください。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、文字の色やアンダーラインと訪問済み効果などが設定されています。
• target 属性に _blank を使用した時に悪意ある外部サイトを指定しまうと外部サイトから自サイトを操作されるという脆弱性があります。これを回避するために外部サイトを指定する時は rel 属性に noopener と noreferrer を同時に指定して外部サイトからの参照を無効にしてください。
• a は、anchor の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p><a href="URL">通常のリンク先</a></p>
<p><a href="URL" target="_blank">リンク先を新しタブまたは新しいウィンドウで開く</a></p>
<p><a href="URL" target="_blank" rel="noopner noreferrer">
	信頼できないリンク先を新しタブまたは新しいウィンドウで開く
</a></p>
<p><a href="#id名">自ページ内の id 名へのリンク</a></p>
<p><a href="mailto:test@sample.com">メールアドレスへのリンク</a></p>
<p><a href="tel:03-0000-0000">電話番号へのリンク</a></p>

<em> 強調コンテンツ </em>

文章の中で強調したい文字列を定義します。ここでの強調は、主張や力説というニュアンスを含みます。似たような要素に strong 要素がありますが、こちらは重要性、重大性、緊急性が高い場合に適しています。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、斜体文字（イタリック体）が設定されています。
• em は、emphasis の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>前後の文章 <em>強調する文字列</em> 前後の文章</p>

表示例

<strong> 重要情報コンテンツ </strong>

文章の中で重要性、重大性、緊急性が高い文字列を定義します。読者に一番最初に伝えたい情報や優先して覚えてほしい情報などを示します。似たような要素に em 要素がありますが、こちらは主張や力説したい場合に適しています。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、太字（ボールド）が設定されています。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>前後の文章 <strong>重要な文字列</strong> 前後の文章</p>

表示例

<small> 付帯注釈コンテンツ </small>

主要なコンテンツに付随する短いコメントや保尊を定義します。免責事項や著作権表記、注意事項、警告文などを示します。数行に渡る文章や、それ自体が主体となる文章には適しません。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、一回り小さい文字サイズが設定されています。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<article>
	<h1>牛丼価格</h1>
	<ul>
		<li>並盛り ¥400 <small>(税込み)</small></li>
		<li>大盛り ¥500 <small>(税込み)</small></li>
	</ul>
</article>
<footer>
	<small>&copy; 2024 Gyuudon-ya.Co.,Ltd.</small>
</footer>

表示例

<s> 不正確内容コンテンツ </s>

文章の中で正確ではなくなった内容、最新のものではなくなった情報を定義します。時系列で情報が更新された場合に過去情報を残していきたい場合などに適しています。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、打消し線が設定されています。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>
	<span><s>通常価格：900円</s></span>　<span>セール価格：700円</span>
</p>

表示例

<cite> 創作物のタイトルコンテンツ </cite>

引用された創作物のタイトルを定義します。引用は内容ではなくタイトルに適用します。短い引用には、q 要素、複数行の長文の引用には、blockquote 要素を使用してください。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、斜体文字（イタリック体）が設定されています。
• cite は、citation の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>HTML/CSSの勉強には、<cite>HTML-CSS 入門講座</cite> という Web サイトを活用すると良いです。</p>

表示例

<q cite="引用情報URL"> 短い引用コンテンツ </q>

行に収まる程度の短い引用を定義します。複数行に渡る引用の場合は blockquote 要素、引用元のタイトルの場合は cite 要素を使用してください。

主な固有属性

cite

引用した情報に関する URL を指定します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、対象の文字列が引用符（“”）またはカギカッコ（「」）などで囲まれます。どの文字で囲まれるかは言語設定（html 要素の lang 属性）によります。
• q は、quotation の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>引用前後の文章<q>引用文字列</q>引用前後の文章</p>

表示例

<dfn title="正式名称"> 用語定義コンテンツ </dfn>

用語を定義します。この要素を使用する場合は、直近の親要素（セクションや段落）には、定義される用語の説明文が含まれなければいけません。用語の定義を行うのは最初の一度だけで二回目以降は必要がありません。

本要素に title 属性を指定した場合は、その値が定義する用語の正式名称になります。また、本要素の子要素に abbr 要素（略語の定義）を配置した場合は、abbr 要素の title 属性に指定した値が定義する用語の正式名称になります。

主な固有属性

title

定義する用語の正式名称を指定します。

1. dfn 要素に title 属性が指定されていれば、その値が正式名称になります。
2. dfn 要素の子要素に abbr 要素が配置されていて、その abbr 要素に title 属性が指定されていれば、その値が正式名称になります。
3. 上記に該当しない場合は、dfn 要素で定義した用語が正式名称とみなされます。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、斜体文字（イタリック体）が設定されています。
• dfn は、definition の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>Webページの作成は、<dfn>HTML</dfn>（HyperText Markup Language）を使用してマークアップします。</p>

表示例

HTML例

<p>Webページの作成は、<dfn title="HyperText Markup Language">HTML</dfn> を使用してマークアップします。</p>

表示例

HTML例

<p>Webページの作成は、<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> を使用してマークアップします。</p>

表示例

<abbr title="正式名称"> 略語定義コンテンツ </dfn>

略語を定義します。本要素に title 属性を指定することで正式名称を指定できます。ここで指定した正式名称は、マウスオーバーすると（マウスカーソルを合わせると）ツールチップとして表示します。

dfn 要素と abbr 要素を組み合わせて使用することで用語の定義と略語の定義を同時に行うことができます。

主な固有属性

title

定義する略語の正式名称を指定します。マウスオーバーするとツールチップとして表示します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• title 属性を指定した場合には、規定値で破線のアンダーラインが設定されています。
• abbr は、abbreviation の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>Webページの作成は、<abbr>HTML</abbr>（HyperText Markup Language）を使用してマークアップします。</p>

表示例

HTML例

<p>Webページの作成は、<abbr title="HyperText Markup Language">HTML</abbr> を使用してマークアップします。</p>

表示例

HTML例

<p>Webページの作成は、<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> を使用してマークアップします。</p>

表示例

<data value="識別情報"> 識別情報付与コンテンツ </dfn>

識別情報付与コンテンツに対して value 属性を使用して識別情報を定義します。例えば、商品名に対して商品コードを付与する場合などで使用します。与えるデータが日付や時間の場合は、time 要素を使用します。

主な固有属性

value

付与する識別情報を指定します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<ul>
	<li><data value="S1001">商品A</data></li>
	<li><data value="S1002">商品B</data></li>
	<li><data value="S1003">商品C</data></li>
</ul>

表示例

<time datetime="日付時刻情報"> 日付・時刻コンテンツ </dfn>

日付や時刻を定義します。日付・時刻コンテンツに日付時刻情報を記述する場合と、日付・時刻コンテンツには日付や時刻に関連する事項を記述して datetime 属性に実際の日付時刻情報を記述する場合があります。

主な固有属性

datetime

日付時刻情報を指定します。指定する情報に応じたフォーマットで指定します。以下はフォーマットの例です。

年

2024

年月

2024-09

月日

09-10

年月日

2024-09-10

時刻

10:12

時刻秒

10:12:30

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<time>2024-09-10</time>

表示例

HTML例

<time datetime="12:00:00">ランチタイム</time>

表示例

<code> ソースコードコンテンツ </code>

プログラムやスクリプトのソースコードを定義します。対応しているブラウザでは均等フォントで表示します。一般的にソースコードを表示させる場合は、pre 要素と code 要素を入れ子構造で使用します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、均等フォントが設定されています。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<code>console.log("テキスト");</code>

表示例

HTML例

<pre><code>&lt;script&gt;
function sample(a) {
    console.log(a);
}
&lt;/script&gt;
</code></pre>

表示例

<script>
function sample(a) {
    console.log(a);
}
</script>

<var> 変数・引数コンテンツ </var>

プログラムで使用する変数や引数を定義します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、斜体文字（イタリック体）が設定されています。
• var は、variable（変数）の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p><var>y</var> = <var>a</var> * <var>x</var> + <var>b</var> ;</p>

表示例

HTML例

<pre><code>&lt;script&gt;
function sample(<var>a</var>) {
    console.log(<var>a</var>);
}
&lt;/script&gt;
</code></pre>

表示例

<script>
function sample(a) {
    console.log(a);
}
</script>

<samp> 出力サンプルコンテンツ </samp>

プログラムの出力結果のサンプルを定義します。プログラムによる計算結果を表示させる場合は、output 要素を使用してください。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、均等フォントが設定されています。
• samp は、sample の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>サーバーからの出力メッセージ：<samp>処理が正常に終了しました。</samp></p>

表示例

<kbd> キーボード入力文字コンテンツ </kbd>

キーボードからの入力文字を定義します。キーボードを操作した時に得られる効果などを説明する時に使用します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、均等フォントが設定されています。
• kbd は、keyboard の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>文字列のコピー操作</p>
<ul>
	<li>Windowsの場合：<kbd>Ctrl</kbd> + <kbd>C</kbd></li>
	<li>MacOSの場合：<kbd>Command</kbd> + <kbd>C</kbd></li>
</ul>

表示例

<sub> 下付き文字コンテンツ </sub>

下付き文字を定義します。数式や化学式など表記上の理由がある場合に有効です。同じような目的で上付き文字を定義したい場合は、sup 要素を使用します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、文字が小さくなりベースラインよりも低い位置に表示されるように設定されています。
• sub は、subscript の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>水の分子式は、H<sub>2</sub>O です。</p>

表示例

<sup> 上付き文字コンテンツ </sup>

上付き文字を定義します。数式や化学式など表記上の理由がある場合に有効です。同じような目的で下付き文字を定義したい場合は、sub 要素を使用します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、文字が小さくなりベースラインよりも高い位置に表示されるように設定されています。
• sup は、superscript の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>y = x<sup>2</sup></p>

表示例

HTML例

<p>Webサイトの作成には、HTML<sup>*1</sup> を使用します。</p>
<p>*1 HTML：HyperText Markup Language</p>

表示例

<i> 慣用句・特定用語コンテンツ </i>

慣用句や特定用語などで前後の言葉と区別したい用語を定義します。例えば、技術的な専門用語、学術的な言葉、あるいは誰かが言ったことわざや慣用句などです。

以前は、文字列を斜体文字（イタリック体）にするための要素として使用されていましたが、現在は文脈上の意味が定義されていますので斜体文字（イタリック体）にするために使用しないでください。

類似の要素として、em 要素（強調）、strong 要素（重要情報）、dfn 要素（定義語）などがありますので文章により適切な要素を使用するようにしてください。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、斜体文字（イタリック体）が設定されています。
• i は、italic の略称です。（意味づけが変更になっています）
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>Webサイトは、HTML を使用して <i>ハイパーリンク</i> を設定します。</p>

表示例

<b> 太字コンテンツ </b>

文章の中で意味的な重要性を与えずに注目してほしい箇所を定義します。規定値では太字（ボールド体）になりますが意味的な変化はありません。

言葉の意味を強調したり重要性を伝えるために使用してはいけません。協調したい場合は em 要素、重要性や緊急度を表す場合は strong 要素を使用してください。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、太字（ボールド体）が設定されています。
• b は、bold の略称です。（意味づけが変更になっています）
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>前後の文章 <b>注目してほしい箇所</b> 前後の文章</p>

表示例

<u> 注釈コンテンツ </u>

指定した範囲に非言語的な注釈があることを定義します。非言語的な注釈とは文脈的に注意を促したい文字列で、例えば英語で表記した場合のスペルミスや誤解を招きかねない固有名詞などです。

以前は、文字列に下線（アンダーライン）を引くための要素として使用されていましたが、現在は文脈上の意味が定義されていますので下線（アンダーライン）を引くために使用しないでください。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、下線（アンダーライン）が設定されています。
• u は、under line の略称です。（意味づけが変更になっています）
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>Webサイトが正しく表示されないのは、header 要素の綴りが <u>head</u> になっているためです。</p>

表示例

<mark> マーキングコンテンツ </mark>

文脈の中で関連性のある文字列のマーキングを定義します。これは重要性がある箇所ではなく使用者の操作に関連している箇所に使用します。例えば、検索結果の画面で検索ワードに一致している部分をハイライトにする場合などに適しています。

対象の文字列を強調したい場合は em 要素、重要性や緊急性を与えたい場合は strong 要素を使用してください。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、背景のハイライト表示が設定されています。
• mark は、marking の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>文章の中で <mark>ハイライトしたい部分</mark> に設定します。</p>

表示例

<ruby> ルビ文字の範囲コンテンツ </ruby>

ルビを振る対象の文字列を定義します。ルビは漢字などの特定の文字列に対してふりがなや発音などを小さな文字で表示するものです。対象の文字列の後ろにカッコ付きでふりがなを記述する方法もありますがルビを使用することで可動性や視認性を向上させることもできます。

ルビに関連する要素として、ruby 要素（ルビ文字の範囲）、rt 要素（ルビの内容）、rp 要素（ルビ非対応時の読みがな）などがあります。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、ruby 要素で指定した文字列の上に rt 要素で指定したルビが均等に表示されます。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>ruby 要素は、;<ruby>漢字<rt>かんじ</rt></ruby> のようにふりがなを表示します。</p>
<p>ふりがなが長い場合は、;<ruby>5<rt>ファイブ</rt></ruby> のように表示されます。</p>
<p>ふりがなが短い場合は、;<ruby>シックス<rt>6</rt></ruby> のように表示されます。</p>

表示例

<rt> ルビの内容コンテンツ </rt>

ルビの内容を定義します。ルビ文字の範囲は、ruby 要素で指定します。

ルビに関連する要素として、ruby 要素（ルビ文字の範囲）、rt 要素（ルビの内容）、rp 要素（ルビ非対応時の読みがな）などがあります。

使用上の注意事項

• ルビは対象となる文字列の半分の大きさに縮小され対象文字列の上部に表示されます。
• rt は、ruby text の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>ruby 要素は、;<ruby>漢字<rt>かんじ</rt></ruby> のようにふりがなを表示します。</p>
<p>ふりがなが長い場合は、;<ruby>5<rt>ファイブ</rt></ruby> のように表示されます。</p>
<p>ふりがなが短い場合は、;<ruby>シックス<rt>6</rt></ruby> のように表示されます。</p>

表示例

<rp> ルビ非対応時のよみがなコンテンツ </rp>

ruby 要素が非対応の環境だった場合の代替文字として表示するカッコ記号などを定義します。

ルビに関連する要素として、ruby 要素（ルビ文字の範囲）、rt 要素（ルビの内容）、rp 要素（ルビ非対応時の読みがな）などがあります。

使用上の注意事項

• 多くのブラウザは、ruby 要素に対応しているため rp 要素の内容は可視化されません。
• rp 要素は、rt 要素の直前あるいは直後にだけ配置してください。
• rp は、ruby parentheses の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>ruby 要素は、;<ruby>漢字<rp>（</rp><rt>かんじ</rt></rp>）</rp></ruby> のようにふりがなを表示します。</p>

表示例

もし、使用しているブラウザが ruby 要素に対応していない場合は、以下のように表示されます。

表示例

<bdi> 別の書式方向コンテンツ </bdi>

ページに指定されている書字方向と分離させて別の書字方向を与えたい範囲を定義します。bdi は Bi-Directional Isolation を短縮したもので分離双方向要素という意味を持っています。

書字方向とは、文字を書き始める方向の事であり、通常は、左横書き（LTR：Left To Right）を想定していますので英語や日本語を使う場合は、特に意識する必要はありません。しかし、文章の一部にアラビア語などの右横書き（RTL：Right To Left）が存在する場合は、その部分を分離する必要があります。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>Player <bdi>ارقام عربية</bdi> 123 points.</p>

表示例

<bdo dir="書字方向"> 書字方向指定コンテンツ </bdo>

ページの基本的な書字方向を左横書き（LTR：Left To Right）か右横書き（RTL：Right To Left）を定義します。文字列の並び方が変わるだけで文字自体が反転するわけではありません。

主な固有属性

dir

書字方向を指定します。

ltr

左横書き（LTR：Left To Right）を指定（初期値）

rtl

右横書き（RTL：Right To Left）を指定

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>今日は晴天です。Happy!</p>
<p><bdo dir="rtl">今日は晴天です。Happy!</bdo></p>

表示例

<span> インライン要素の範囲コンテンツ </span>

汎用的なインラインレベルのコンテナを定義します。これ自体はコンテンツに対する意味の持たせるものではありませんが特定の範囲をまとめてスタイルシート（CSS）を適用したい場合などに使用します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>前後の文字列 <span style="color: red;">特定の文字列</span> 前後の文字列</p>

表示例

<br>

文章の中の改行位置を定義します。一つの段落の中で改行を行いたい場合に使用します。

文章の見た目（スタイル）を整える目的で連続した改行を行ったり、段落を変える意味で改行を行うことは推奨されていません。視覚的な調整を行う場合はスタイルシート（CSS）を用いてください。

使用上の注意事項

• レイアウトの初期値はインラインレベルですが文章の改行に影響を与えます。
• この要素は空要素です。終了タグはありません。
• br は、break の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>東京都千代田区1-1-1<br>TEL：03-0000-0000<br>Mail：abc@sample.com</p>

表示例

<wbr>

文章の中の改行して良い位置を定義します。要素の幅が足りている時は改行しないで、足りなくなった時に改行する位置になります。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えるかどうかは要素の幅とコンテンツの内容によります。
• この要素は空要素です。終了タグはありません。
• wbr は、word break の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz</p>

表示例

<ins cite="追加情報の参照先URL" datetime="情報を追加した日時"> 追加部分コンテンツ </ins>

文章の中で新たに追加された範囲を定義します。公開済みのドキュメントを編集して新しく書き加えられた箇所を明示するために使用します。

属性を使用して追加された情報に関する具体的な参照先 URL や日時を指定することができます。文章から削除された箇所には、del 要素を使用してください。

主な固有属性

cite

追加情報に関する具体的な参照先 URL を指定します。

datetime

情報を追加した日時を指定します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、アンダーラインが設定されています。
• ins は、insert の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>前後の文字列 <del>削除したの文字列</del> <ins>追加した文字列</ins> 前後の文字列</p>

表示例

<del cite="削除情報の参照先URL" datetime="情報を削除した日時"> 削除部分コンテンツ </del>

文章の中で削除された範囲を定義します。公開済みのドキュメントで削除した箇所を残したい場合に使用します。

属性を使用して追加された情報に関する具体的な参照先 URL や日時を指定することができます。文章に追加した箇所には、ins 要素を使用してください。

主な固有属性

cite

削除情報に関する具体的な参照先 URL を指定します。

datetime

情報を削除した日時を指定します。

使用上の注意事項

• レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
• 規定値では、消し線が設定されています。
• del は、delete の略称です。
• ブラウザの対応状況は、caniuse サイトで確認してください。
• 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例

<p>前後の文字列 <del>削除したの文字列</del> <ins>追加したの文字列</ins> 前後の文字列</p>

表示例