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とは何か
-
- Webページを作成するためのマークアップ言語であること。
- ブラウザとサーバーの関係、Webの仕組みを概要として理解する。
- Webの仕組みとHTMLの役割
-
- HTTP、サーバー、ブラウザの基本的な流れ。
- HTMLが「構造」を、CSSが「デザイン」を、JavaScriptが「動き」を担当するという全体像を把握する。
- HTMLとは
- HTML5 の全体像
- HTMLの基礎知識
- 変更点の概要
- 構文チェック
- カテゴリー
- コンテンツ・モデル
- どの要素にどんなコンテンツを入れても良いのかを定義したものです。
- セクション
- アウトライン・アルゴリズム
学習・開発環境を整える
- テキストエディタ・IDEの選択
-
- Visual Studio Codeなどのツールを使うメリットと特徴。
- エディタやIDEでの自動補完・構文チェックを活用する。
- ブラウザの選択と検証方法
-
- Chrome、Firefox、Safari、Edge等、複数ブラウザで動作確認を行う重要性。
- デベロッパーツールの基本的な使い方を覚える。
HTMLファイルの基本構造を理解する
- HTMLドキュメントの最小構成
-
<!DOCTYPE html>, <html>, <head>, <body> タグの役割。
- head要素とbody要素の使い分け
-
<title>などメタ情報を含むhead要素の概要。- 画面に表示される要素を入れるbody要素の概要。
- 文字コード設定（
<meta charset="UTF-8">）
-
- 最低限必要なHTML
- エラーとならないために最低限必要な HTMLタグです。
- 文字エンコーディング
- HTMLの記述法
基本的なHTMLタグを覚える
- 見出しタグ（
<h1>〜<h6>）
- Webページの構造を見出しで分かりやすく整理する役割。
- 段落・改行タグ（
<p>, <br>）
- 文章の構造を区切る基本的な使い方。
- 強調タグ（
<strong>, <em>）
- 太字・斜体などの視覚的強調と、スクリーンリーダーによる読み上げへの影響。
- コメントアウト（
<!-- -->）
- コードにメモを残すときや一時的にタグを無効化したいときの使い方。
グローバル属性（共通属性）
- グローバル属性とは
-
- HTMLのほとんどの要素に共通して使える属性であること。
- コードの可読性やアクセシビリティ、動的なスクリプト操作などに影響する。
- 代表的なグローバル属性の概要
-
id / class-
- 要素を一意に識別したり、複数の要素をグループ化したりする。
- CSSやJavaScriptとの連携で必須となる概念。
style-
- 要素に直接スタイルを適用するが、基本的には外部CSSの利用を推奨。
title-
- マウスオーバーした時に説明が表示されるツールチップ的な用途。
data-* 属性-
- 独自データを要素に持たせられる。
- JavaScriptで利用するケースが多い。
lang-
- 要素の言語を明示することでアクセシビリティやSEO向上を図る。
tabindex-
- グローバル属性を正しく使う意義
-
- ページの構造や機能を明確化し、保守性を高める。
- CSSやJavaScriptで要素を操作する際、指定や参照がしやすくなる。
リンク・画像の挿入
- リンクタグ（
<a>）
-
- 外部サイト、ページ内リンク、メールリンクなどの使い分け。
- 相対パスと絶対パスの違い。
- 画像挿入タグ（
<img>）
-
src属性やalt属性の重要性（アクセシビリティ対応）。- 画像形式（PNG, JPEG, GIF, SVGなど）の選択基準。
リストを使って情報を整理する
- 順序付きリスト（
<ol>）、順序なしリスト（<ul>）
-
- リスト表示の使い分け。
- ネストリスト（入れ子）による階層化。
- 定義リスト（
<dl>）
-
テーブルで表を作成する
- テーブルの基本構造（
<table>, <tr>, <td>, <th>）
-
- 行・列の概念を理解する。
- ヘッダーセル（
<th>）と通常セル（<td>）の違い。
- テーブルレイアウトとHTMLの役割の区別
-
- レイアウト目的でのテーブル乱用を避け、CSSレイアウトを推奨する現代的な考え方。
フォームを作成する
- フォーム要素（
<form>）の基本
-
actionとmethod属性の意味。- 入力内容をサーバーへ送信する仕組みを理解する。
- 入力要素（
<input>）, ラベル（<label>）, ボタン（<button>）など
-
- テキスト入力・チェックボックス・ラジオボタン・セレクトボックスなど多彩なフォーム要素。
- アクセシビリティ向上のためのラベル活用。
セマンティックHTMLの考え方
- セマンティックタグ（
<header>, <main>, <footer>, <section>, <article>など）
-
- 意味のあるタグを使うことでSEOやアクセシビリティが向上する。
- 従来の
<div>多用との違い
-
- ページ構造をはっきり示すための推奨方法を理解する。
メタデータとSEOの基礎
- メタタグ（
<meta>）
-
- ブラウザや検索エンジンに対して情報を伝える役割。
descriptionやviewportなど、代表的なメタタグを知る。
- タイトルや見出しの最適化
-
- SEOの観点から読みやすく、関連性の高いタイトル・見出しにする方法。
HTML5の新機能概要
- 新要素（
<video>, <audio>, <canvas>など）
-
- プラグインなしでメディアを扱える利点。
- シンプルなアニメーションやグラフィックス表示も可能になる。
- フォーム機能の拡張（HTML5入力タイプ）
-
<input type="email">や<input type="number">などブラウザが補助を行う機能。
CSSやJavaScriptとの連携を見通す
- 外部ファイルリンク（
<link>や<script>）
-
- HTMLが構造、CSSがデザイン、JavaScriptが動きという分業を理解する。
- HTML側からの読み込み順序がもたらす影響を把握する。
- 基本的なCSSとJavaScriptの設置場所
-
<head>でCSSを呼び出し、<body>末尾でJavaScriptを読み込むなどの一般的な手法。
コードを整理する・保守しやすくするためのコツ
- インデントやコメントの付け方
-
- ファイル構成の考え方
-
- HTMLファイル、CSSファイル、JavaScriptファイルの分割と整理。
- 大規模サイトではディレクトリ構成も意識する。
Web標準とアクセシビリティ
- W3Cの勧告とバリデーション
-
- HTMLの文法チェックツールで品質を保つ方法。
- 古いブラウザやモバイル対応を考慮する必要性。
- アクセシビリティの基本
-
- スクリーンリーダー対応や色覚特性への配慮。
- 画像の
alt属性、見出し構造など、誰でも使いやすいWebを意識する。
学習を続けるためのリファレンス・応用例
- 公式ドキュメントやMDN（Mozilla Developer Network）の活用
-
- 必要なときにすぐ参照できるリファレンスを知る重要性。
- 実践的なサンプルコードを活用する
-
- 小さなページを実際に作りながら学習する。
- GitHubなどで公開されているコードを参考にする。
タグ一覧
- <!DOCTYPE>
- 書かれた HTML文書が、どのバージョンで書かれたものかを宣言します。（文書型宣言）
- <!-- ～ --> comment
- コメント（注釈）を挿入する。
- a 要素
- href属性が指定されていれば、ハイパーリンクを表します。
- abbr 要素
- 省略語
- accesskey 属性
- 要素にアクセスキーを割り当てる属性。
- address 要素
- 文書や記事の作者や所有者の連絡先情報を示すための要素です。
- alt 属性
- img要素において画像が表示できなかった場合や、area要素における領域内のフォールバックとして利用される代替テキストを指定します。
applet 要素 [廃止] → object 要素- Javaアプレットを挿入するためのタグです。
- area 要素
- イメージマップのハイパーリンク
- aria-label 属性
- 画面上に表示されないテキストラベルを要素に付与してスクリーンリーダーなどの支援技術に正しい情報を伝え、アイコンボタンなど可視テキストのない要素でも意味や機能を明確に示すための属性です。
- 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 要素
- 名前と値がセットになったリスト（定義リスト）を表します。
- draggable 属性
- 要素をドラッグ可能かどうかを指定する属性。
- dropzone 属性
- ドラッグデータを、要素にドロップした時の受け入れ方法（コピー、移動、リンク）を指定する属性。
- dt 要素
- 定義リスト内で用語や項目名を示すために使われるタグです。
- em 要素
- 文章内で文脈上の特別な強調を示し、ブラウザやスクリーンリーダーなどにも「ここを重要に読むべき部分」というニュアンスを伝えるためのセマンティックなタグです。
- embed 要素
- プラグイン
- fieldset 要素
- フォームの入力項目をグループ化する。
- figcaption 要素
- 図画のキャプション
- figure 要素
- キャプション付き図画
font 要素 [非推奨]- font要素はフォントの種類・大きさ・色を指定します。
- footer 要素
- ページまたはセクションのフッター領域を定義する。
- form 要素
- サブミット・フォーム
- frame 要素
- frameset要素で分割された各フレームに表示するファイルと表示方法を指定する。
- frameset 要素
- ウィンドウをいくつかのフレームに分割する。
- h1～h6 要素
- セクションに見出しを付けます。
- 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 要素
- リストを作成するために使用され、順序のある場合は <ol>要素、順序のない場合は <ul>要素内に配置されます。
- link 要素
- ドキュメントの関連性
- main 要素
- 文書のメインコンテンツを表す。
- map 要素
- イメージマップ
- mark 要素
- 文書内の特定のテキスト範囲をハイライトして目立たせる際に使用します。
menu 要素操作メニューを作成する。- meta 要素
- その文書に関する情報（メタデータ）を指定する際に使用します。
- meter 要素
- 規定範囲内の測定値を示す際に使用します。
- nav 要素
- ページまたはセクションのナビゲーション領域を定義する。
- noframes 要素
- フレームが表示できない環境用の表示内容を指定する。
- noscript 要素
- スクリプトが動作しなかった場合にメッセージなどの表示内容を指定する際に使用します。
- object 要素
- 画像や動画、音声、プラグインデータ、HTML文書などのさまざまな形式を持つデータを文書に埋め込むための汎用的なタグ。
- ol 要素
- 順序付きリストを表示する。
- onclick 属性
- 要素がクリックされたときに実行されるJavaScriptコードを指定するための属性です。
- onmouseup 属性
- ユーザーがマウスボタンを押していた状態から「指を離した瞬間」に実行されるイベントを指定する属性です。
- optgroup 要素
- 選択肢をグループ化する。
- option 要素
- セレクトボックスや入力候補リストの選択肢を指定する。
- output 要素
- 計算結果を表示する。
- p 要素
- 段落を表す。
- param 要素
- 埋め込まれたオブジェクト（例えば、動画やアプリケーション）に対して設定やデータを渡すために使用される要素です。
- picture 要素
- 異なるデバイスや画面サイズに応じて最適な画像を表示するために、複数の画像ソースを指定できる要素です。
- pre 要素
- 半角スペースや改行などをそのままの形でブラウザに表示したい場合に使います。
- progress 要素
- 進捗をリアルタイムに示すプログレスコントロール。
- q 要素
- 文章中で短い引用を示すインライン要素で、多くのブラウザで引用符を自動的に付与して表示してくれるものです。
- rp 要素
- ruby要素に対応していないブラウザに対して、ルビに括弧を付けるために使います。
- rt 要素
- ルビのテキストを表します。
- ruby 要素
- ルビ
- s 要素 [非推奨]
- すでに正確ではなくなった、すでに関係なくなった内容を表す。
- 取り消し線が必要な場合は、以下の適切なものを利用しましょう。
- del 要素
- 削除テキスト
- CSS
-
- text-decoration
- テキストの下線・上線・取消線・点滅を指定する。
- samp 要素
- 出力。
- script 要素
- Webページに動的な機能や挙動を追加するために使用される、JavaScriptコードを含めるための方法です。
- section 要素
- 関連するコンテンツをグループ化する。
- select 要素
- セレクトボックス（プルダウンメニュー）を作成します。
- 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 要素
- 表の行を表します。
- translate 属性
- ページ翻訳時、要素の内容を翻訳するかどうかを指定する属性。
- ul 要素
- 順序のないリストを表示する。
- var 要素
- 変数
- video 要素
- Webページ上でユーザーが動画を再生・操作できるようにするためのタグです。
- wbr 要素
- 改行しても良い位置を示す