HTMLとは
HTML（HyperText Markup Language / ハイパーテキスト マークアップ ランゲージ）は、Webページの構造を記述するための言語です。
HTMLは「タグ」を使って内容を囲むことで文字列に意味を与えたり、ブラウザにその内容をどのように表示するかを指示します。
HTMLを学ぶための基本ステップ
- 基本構造を理解し、覚える
- 各タグがどのような役割を持つのかを理解し、覚える
- 実際に簡単なページを作成してみる
- テキストや学習サイトを利用して徐々に複雑な構造のページを作成してみる
1. HTMLファイルの基本構造
一部例外もありますが、基本的には<開始タグ></閉じタグ>のセットで使用します。
<!DOCTYPE html> <!-- ドキュメント宣言 ブラウザにどのバージョンのHTMLで記述されているかを伝えるもの-->
<html lang="ja"> <!--htmlタグ HTML文書の土台の役割を果たします langを設定してこのページの言語（ja=日本語）が日本語である事を表します-->
<head> <!-- head内はページ内には表示されませんが、ページのタイトルやメタ情報など、コンピュータやブラウザ用、検索ロボットに知らせる役割の重要な要素です -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
</head>
<body> <!-- ページの本体部分です。実際に表示される内容を記述します。 -->
<h1>Hello world</h1>
<p>これはHTMLで作成したサンプルページです。</p>
</body>
</html>2.よく使用するHTMLタグ
構造要素 (Structural Elements)
構造要素は全体的な構造を定義し、コンテンツの意味を明確にするために使用される要素群です。これらの要素を適切な役割と階層で配置することで、アクセシビリティの向上やSEO強化につながります。
| タグ | 読み方 | 説明 | 使用例 |
|---|---|---|---|
<html> | エイチティーエムエル | HTMLドキュメント全体のルート要素 | <html><head></head><body></body></html> |
<head> | ヘッド | ドキュメントのメタデータを定義 | <head><title>タイトル</title></head> |
<body> | ボディ | ドキュメントの本体部分を定義 | <body>本文</body> |
<header> | ヘッダー | セクションまたはページ全体のヘッダーを定義 | <header><h1>サイトのタイトル</h1></header> |
<footer> | フッター | セクションまたはページ全体のフッターを定義 | <footer><p>Copyright</p></footer> |
<main> | メイン | ドキュメントの主要なコンテンツを定義 | <main><article>主要内容</article></main> |
<nav> | ナブ | ナビゲーションリンクのグループを定義 | <nav><a href="#">ホーム</a></nav> |
<section> | セクション | ドキュメントのセクションを意味的に分割 | <section>セクション1</section> |
<article> | アーティクル | 独立したコンテンツ（記事など）を定義 | <article>記事内容</article> |
<aside> | アサイド | 補足的な内容（サイドバーなど）を定義 | <aside>サイドバー内容</aside> |
<div> | ディブ | 意味を持たない汎用的なブロック要素 | <div>内容</div> |
<h1> ～ <h6> | エイチワン ～ エイチシックス | 見出し要素。 <h1> は最上位の見出し | <h1>見出し1</h1> ～ <h6>見出し6</h6> |
<p> | ピー（パラグラフ） | 段落を定義 | <p>これは段落です。</p> |
<figure> | フィギュア | 図や表などの独立したコンテンツをグループ化 | <figure><img src="image.jpg"></figure> |
<figcaption> | フィグキャプション | <figure> のキャプション（説明）を定義 | <figcaption>図の説明</figcaption> |
<blockquote> | ブロッククォート | 引用されたセクションを表す要素 | <blockquote>引用内容</blockquote> |
<summary> | サマリー | <details> の概要を表示する要素 | <summary>詳細を表示</summary> |
<address> | アドレス | 文書やセクションの連絡先情報を提供 | <address>連絡先情報</address> |
<hgroup> | エイチグループ | 複数の見出しをグループ化（HTML5で廃止されましたがHTMLLSで復活） | <hgroup><h1>タイトル</h1><p>概要文</p></hgroup> |
文書要素 (Text-level Elements)
HTMLの文書要素は、文章の特定の部分にスタイルや意味を与えるための要素です。これらは文章内の単語やフレーズを強調したり、特定の種類のテキストであることを示したりするために使用されます。
| タグ | 読み方 | 説明 | 使用例 |
|---|---|---|---|
<span> | スパン | インラインの汎用コンテナ。特定の意味は持たず、スタイル付けやスクリプトの対象として使用される。 | <span style="color: red;">赤い文字</span> |
<strong> | ストロング | 文脈において重要な内容を示し、強調されるべきテキストを表す。視覚的には太字で表示される。 | <strong>重要なテキスト</strong> |
<em> | エム | 文脈上で強調が必要なテキストを示し、イタリック体で表示される。意味的な強調を示す。 | <em>強調したテキスト</em> |
<mark> | マーク | 文脈において特に関連性が高い内容をハイライトするための要素。読者にとって重要な部分を示す。 | <mark>重要な部分</mark> |
<small> | スモール | 通常のテキストよりも小さいフォントサイズで表示される。注釈や副次的な情報に使用される。 | <small>注釈テキスト</small> |
<del> | デル | 削除されたテキストを示し、取り消し線で表示される。内容が削除されたことを示す。 | <del>削除されたテキスト</del> |
<ins> | インス | 挿入されたテキストを示し、下線で表示される。内容が追加されたことを示す。 | <ins>挿入されたテキスト</ins> |
<u> | ユー | 文脈において下線が必要なテキストを表示する。スタイリングのための要素。 | <u>下線</u> |
<abbr> | アブリービエイション | 略語や頭字語を示し、title 属性で完全なテキストを提供する。 | <abbr title="Hypertext Markup Language">HTML</abbr> |
<cite> | サイト | 作品のタイトルや出典を引用するための要素。文脈での参照を示す。 | <cite>書籍名</cite> |
<code> | コード | コンピュータコードやソースコードを表示する。固定幅フォントで表示される。 | <code>コード</code> |
<kbd> | ケーボード | ユーザーが入力するキーボードのキーを表示する。ユーザー入力を示す。 | <kbd>Ctrl+C</kbd> |
<samp> | サンプ | プログラムの出力やサンプル出力を示す。通常、固定幅フォントで表示される。 | <samp>出力結果</samp> |
<var> | バリアブル | 数式やコードの変数を示す。変数名を表示する。 | <var>x</var> |
<time> | タイム | 日付や時間を機械可読な形式で指定する。ビューア以外のソフトウェアが日時を解釈できるようにする。 | <time datetime="2023-12-01">2023年12月1日</time> |
<dfn> | ディファイン | 定義語を示す。通常、初めて定義される用語に使用される。 | <dfn>用語</dfn> |
<q> | クオート | 短い引用をインラインで示す。通常、引用符が自動的に追加される。 | <q>引用文</q> |
<blockquote> | ブロッククオート | 長い引用をブロック形式で示す。引用部分が通常のテキストと区別される。 | <blockquote>長い引用文</blockquote> |
<b> | ビー | 特別な強調はなく、単に太字で表示する要素。意味的な重要性は持たない。 | <b>太字</b> |
<i> | アイ | 文脈において特別な意味やニュアンスを持つイタリック体を表示する。 | <i>イタリック</i> |
<sub> | サブ | 下付き文字を表示する。通常、数式や化学式などで使用される。 | <sub>下付き</sub> |
<sup> | スープ | 上付き文字を表示する。通常、指数や脚注で使用される。 | <sup>上付き</sup> |
<br> | ビーアール | 改行を挿入する。段落内で行を分ける。 | テキスト<br>改行後のテキスト |
<wbr> | ダブルビーアール | 任意の改行ポイントを指定する。長い単語やフレーズの改行可能な位置を示す。 | 長い単語<wbr>途中で改行可能 |
<bdi> | ビーディーアイ | 双方向テキストの一部を分離して表示する。言語方向が異なるテキストを正しく表示するために使用。 | <bdi>異なる方向のテキスト</bdi> |
<bdo> | ビーディーオー | テキストの表示方向を明示的に指定する。 | <bdo dir="rtl">右から左</bdo> |
その他の要素 (Other Elements)
その他の要素は、HTML文書の中で特定の役割を持って働きます。これらは、たとえば画像や動画を埋め込んだり、リンクをクリックできるようにしたりするための要素です。これらの要素を正しく使ってページを見ている人に使いやすくします。
| タグ | 読み方 | 説明 | 使用例 |
|---|---|---|---|
| <iframe> | アイフレーム | インラインフレームを作成し、別の文書やウェブページを埋め込むための要素です。 | <iframe src=”https://example.com”></iframe> |
| <video> | ビデオ | 動画を表示するための要素で、再生コントロールや自動再生、ループなどの属性を設定できます。 | <video src=”video.mp4″ controls></video> |
| <audio> | オーディオ | 音声を再生するための要素で、再生コントロールや自動再生などの属性を設定できます。 | <audio src=”audio.mp3″ controls></audio> |
| <canvas> | キャンバス | 描画APIを使用して、グラフィックやアニメーションを描画するための領域を提供します。 | <canvas width=”200″ height=”100″></canvas> |
| <map> | マップ | 画像内のインタラクティブな領域を定義するための要素です。 | <map name=”mymap”></map> |
| <table> | テーブル | 表形式のデータを表示するための要素で、行や列を含むテーブルを定義します。 | <table><tr><td>内容</td></tr></table> |
| <tr> | ティーアール（テーブルロー） | テーブルの行を定義します。 | <tr><td>内容</td></tr> |
| <th> | ティーエイチ（テーブルヘッダー） | テーブルの見出しセルを定義し、テーブルの列や行のヘッダーとして使用されます。 | <th>見出し</th> |
| <td> | ティーディー（テーブルデータ） | テーブルのデータセルを定義し、テーブルの各データ項目を表示します。 | <td>データ</td> |
| <thead> | ティーヘッド（テーブルヘッド） | テーブルのヘッダーセクションを定義し、列の見出しを含む行をグループ化します。 | <thead><tr><th>ヘッダー1</th></tr></thead> |
| <tbody> | ティーボディー（テーブルボディ） | テーブルの本体セクションを定義し、実際のデータを含む行をグループ化します。 | <tbody><tr><td>データ1</td></tr></tbody> |
| <tfoot> | ティーフット（テーブルフッター） | テーブルのフッターセクションを定義し、合計や注釈などの情報を表示します。 | <tfoot><tr><td>フッター</td></tr></tfoot> |
| <caption> | キャプション | テーブルに説明を追加するための要素で、テーブルのタイトルや説明を表示します。 | <caption>テーブルの説明</caption> |
| <summary> | サマリー | <details> 要素内の開閉可能な内容のタイトルを提供します。 | <summary>詳細</summary> |
| <ul> | アンオーダードリスト | 順序なしリストを作成し、箇条書きの項目をリスト形式で表示します。 | <ul><li>項目1</li></ul> |
| <ol> | オーダードリスト | 順序付きリストを作成し、番号付きの項目をリスト形式で表示します。 | <ol><li>項目1</li></ol> |
| <li> | リストアイテム | リスト内の各項目を定義します。 | <li>項目</li> |
| <dl> | ディフィニションリスト | 用語とその説明をペアで表示する定義リストを作成します。 | <dl><dt>用語</dt><dd>説明</dd></dl> |
| <dt> | ディーティー | 定義リスト内で用語を示します。 | <dt>用語</dt> |
| <dd> | ディーディー | 定義リスト内で用語の説明を示します。 | <dd>説明</dd> |
| <figure> | フィギュア | 図や表などのコンテンツを表示し、関連するキャプションを追加するための要素です。 | <figure><img src=”image.jpg”><figcaption>図1</figcaption></figure> |
| <figcaption> | フィギュアキャプション | <figure> 内のコンテンツに対する説明やキャプションを提供します。 | <figcaption>図1の説明</figcaption> |
| <details> | ディテールズ | 詳細情報を開閉可能に表示するための要素で、ユーザーがクリックして内容を表示または非表示にできます。 | <details><summary>詳細</summary><p>詳細な内容</p></details> |
| <slot> | スロット | Webコンポーネントで使用され、コンテンツを挿入するためのプレースホルダーを提供します。 | <slot name=”header”></slot> |
| <picture> | ピクチャー | 複数の画像ソースを指定し、最適な画像を選択して表示するための要素です。 | <picture><source srcset=”image.webp” type=”image/webp”><img src=”image.jpg” alt=”画像”></picture> |
| <template> | テンプレート | 再利用可能なHTMLマークアップのテンプレートを定義し、クライアントサイドで後から挿入することができます。 | <template><p>テンプレート内容</p></template> |
フォーム要素 (Form Elements)
フォーム要素はページを見ている人が名前やメールアドレスを入力したり、質問に答えたりするためのものです。ボタンやチェックボックス、テキストボックスなどがこれに含まれます。フォーム要素を上手に配置することで、ウェブページを訪れる人が情報を簡単に入力できるようになります。
いるため、サポート状況の記載は不要です。以下に、サポート状況の記載を省いた表を示します。
| タグ | 読み方 | 説明 | 使用例 |
|---|---|---|---|
| form | フォーム | ユーザーからの入力を受け取るためのフォームを作成します。 | <form action=”/submit” method=”post”></form> |
| input | インプット | ユーザーがデータを入力するためのフィールドを作成します。 | <input type=”text” name=”name”> |
| button | ボタン | ボタンを作成し、クリックやその他のユーザーアクションに応じた処理を定義します。 | <button type=”submit”>送信</button> |
| label | ラベル | フォームコントロールにラベルを付け、ユーザーにその機能を説明します。 | <label for=”name”>名前:</label> |
| select | セレクト | ドロップダウンリストを作成し、複数の選択肢から選ばせるために使用します。 | <select><option>選択肢1</option></select> |
| textarea | テキストエリア | 複数行のテキスト入力フィールドを作成します。 | <textarea></textarea> |
| fieldset | フィールドセット | フォーム内の関連する要素をグループ化し、構造を整理します。 | <fieldset><legend>個人情報</legend></fieldset> |
| legend | レジェンド | fieldset内の説明的な見出しを提供し、グループ化されたフォーム要素の説明を行います。 | <fieldset><legend>個人情報</legend></fieldset> |
| optgroup | オプトグループ | 選択リスト内のオプショングループを作成し、選択肢をカテゴリー化します。 | <optgroup label=”グループ1″></optgroup> |
| option | オプション | 選択リストのオプションを作成し、ユーザーに選択肢を提供します。 | <option value=”1″>選択肢1</option> |
| datalist | データリスト | 入力フィールドのオプションのリストを提供し、ユーザーの入力を補助します。 | <input list=”browsers”><datalist id=”browsers”><option value=”Chrome”><option value=”Firefox”></datalist> |
| output | アウトプット | フォームの計算結果やユーザーに提示する結果を表示します。 | <output name=”result” for=”a b”>計算結果</output> |
| meter | メーター | スカラーの値を視覚的に表すためのメーターを作成します。 | <meter value=”0.6″>60%</meter> |
| progress | プログレス | 処理の進捗状況を表示し、完了までの進行度を示します。 | <progress value=”70″ max=”100″>70%</progress> |
空要素(empty element)
HTMLは基本的に開始タグと終了タグのペアで構成されますが、一部単独で機能するものが存在します。これらは空要素（くうようそ）と呼ばれ、閉じタグを記述する必要がありません。以下は空要素の一覧です。
| タグ | 読み方 | 説明 | 使用例 |
|---|---|---|---|
| img | イメージ | 画像を表示する要素です。 | <img src=”image.jpg” alt=”画像の説明”> |
| br | ビーアール（ブレーク） | 改行を挿入します。 | <p>一行目<br>二行目</p> |
| hr | エイチアール（ホリゾンタルライン） | 水平線を挿入します。文脈の区切りを示すために使用されます。 | <hr> |
| input | インプット | フォームの入力フィールドを作成します。 | <input type=”text” name=”username”> |
| meta | メタ | 文書に関するメタデータを定義します。 | <meta charset=”UTF-8″> |
| link | リンク | 外部リソース（CSSファイルなど）へのリンクを定義します。 | <link rel=”stylesheet” href=”style.css”> |
| base | ベース | ベースURLを指定し、相対リンクの基準を設定します。 | <base href=”https://example.com/”> |
| area | エリア | イメージマップ内の領域を定義し、リンクとして使用できます。 | <area shape=”rect” coords=”0,0,100,100″ href=”page.html”> |
| param | パラメータ | object タグ内でオブジェクトのパラメータを指定します。 | <param name=”movie” value=”movie.swf”> |
| embed | エンベッド | 外部のメディアコンテンツを埋め込みます。 | <embed src=”video.mp4″ width=”320″ height=”240″> |
| source | ソース | video や audio のメディアソースを指定します。 | <source src=”movie.mp4″ type=”video/mp4″> |
| track | トラック | メディア要素（動画や音声）の字幕やキャプションを指定します。 | <track src=”subtitles.vtt” kind=”subtitles” srclang=”ja”> |
| col | カラム | テーブルの列のスタイルを設定します。 | <col span=”2″> |
| wbr | ワードブレーク | 長い単語やURLなどで改行可能な位置を示します。HTML LSでも有効です。 | 超長い単語<wbr>の途中で改行される場合がある。 |
| keygen | キージェン | 鍵生成フォームフィールドを定義しますが、HTML LSでは非推奨です。（セキリュティの観点から将来的に廃止の見込み） | <keygen name=”name”>（非推奨） |
| colgroup | コルグループ | テーブル列のグループ化を定義します。 | <colgroup span=”2″> |
3.簡単なページの作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>〇〇の自己紹介</title>
</head>
<body>
<段落>簡単に自己紹介の文章を入れる
<水平線>
<見出し1>（大見出し）：私について
<リンク><画像 画像ファイルへの相対パス 代替えテキスト >
<水平線>
<見出し2>（中見出し）：私の好きなこと
<順序なし箇条書き>
<リスト項目> 例）写真
<リスト項目>
<リスト項目>
</body>
</html>4.次のステップへ
- タグの意味やHTMLの文法を知り、正しいコーデイングをする。
- HTMLで作成した構造にCSSでスタイルを設定して見た目を整える。
- CSSアニメーションなどで動きや装飾をつける。
- JavaScriptでモーダルウィンドウなどのユーザーの操作に応じた動的な反応を実装する。