HTML

HTML is a markup language used to create web pages and provides elements to define the structure and meaning of content.

HTMLについて

タグ一覧

HTMLとは
ウェブページを構成する文章や画像・リンクなどの情報を「タグ」で区分し、ブラウザに正しく表示させるための基本となるマークアップ言語です。
HTMLの基礎知識
変更点の概要
構文チェック
セクション
アウトライン・アルゴリズム
ARIA 属性
支援技術を利用するユーザーがWebコンテンツを正しく認識・操作できるようにするための補助情報を提供するHTMLの拡張仕様です。

HTMLファイルの基本構造を理解する

最低限必要なHTML
エラーとならないために最低限必要な HTMLタグです。
<!DOCTYPE html>, <html>, <head>, <body> タグの役割と基本的な関係。
文字エンコーディング（<meta charset="UTF-8">）
Webページ内の文字を正しく表示するために、文字を数値に変換するルール（文字コード）をブラウザに伝えるしくみのことです。

基本的なHTMLタグを覚える

見出しタグ（<h1>〜<h6>）
ページの構造を階層化して分かりやすくするためのタグ。
段落・改行タグ（<p>, <br>）
文章を区切る段落や、任意の箇所で改行する方法。
強調タグ（<strong>, <em>）
視覚的な強調だけでなく、スクリーンリーダーへの読み上げにも影響がある。
コメントアウト（<!-- -->）
コードにメモを残すときやテスト用の一時的なタグを無効化したいときの使い方。
void要素（空要素）
内容を持たず、開始タグのみで機能し、終了タグが不要な要素のことです。

グローバル属性（共通属性）

グローバル属性とは
代表的なグローバル属性の概要
id / class
  • 要素を一意に識別したり、複数の要素をグループ化したりする。
  • CSSやJavaScriptとの連携で必須となる概念。
style
  • 要素に直接スタイルを適用するが、基本的には外部CSSの利用を推奨。
title
  • マウスオーバーした時に説明が表示されるツールチップ的な用途。
data-* 属性
  • 独自データを要素に持たせられる。
  • JavaScriptで利用するケースが多い。
lang
  • 要素の言語を明示することでアクセシビリティやSEO向上を図る。
tabindex
  • キーボード操作順序を制御するための属性。
グローバル属性を正しく使う意義

リンク・画像の挿入

リンクタグ（<a>）
画像挿入タグ（<img>）

リストを使って情報を整理する

順序付きリスト（<ol>）、順序なしリスト（<ul>）
定義リスト（<dl>）

テーブルで表を作成する

テーブルの基本構造（<table>, <tr>, <td>, <th>）
テーブルレイアウトとHTMLの役割の区別

フォームを作成する

フォーム要素（<form>）の基本
入力要素（<input>）, ラベル（<label>）, ボタン（<button>）など

セマンティックHTMLの考え方

セマンティックタグ（<header>, <main>, <footer>, <section>, <article>など）
従来の<div>多用との違い

メタデータとSEOの基礎

メタタグ（<meta>）
タイトルや見出しの最適化

構造化データ

構造化データとは
Webページ内の情報を検索エンジンなどが機械的に理解しやすいように、特定の形式で追加情報（マークアップ）を付与する仕組みのことです。
マイクロデータの基本
JSON-LD の概要
RDFa の概要
実装上の注意点やメリット

HTML5の新機能概要

新要素（<video>, <audio>, <canvas>など）
フォーム機能の拡張（HTML5入力タイプ）

CSSやJavaScriptとの連携を見通す

外部ファイルリンク（<link>や<script>）
基本的なCSSとJavaScriptの設置場所

コードを整理する・保守しやすくするためのコツ

インデントやコメントの付け方
ファイル構成の考え方

Web標準とアクセシビリティ

W3Cの勧告とバリデーション
アクセシビリティの基本

学習を続けるためのリファレンス・応用例

公式ドキュメントやMDN（Mozilla Developer Network）の活用
実践的なサンプルコードを活用する

タグ一覧

<!DOCTYPE>
書かれた HTML文書が、どのバージョンで書かれたものかを宣言します。（文書型宣言）
<!-- ～ --> comment
コメント（注釈）を挿入する。
a 要素
テキストや画像などをクリック可能にして、別のページや特定の場所に移動させるためのリンクを作るタグです。
abbr 要素
省略語
accesskey 属性
特定の要素にキーボードショートカットを割り当てることで、ユーザーがマウスを使わずに素早くアクセスできるようにするための機能です。
address 要素
ページや記事などのコンテンツに対する「作者や運営者の連絡先情報」をセマンティックに示すための要素です。
alt 属性
img要素において画像が表示できなかった場合や、area要素における領域内のフォールバックとして利用される代替テキストを指定します。
applet 要素 [廃止] → object 要素
Javaアプレットを挿入するためのタグです。
area 要素
イメージマップのハイパーリンク
aria-checked 属性
チェックボックスやラジオボタン、トグルスイッチなどの要素の選択状態（選択済み・未選択・部分選択）を支援技術に伝えるためのWAI-ARIA属性です。
aria-describedby 属性
特定の要素に対する補足説明を別の要素の id を指定して関連付け、スクリーンリーダーがその説明を読み上げるようにするためのHTMLのアクセシビリティ属性です。
aria-label 属性
画面上に表示されないテキストラベルを要素に付与してスクリーンリーダーなどの支援技術に正しい情報を伝え、アイコンボタンなど可視テキストのない要素でも意味や機能を明確に示すための属性です。
aria-labelledby 属性
「この要素をラベルとして使ってください」として他の要素を参照し、スクリーンリーダーなどに正しいラベルを伝えるための属性です。
article 要素
記事または完全なコンテンツを定義します。
aside 要素
二次的なコンテンツまたは関連コンテンツを定義します。
audio 要素
オーディオ
b 要素
ボールド表記が通例のテキスト
base 要素
Webページ内のすべてのリンクの URLを基準とするための設定を行う。
bdi 要素
書字方向が異なるテキストを表す。
bdo 要素
テキストの方向性書式を明示的に指定するために使います。
bgsound 要素 [廃止] → audio 要素
ページが開かれた際にバックグラウンドに効果音や BGM等のサウンドデータを再生します。
blink 要素 [廃止] → 点滅する CSS
テキストを点滅させる。
blockquote 要素
文章や他サイトなどからの抜粋をブロックレベルで明示し、文書構造上の意味付けと可読性の向上を同時に実現するために使われる引用要素です。
body 要素
ドキュメントの本文
br 要素
改行を表現する。
button 要素
ユーザーがクリックすることで何らかのアクションを実行するためのボタンを作成する。
canvas 要素
動的グラフィック
caption 要素
テーブルにタイトルを追加する。
cite 要素
引用元のタイトルや作品名。
class 属性
要素に CSSでスタイルを適用するためのクラス名を付ける際によく使われる。
code 要素
コンピュータのコードをマークアップするときに使います。
col 要素
テーブルで使用され、特定の縦列にスタイルや属性を適用するために使用されます。
colgroup 要素
テーブルの列のグループ
colspan 属性
横方向にまたぐセルの数を指定する。
command 要素
コマンド
contenteditable 属性
要素をブラウザ上で直接編集可能なテキストエリアのように扱えるようにするためのHTML属性です。
contextmenu 属性
要素を右クリックしたときのメニューを指定する属性。
注意 : contextmenu属性は HTML5ではサポートされていません。使用しないように注意しましょう。
data 要素
人間向けに表示するテキストと機械が解釈しやすい数値や識別子などの値を結びつけ、よりセマンティックに情報を取り扱うための要素です。
datalist 要素
フォームの入力欄などで入力候補となるデータリストを定義する。
data-* 属性
要素にカスタム（独自、オリジナル）データを指定する属性。
dd 要素
同じリスト内の<dt>（定義する用語）に対して、その意味や説明を示すために使われるタグです。
del 要素
削除テキスト
details 要素
備考や操作手段などの詳細情報を示す。
dfn 要素
定義語
dialog 要素
Webページ内にモーダルダイアログを表示するためのコンテナ要素です。
dir 要素 [非推奨] → ul要素
リストを表示するタグですが、正式に対応しているブラウザはほとんどなく、多くのブラウザでの表示は ul要素と同様になります。
dir 属性
要素内のテキストの書字方向を指定する属性。
div 要素
特定の意味（セマンティクス）を持たない汎用的なブロック要素で、ページのレイアウトやコンテンツのグループ化に利用される「区切りの箱」のような存在です。
dl 要素
用語（<dt>）とその説明（<dd>）を対にしてまとめるための説明リストを作る要素です。
draggable 属性
要素をドラッグ可能かどうかを指定する属性。
dropzone 属性 [非推奨]
ドラッグ＆ドロップ機能の一部として要素にドロップされるファイルの取り扱い方法（コピー、移動、リンク）を指定する目的で提案されたものの、現行のブラウザではほぼサポートされず事実上非推奨となっているHTML属性です。
dt 要素
定義リスト内で用語や項目名を示すために使われるタグです。
em 要素
文章内で文脈上の特別な強調を示し、ブラウザやスクリーンリーダーなどにも「ここを重要に読むべき部分」というニュアンスを伝えるためのセマンティックなタグです。
embed 要素
プラグイン
fieldset 要素
フォーム内の関連する入力項目をひとまとめにして、<legend>要素でタイトルを付けることで、内容をわかりやすく整理するための要素です。
figcaption 要素
図画のキャプション
figure 要素
キャプション付き図画
font 要素 [非推奨]
font要素はフォントの種類・大きさ・色を指定します。
footer 要素
ページまたはセクションのフッター領域を定義する。
form 要素
サブミット・フォーム
frame 要素
frameset要素で分割された各フレームに表示するファイルと表示方法を指定する。
frameset 要素 [非推奨]
ウィンドウをいくつかのフレームに分割する。
h1～h6 要素
Webページの見出しを階層的に示すことで、ページの構造を明確にし、読みやすさやSEO、アクセシビリティを向上させるために使われるタグです。
head 要素
ドキュメントのメタデータを格納します。
header 要素
ページまたはセクションのヘッダー領域を定義する。
hgroup 要素
見出しのグループ
hidden 属性
要素が無関係であることを示す属性。
hr 要素
テーマの変わり目
html 要素
Webページのルート要素であり、全ての要素を囲む親要素です。
i 要素
イタリック表記が通例のテキスト。
id 属性
要素に固有の識別名（id）を指定する。同じ識別名はページ内で１回しか使えません。
iframe 要素
インラインフレームを作る際に使用します。
img 要素
イメージ
input 要素
テキスト入力、パスワード入力、ラジオボタン、チェックボックス、ファイル選択などのフォームコントロールを提供します。
accept
サーバーが受け入れるファイルの種類を指定する属性。
autocomplete
入力候補を提示して入力内容を自動補完する。
autofocus
入力欄にカーソルを当てて自動フォーカスする。
min max
入力できる最小値と最大値を指定する。
multiple
複数の値を入力・選択できるようにする。
pattern
正規表現で入力値のパターンを指定する。
placeholder
input 要素の placeholder 属性で指定した値が、入力欄に初期値として表示されます。
required
入力必須であることを示す。
step
入力欄で刻むステップ値を指定する。
type="button"
汎用ボタンを作成する。
type="checkbox"
チェックボックスを作成する。
type="color"
色の入力欄を作成する。
type="date"
カレンダーなどの UIを使って直感的に日付を入力でき、サーバーには ISO 8601形式（YYYY-MM-DD）で送信される便利なフォーム要素です。
type="datetime"【廃止】
UTC（協定世界時）による日時の入力欄を作成する。
type="datetime-local"
UTC（協定世界時）によらないローカル日時の入力欄を作成する。
type="email"
メールアドレスの入力欄を作成する。
type="file"
サーバにファイルを送信する。
type="hidden"
非表示データを送信する。
type="image"
画像ボタンを作成する。
type="month"
月の入力欄を作成する。
type="number"
数値の入力欄を作成する。
type="password"
ユーザーがパスワードなどの機密情報を入力する際に、入力文字が●などでマスキングされるように設計されたフォーム用の入力要素です。
type="radio"
ユーザーが複数の選択肢から一つだけ選べるボタンを提供する HTMLのフォーム要素です。
type="range"
スライダーを表示する入力フィールドを作成する。
type="reset"
入力内容の初期化（リセット）の場合に使用されます。
type="search"
検索テキストの入力欄を作成する。
type="submit"
送信ボタンを作成する。
type="tel"
電話番号の入力欄を作成する。
type="text"
１行のテキストボックスを作成する。
type="time"
時間の入力欄を作成する。
type="url"
URLの入力欄を作成する。
type="week"
ユーザーがカレンダーから年と週を選択できるようにするフォームフィールドです。
ins 要素
挿入テキスト
isindex 要素 [廃止] → <input type="search">
検索キーワードの入力欄を作る。
kbd 要素
キーボード入力やショートカットなど、ユーザーが行う入力操作を示すための要素です。
keygen 要素 [非推奨]
フォーム送信時にキーを発行する。
label 要素
フォームコントロールに対して名前や説明を関連付け、ユーザーや支援技術にその入力欄の意味を正確に伝えるために使う要素です。
lang 属性
要素内の言語コードを指定する属性。
legend 要素
タイトルや説明
li 要素
箇条書きや番号付きリストといったリスト構造の各項目を表すために、<ul>や<ol>などのリスト要素の子要素として使用される要素です。
link 要素
ドキュメントの関連性
main 要素
文書のメインコンテンツを表す。
map 要素
イメージマップ
mark 要素
文書内の特定のテキスト範囲をハイライトして目立たせる際に使用します。
menu 要素
操作メニューを作成する。
meta 要素
その文書に関する情報（メタデータ）を指定する際に使用します。
meter 要素
ある数値が特定の範囲内でどの位置にあるのか（例えばバッテリー残量や評価スコアなど）を、ゲージ状のUIを用いて視覚的に示すための要素です。
nav 要素
ページまたはセクションのナビゲーション領域を定義する。
noframes 要素
フレームが表示できない環境用の表示内容を指定する。
noscript 要素
スクリプトが動作しなかった場合にメッセージなどの表示内容を指定する際に使用します。
object 要素
画像や動画、音声、プラグインデータ、HTML文書などのさまざまな形式を持つデータを文書に埋め込むための汎用的なタグ。
ol 要素
順序付きリストを表示する。
onclick 属性
要素がクリックされたときに実行されるJavaScriptコードを指定するための属性です。
onmouseup 属性
ユーザーがマウスボタンを押していた状態から「指を離した瞬間」に実行されるイベントを指定する属性です。
optgroup 要素
<select>内の複数の<option>をカテゴリ別にまとめ、ラベルを付けて整理して表示するための要素です。
option 要素
セレクトボックスや入力候補リストの選択肢を指定する。
output 要素
計算結果を表示する。
p 要素
段落を表す。
param 要素
埋め込まれたオブジェクト（例えば、動画やアプリケーション）に対して設定やデータを渡すために使用される要素です。
picture 要素
異なるデバイスや画面サイズに応じて最適な画像を表示するために、複数の画像ソースを指定できる要素です。
pre 要素
半角スペースや改行などをそのままの形でブラウザに表示したい場合に使います。
progress 要素
進捗をリアルタイムに示すプログレスコントロール。
q 要素
文章中で短い引用を示すインライン要素で、多くのブラウザで引用符を自動的に付与して表示してくれるものです。
role 属性
要素の役割を明示し、スクリーンリーダーなどの支援技術がWebページの構造や機能を正しく理解できるようにするための属性です。
rp 要素
ruby要素に対応していないブラウザに対して、ルビに括弧を付けるために使います。
rt 要素
ルビのテキストを表します。
ruby 要素
ルビ
s 要素 [非推奨]
「もはや正確ではない・有効ではないとされたテキスト」を表し、取り消し線付きで表示することでその無効性を視覚的に示すための要素です。
取り消し線が必要な場合は、以下の適切なものを利用しましょう。
del 要素
削除テキスト
CSS
text-decoration
テキストの下線・上線・取消線・点滅を指定する。
samp 要素
出力。
script 要素
Webページに動的な機能や挙動を追加するために使用される、JavaScriptコードを含めるための方法です。
section 要素
関連するコンテンツをグループ化する。
select 要素
セレクトボックス（プルダウンメニュー）を作成します。
slot 要素
Shadow DOM内部において、外部（ライトDOM）から渡されるコンテンツを指定した場所へ挿入する“差し込み口”として機能する特別な要素です。
small 要素
免責・警告・著作権などの注釈や細目を表す。
source 要素
動画や音声、画像を複数形式・解像度などで用意し、ブラウザが適切なソースを自動的に選んで再生・表示できるようにするための要素です。
span 要素
一般的なテキスト範囲。
spellcheck 属性
要素内のテキストをスペルチェックをするかしないかを指定する属性。
strike 要素 [廃止]
取り消し線を引く。
取り消し線が必要な場合は、以下の適切なものを利用しましょう。
del 要素
削除テキスト
CSS
text-decoration
テキストの下線・上線・取消線・点滅を指定する。
strong 要素
強い重要性を伝えるテキストの範囲を表します。
style 要素
スタイル情報。
style 属性
要素に CSS を直接指定するための属性。
sub 要素
文字を通常のテキストよりも少し下に配置するために使用される要素です。
summary 要素
details要素の要素内容の要約・キャプション・説明を表します。
sup 要素
上付き文字を表示する。
tabindex 属性
Tabキーを使って要素を選択する際の優先順位を指定する。
table 要素
行と列で構成された表形式のデータを表示する。
tbody 要素
テーブルを構造化するために使用される要素の一つです。
td 要素
テーブルのデータ・セル
template 要素
ページに表示されない再利用可能なコンテンツを定義し、後で JavaScriptを使って動的に挿入できる HTMLの一部を作るための要素です。
textarea 要素
ユーザーが複数行のテキストを入力・編集できる入力欄を提供するための要素です。
tfoot 要素
テーブルのフッター行グループ
th 要素
テーブル（表）の見出しセルを作成する。
thead 要素
テーブル（表）の見出し部分を定義する。
time 要素
日付と時間
title 要素
ドキュメントのタイトル
title 属性
要素に関する補足情報を指定する属性。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。
tr 要素
表の行を表します。
track 要素
<video>や<audio>と組み合わせることで、字幕やキャプションなどのテキストトラックを追加し、メディアのアクセシビリティや多言語対応を向上させる要素です。
translate 属性
ページ翻訳時、要素の内容を翻訳するかどうかを指定する属性。
u 要素
テキストに下線を表示して非文書的・慣習的な注釈を示すためのタグで、単なる下線装飾にはCSSを使うのが推奨されます。
ul 要素
順序のないリストを表示する。
var 要素
変数
video 要素
Webページ上でユーザーが動画を再生・操作できるようにするためのタグです。
wbr 要素
長い単語やURLなどの途中で改行してもよい候補点を指定し、画面幅に応じて必要な場合にのみ改行されるようにするためのタグです。