<small>タグは、その中のテキストを小さい文字で表示します。著作権表示、免責事項、注釈など、補助的な情報を示すために使用されます。

“`html

“`

削除：、追加：<ins>

• <del>タグは、文書の削除された部分を示します。ブラウザでは通常、打ち消し線が引かれて表示されます。

  html
<p>価格：<del>1000円</del> 割引後価格：800円</p>

• <ins>タグは、文書の追加された部分を示します。ブラウザでは通常、下線が引かれて表示されます。

  html
<p>価格：<del>1000円</del> <ins>セール価格：800円</ins></p>

これらは、文書の変更履歴を示す場合などに役立ちます。

下付き：_{、上付き：<sup>}

• <sub>タグは、テキストを下付き文字で表示します。化学式（例: H₂O）などで使用します。

  html
<p>水の化学式は H<sub>2</sub>O です。</p>

• <sup>タグは、テキストを上付き文字で表示します。指数（例: x²）、脚注番号などで使用します。

  html
<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>

引用

他のソースからの引用を示すためのタグです。

<blockquote> (ブロック引用)

<blockquote>タグは、長い引用文や、段落全体を引用する場合に使用します。引用元のURLをcite属性で指定することもできます。

“`html

有名な格言です。

為せば成る為さねば成らぬ何事も成らぬは人の為さぬなりけり。

“`

ブラウザでは通常、左右にインデント（字下げ）されて表示されます。

<q> (インライン引用)

<q>タグは、短い引用文や、文章の中に含める引用に使用します。ブラウザによっては、自動的に引用符（カギ括弧など）が付与されます。

“`html

彼は明日来ますと言いました。

“`

<cite> (出典)

<cite>タグは、作品のタイトル（書籍、記事、映画など）や、引用元の作者名を示すために使用します。<blockquote>や<q>と組み合わせて使用することが多いですが、単独で使用することも可能です。

“`html

シェイクスピアの有名な戯曲『ハムレット』

広瀬すず著『ぜんぜん、大丈夫じゃないです。』より引用。

“`

コードと整形済みテキスト

プログラミングコードや、インデントやスペースを含めた整形済みのテキストを表示するためのタグです。

<code>

<code>タグは、コンピュータのコードであることを示します。インライン要素です。

“`html

ファイルを保存するには、Ctrl + Sを押してください。

HTMLで段落を作成するには、<p>タグを使用します。

“`

<pre>

<pre>タグは、整形済みテキストを表示します。タグで囲まれたテキストは、ソースコード中の改行やスペースがそのまま反映されて表示されます（通常、ブラウザは連続するスペースや改行を一つにまとめるため、<pre>タグを使わないと意図した通りに表示されません）。等幅フォントで表示されるのが一般的です。

“`html

これは
整形済みテキストです。
スペースも
   そのまま
     反映されます。

“`

<code>と<pre>はよく組み合わせて使用されます。<pre>で囲むことで整形済みテキストとして表示し、その中のコード部分を<code>で囲むことで、それがコードであることを明確にします。

“`html

function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("World");

“`

その他テキスト関連タグ

<abbr> (略語)

<abbr>タグは、略語であることを示します。title属性を使って略語の正式名称を提供することができます。これはアクセシビリティや検索エンジンに役立ちます。

“`html

HTMLはウェブサイト制作に必須の言語です。

“`

<address> (連絡先)

<address>タグは、文書や記事の連絡先情報（作成者の情報、企業の住所、メールアドレス、電話番号など）を提供します。

“`html

“`

リストを作るタグ：情報を整理しよう！

複数の項目をまとめて表示する際には「リスト」が非常に便利です。HTMLには主に3種類のリストがあります。

順不同リスト：<ul>と<li>

<ul>タグは、順序が関係ない項目のリストを作成します。”ul”は “unordered list” の略です。リストの各項目は<li>タグ（”list item” の略）で囲みます。

“`html

今日の買い物リスト：

• 牛乳
• 卵
• パン

“`

ブラウザでは通常、各項目の先頭に黒丸（箇条書きマーク）が表示されます。

順序付きリスト：<ol>と<li>

<ol>タグは、順序が重要な項目のリストを作成します。”ol”は “ordered list” の略です。こちらも各項目は<li>タグで囲みます。

“`html

コーヒーの淹れ方：

1. お湯を沸かす
2. コーヒー豆を挽く
3. フィルターをセットし、豆を入れる
4. ゆっくりお湯を注ぐ

“`

ブラウザでは通常、各項目の先頭に数字（1., 2., 3., …）が表示されます。type属性で数字以外の記号（ローマ数字、アルファベットなど）を指定することも可能です。

定義リスト：<dl>、<dt>、<dd>

<dl>タグは、用語とその説明のペアをリスト化するために使用します。”dl”は “description list” の略です（以前は “definition list” と呼ばれていました）。

• <dt>タグ（”description term”）は、リスト化する用語を指定します。
• <dd>タグ（”description description”）は、その用語の説明を指定します。

“`html

HTML

ウェブページの構造を定義するマークアップ言語

CSS

ウェブページの見た目を装飾するスタイルシート言語

JavaScript

ウェブページに動きや対話性を持たせるプログラミング言語

“`

ブラウザでは通常、<dd>が<dt>より少し字下げされて表示されます。用語集やQ&Aリストなどに適しています。

リンクと画像を挿入するタグ：ページをつなぎ、彩りを加えよう！

ウェブページの大きな特徴の一つは、別のページへ移動できる「リンク」機能です。また、情報を視覚的に伝える「画像」も重要です。

リンク：<a>タグ

<a>タグは、他のウェブページ、ファイル、または同じページ内の他の場所へ移動するためのリンクを作成します。”a”は “anchor”（アンカー）の略です。

リンク先のURLはhref属性で指定します。<a>タグの開始タグと終了タグの間に記述したテキストや画像が、リンクとして表示されます。

“`html

ウェブについて詳しくは、World Wide WebのWikipediaページをご覧ください。

このウェブサイトの会社概要ページへ。

“`

主なaタグの属性：

• href: リンク先のURLを指定します。絶対URL（https://...）でも相対URL（/about/, ../index.htmlなど）でも指定できます。
• target: リンクを開く場所を指定します。
  • _self (デフォルト): 同じタブまたはウィンドウで開く。
  • _blank: 新しいタブまたはウィンドウで開く。外部リンクの場合によく使われます。
  • _parent: 親フレームセットで開く（フレームを使用することは少なくなりました）。
  • _top: 全ウィンドウで開く（フレームを使用することは少なくなりました）。
• title: リンクにカーソルを合わせたときに表示されるツールチップ（説明）を指定します。
• download: リンクをクリックしたときに、リンク先をブラウザで開くのではなく、ファイルをダウンロードさせる場合に指定します。

さまざまなリンクの例：

• 新しいタブで開くリンク:
  html
<a href="https://www.google.com" target="_blank">Googleを新しいタブで開く</a>

• ページ内リンク（アンカーリンク）:
  同じページ内の特定の場所へ移動します。リンク先には移動したい場所の要素にid属性で名前を付けておき、href属性に# + そのID名を指定します。

  “`html

  第2セクションへジャンプ

  第2セクション

  ここが第2セクションです。

  “`

• メールリンク:
  メールクライアントを起動し、指定したメールアドレスへの新規メール作成画面を開きます。href属性にmailto: + メールアドレスを指定します。件名や本文をあらかじめ含めることも可能です。

  html
<a href="mailto:[email protected]">サポートにメールを送る</a>
<a href="mailto:[email protected]?subject=お問い合わせ&body=詳細はこちらに記入">件名と本文を指定してメールを送る</a>

画像：<img>タグ

<img>タグは、ウェブページに画像を表示します。”img”は “image” の略です。これは自己終了タグであり、終了タグはありません。

画像ファイルはHTMLファイルとは別に用意し、<img>タグのsrc属性でその画像の場所（ファイルパス）を指定します。

html
<img src="logo.png" alt="会社ロゴ">

主なimgタグの属性：

• src (必須): 画像ファイルの場所（パス）を指定します。ファイルパスは相対パス（例: "images/photo.jpg"）または絶対URL（例: "https://example.com/images/photo.jpg"）で指定できます。
• alt (必須): 画像が表示できなかった場合に代わりに表示されるテキスト、または視覚障害のある方がスクリーンリーダーで画像を理解するための代替テキストを指定します。これはアクセシビリティと検索エンジン最適化（SEO）の両方にとって非常に重要です。画像の内容や目的を具体的に記述しましょう。
• width: 画像の表示幅をピクセルまたはパーセントで指定します。
• height: 画像の表示高さをピクセルまたはパーセントで指定します。

widthとheight属性を指定することで、ブラウザは画像を読み込む前にその表示領域を確保できるため、ページの表示速度向上に繋がることがあります。ただし、これらの属性で指定したサイズと実際の画像サイズが大きく異なると、画像が歪んで表示される可能性があるため、注意が必要です。レスポンシブデザインでは、CSSで画像のサイズを制御するのが一般的です。

html
<img src="product-photo.jpg" alt="新商品の写真" width="500" height="300">

テーブル（表）を作るタグ：構造化されたデータ表示！

表形式でデータを表示したい場合に、テーブル関連のタグを使用します。

• <table>: テーブル全体を囲むタグです。
• <caption>: テーブルのキャプション（説明）を指定します。<table>タグの直後に記述します。
• <thead>: テーブルのヘッダー部分（見出し行）をグループ化します。
• <tbody>: テーブルの本体部分（データ行）をグループ化します。
• <tfoot>: テーブルのフッター部分（合計行など）をグループ化します。
• <tr>: テーブルの行を定義します。”tr”は “table row” の略です。
• <th>: テーブルのヘッダーセルを定義します。”th”は “table header” の略です。通常、太字で中央揃えになります。
• <td>: テーブルのデータセルを定義します。”td”は “table data” の略です。

基本的なテーブルの構造は以下のようになります。

“`html

“`

セル結合:

<th>または<td>タグには、複数の行や列を結合するための属性があります。

• rowspan: そのセルが上下方向（行方向）にいくつのセル分を結合するかを指定します。
• colspan: そのセルが左右方向（列方向）にいくつのセル分を結合するかを指定します。

“`html

“`

テーブルは構造化されたデータを表示するのに適していますが、ウェブページのレイアウト目的で使用することは推奨されません。レイアウトはCSSで行うのが現代的なウェブ制作の方法です。

フォームを作るタグ：ユーザーからの入力受付！

ウェブサイトでは、ユーザーに情報を入力してもらったり、選択してもらったりすることがよくあります（問い合わせフォーム、ログインフォーム、検索窓など）。これらの入力欄やボタンを作成するために「フォーム」関連のタグを使用します。

<form>：フォーム全体の定義

<form>タグは、ユーザーからの入力を受け付けるフォーム全体を定義します。入力フィールド、ボタン、選択肢など、フォームを構成する要素はこのタグの中に配置します。

“`html

“`

主なformタグの属性：

• action: フォームが送信されたときに、データを送信する先のURLを指定します。サーバー側のプログラム（例: PHP, Python, Node.jsなど）のURLを指定するのが一般的です。
• method: フォームのデータを送信する方法を指定します。
  • get: データをURLの末尾に付加して送信します。簡単なデータ送信や検索フォームに適していますが、機密性の高い情報や大量のデータには不向きです。
  • post: データをHTTPリクエストのボディに含めて送信します。パスワードなどの機密情報や、大量のデータを送信する場合に適しています。

<input>：多様な入力フィールド

<input>タグは、フォームで最もよく使われる要素の一つで、様々な種類の入力フィールドを作成できます。表示される入力フィールドの種類は、type属性で指定します。自己終了タグです。

html
<input type="text">
<input type="submit">

主なinputタグのtype属性（ごく一部です）：

• text: 1行のテキスト入力欄。最も一般的です。
• password: パスワード入力欄。入力した文字は伏せ字で表示されます。
• email: メールアドレス入力欄。入力形式がメールアドレスであるか簡易的に検証されます。
• number: 数値入力欄。数値以外の入力は制限され、ブラウザによっては上下ボタンが表示されます。
• date: 日付入力欄。ブラウザによってはカレンダーが表示されます。
• checkbox: 複数の選択肢からいくつでも選択可能なチェックボックス。
• radio: 複数の選択肢から一つだけ選択可能なラジオボタン。同じname属性を持つラジオボタンのグループ内で一つだけ選択できます。
• submit: フォームを送信するためのボタン。
• reset: フォームの内容を初期状態に戻すためのボタン。
• file: ファイルを選択するための入力欄。
• hidden: 画面には表示されない隠しフィールド。プログラム間で情報をやり取りする際に使用します。

主なinputタグのその他の属性：

• name: フォーム送信時に、その入力フィールドのデータを識別するための名前を指定します。サーバー側でデータを受け取る際に必須です。同じグループのラジオボタンには同じnameを指定します。
• value: 入力フィールドの初期値や、ボタンの表示テキストを指定します。
• placeholder: 入力欄が空のときに薄い文字で表示される入力例やヒントを指定します。
• required: この属性を指定すると、入力欄が必須になります。空のままフォームを送信しようとすると、ブラウザがエラーメッセージを表示します。
• checked: checkboxやradioタイプの入力フィールドで、最初から選択された状態にしておきたい場合に指定します（属性値は不要、属性名だけでOK）。
• disabled: この属性を指定すると、入力フィールドが無効化され、入力を受け付けなくなります（属性値は不要）。

“`html

“`

<textarea>：複数行テキスト入力

<textarea>タグは、複数行のテキストを入力できるフィールドを作成します。問い合わせフォームの「お問い合わせ内容」など、長い文章を入力してもらいたい場合に使用します。開始タグと終了タグの間にデフォルトのテキストを記述できます。

“`html
メッセージ:

“`

主なtextareaタグの属性：

• name (必須): フォーム送信時の識別名。
• rows: 表示される行数を指定します。
• cols: 表示される列数（概ね文字数）を指定します。
• placeholder: 入力例やヒント。
• required: 必須入力にする。
• disabled: 無効化する。

<label>：フォーム要素のラベル

<label>タグは、フォーム要素（<input>, <textarea>, <select>など）に対するラベル（説明文）を作成します。<label>タグのfor属性の値と、対応するフォーム要素のid属性の値を同じにすることで、両者を関連付けることができます。

これにより、ラベルをクリックするだけで対応する入力フィールドにフォーカスが移動するようになり、ユーザーにとって使いやすさが向上します。また、アクセシビリティの観点からも重要です。

html
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">

<select>と<option>：ドロップダウンリスト

<select>タグは、ドロップダウンリストまたはスクロールリストを作成します。ユーザーは定義済みの選択肢の中から項目を選びます。

<select>タグの中に、各選択肢を定義する<option>タグを配置します。

“`html
国を選択:


日本

アメリカイギリス

“`

主なselectタグの属性：

• name (必須): フォーム送信時の識別名。
• multiple: この属性を指定すると、複数の項目を選択できるようになります（通常はCtrlまたはCmdキーを押しながらクリック）。ドロップダウンリストではなく、スクロールリストとして表示されるようになります。
• size: multiple属性がない場合は表示する選択肢の数を、multiple属性がある場合はリストの表示行数を指定します。

主なoptionタグの属性：

• value (必須): その選択肢が選択されたときに、フォーム送信データとしてサーバーに送られる値を指定します。<option>タグの開始タグと終了タグの間に書かれたテキストは、ユーザーがリストで目にする表示テキストです。
• selected: この属性を指定すると、最初から選択された状態になります（属性値は不要）。

“`html
好きな果物:


リンゴ

バナナオレンジ

“`

<button>：ボタン

<button>タグは、ボタンを作成します。<input type="submit">や<input type="reset">でもボタンは作れますが、<button>タグの利点は、ボタンの中にテキストだけでなく画像や他のHTML要素を含めることができる点です。

html
<button type="submit">送信</button>
<button type="button">これは何もしないボタン</button>

主なbuttonタグの属性：

• type: ボタンの種類を指定します。
  • submit (デフォルト): フォームを送信するボタン。
  • reset: フォームの内容をリセットするボタン。
  • button: 特に機能を持たない汎用ボタン。主にJavaScriptと組み合わせて使用します。
• name (type=”submit”の場合): フォーム送信時にボタンが押されたことを識別するための名前。
• value (type=”submit”の場合): フォーム送信時にname属性と共に送信される値。
• disabled: 無効化する。

<fieldset>と<legend>：フォーム要素のグループ化

<fieldset>タグは、フォームの要素をグループ化するために使用します。関連性の高い入力欄をまとめて囲むことで、フォームの構造を分かりやすくします。

<legend>タグは、<fieldset>でグループ化された内容に対するキャプション（見出し）を指定します。

“`html

“`

<fieldset>はブラウザによっては枠線で囲まれて表示され、<legend>はその枠線の上部に表示されます。

ウェブページの構造を作るタグ：セマンティックHTMLとは？

これまで見てきたタグの中には、テキストの意味（見出し、段落、引用など）を明確にするものがありました。これらのタグを適切に使うことで、ウェブページのコンテンツに意味と構造を与えることができます。このような「意味」を重視したHTMLの書き方を「セマンティックHTML」と呼びます。

なぜセマンティックHTMLが重要なのでしょうか？

1. アクセシビリティの向上: スクリーンリーダーなどの支援技術がページの構造やコンテンツの意味を正しく解釈し、視覚障害者などに情報を伝えることができます。
2. SEO（検索エンジン最適化）: 検索エンジンがページの内容をより正確に理解し、適切な検索結果に表示しやすくなります。
3. メンテナンス性の向上: 人間がコードを読んだときに、その部分が何を表しているのか理解しやすくなり、後でコードを修正したり、チームで開発したりしやすくなります。

現代のHTML（HTML5）では、従来の汎用的なタグである<div>や<span>に加えて、ページの特定の部分を示すためのセマンティックな構造タグが導入されました。

汎用コンテナ：<div>と<span>

• <div>：ブロックレベル要素の汎用コンテナです。”div”は “division” の略で、「区切り」を意味します。CSSでスタイルを適用したり、JavaScriptで操作したりするためのグループ化によく使われます。デフォルトでは、前後に改行が入ります。

  html
<div>
<h2>セクションタイトル</h2>
<p>このdiv要素は、このセクション全体を囲んでいます。</p>
</div>

• <span>：インライン要素の汎用コンテナです。テキストの一部分だけを囲んで、特定のスタイルを適用したり、JavaScriptで操作したりするために使われます。デフォルトでは、前後に改行は入りません。

  html
<p>この<span style="color: red;">赤い文字</span>の部分はspan要素で囲まれています。</p>

<div>と<span>は「意味」を持たない汎用的なタグですが、これらの要素を多用するだけではセマンティックな構造になりません。そこで、次に紹介するHTML5で追加されたセマンティックタグの出番です。

主要なセマンティックタグ

これらのタグは、ページの特定の部分がどのような役割を持っているかを示すために使用します。

• <header>：ページのヘッダー部分を示します。ウェブサイトのタイトル、ロゴ、ナビゲーションなどが含まれることが多いです。

  html
<header>
<h1>ウェブサイト名</h1>
<nav>...</nav> <!-- ナビゲーションリンク -->
</header>

• <nav>：ウェブサイト内のナビゲーションリンクの集合を示します。主要なメニューリンクなどを囲むために使用します。

  html
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about/">会社概要</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>

• <main>：文書の主要なコンテンツを示します。ページの中心的な内容であり、各ページで固有の内容を含む部分です。1つのHTML文書に1つだけ配置するのが推奨されています。

  html
<main>
<article>...</article> <!-- 記事やブログ投稿 -->
<section>...</section> <!-- 関連セクション -->
</main>

• <article>：自己完結した独立したコンテンツを示します。ブログ記事、ニュース記事、フォーラムの投稿、ユーザーコメントなど、それ単体で意味を持つコンテンツブロックに使用します。

  html
<article>
<h2>記事タイトル</h2>
<p>記事の内容...</p>
<p>続き...</p>
</article>

• <section>：文書内の関連性の高いコンテンツのまとまり（セクション）を示します。通常、見出し（<h1>～<h6>）を含みます。特定のテーマや目的を持つコンテンツのグループ分けに使用します。<article>の中に複数の<section>を入れたり、<section>の中に複数の<article>を入れたりすることもあります。

  html
<section>
<h2>製品ラインナップ</h2>
<p>当社の主要製品をご紹介します。</p>
<div>製品A</div>
<div>製品B</div>
</section>

• <aside>：ページの主要コンテンツとは間接的に関連するコンテンツを示します。サイドバー、関連リンク、広告、用語集などが含まれることが多いです。

  html
<main>
<article>...</article>
<aside>
<h3>関連記事</h3>
<ul>
<li><a href="...">記事1</a></li>
<li><a href="...">記事2</a></li>
</ul>
</aside>
</main>

• <footer>：ページのフッター部分を示します。著作権情報、連絡先情報、サイトマップ、関連リンクなどが含まれることが多いです。

  html
<footer>
<p>&copy; 2023 My Website</p>
<address>連絡先: ...</address>
</footer>

これらのセマンティックタグを使うことで、ウェブページのレイアウトを<div>だけで作るよりも、その構造がより明確になり、人にも機械にも理解しやすくなります。

その他のセマンティックタグ

• <figure>：図や写真、イラスト、コードリスト、グラフなどをグループ化し、主要なコンテンツから独立した単位として扱います。

• <figcaption>：<figure>タグで囲まれたコンテンツに対するキャプション（説明）を指定します。<figure>タグの中に含めて使用します。

  html
<figure>
<img src="chart.png" alt="売上グラフ">
<figcaption>過去1年間の売上推移グラフ</figcaption>
</figure>

• <time>：日時を指定します。datetime属性を使用することで、機械が解釈できる形式で正確な日時を提供できます。

  html
<p>公開日：<time datetime="2023-10-27">2023年10月27日</time></p>
<p>イベント開始時刻：<time datetime="2024-01-01T18:00+09:00">2024年1月1日 午後6時</time></p>

属性（Attribute）についてもっと知ろう！

HTML要素は、属性を持つことでその動作や表示を詳細に制御できます。ほとんどのタグで利用できる「グローバル属性」と、特定のタグでのみ利用できる固有の属性があります。固有の属性については、各タグの説明の中で触れてきました。ここではグローバル属性について紹介します。

グローバル属性（全ての要素に共通）

ほぼ全てのHTML要素で使用できる属性です。

• id: 要素に固有の識別名をつけます。1つのHTML文書内で同じidを持つ要素は一つだけです。CSSやJavaScriptで特定の要素を指定するために使われます。ページ内リンクのジャンプ先としても使用されます。

  html
<h2 id="introduction">導入</h2>

• class: 要素にクラス名をつけます。複数の要素に同じクラス名をつけることができます。主にCSSで同じクラス名を持つ要素にまとめてスタイルを適用するために使われます。JavaScriptでも要素を選択するのに使われます。

  html
<p class="highlight">重要なポイント</p>
<p class="normal">普通の段落</p>
<button class="btn btn-primary">送信</button>

• style: 要素に直接CSSスタイルを指定します。インラインスタイルとも呼ばれます。

  html
<p style="color: blue; font-weight: bold;">このテキストは青色の太字です。</p>

  注意： style属性はCSSのコードとHTMLのコードが混ざってしまい、管理が難しくなるため、特別な理由がない限り使用は避けるべきです。CSSはHTMLとは別のファイル（または<style>タグ内）に記述し、class属性などを使ってHTML要素と関連付けるのがベストプラクティスです。

• title: 要素に関する補足情報を提供します。要素にカーソルを合わせたときにツールチップとして表示されることが多いです。<a>タグや<abbr>タグで特に役立ちます。

  html
<img src="photo.jpg" alt="美しい風景" title="山の上の湖">
<p><abbr title="Cascading Style Sheets">CSS</abbr></p>

• lang: 要素の言語を指定します。主に<html>タグに使用しますが、文書の一部だけ異なる言語で書かれている場合に、その部分の要素にlang属性を指定することで、アクセシビリティや翻訳ツールに役立ちます。

  html
<p lang="en">Hello, world!</p>

• data-*: カスタムデータ属性です。data-という接頭辞に続けて任意の名前（ハイフンで繋いでもOK）を付け、要素にカスタムデータを格納できます。このデータは、主にJavaScriptからアクセスして利用するために使用されます。

  html
<div class="product" data-id="123" data-category="electronics">
商品情報
</div>

• aria-*: WAI-ARIA属性です。ウェブコンテンツをよりアクセシブルにするために使用します。特に、JavaScriptで動的にコンテンツが変化するような場合に、その状態や役割を支援技術に正確に伝えるために使用します。初心者の方は最初は難しく感じるかもしれませんが、アクセシビリティを意識する上で非常に重要な属性群です。

  html
<button aria-expanded="false" aria-controls="navbar">メニュー</button>

グローバル属性は、HTML要素に様々な機能や情報、スタイリングのフックを提供します。これらの属性を使いこなすことで、よりリッチで構造的なウェブページを作成できます。

HTMLコーディングのヒント：きれいに書くコツ

HTMLタグの使い方だけでなく、コードを読みやすく、メンテナンスしやすく書くための基本的なルールやヒントを紹介します。

入れ子のルールとインデント

HTML要素は正確に入れ子にする必要があります。開始タグと終了タグが正しく対応し、要素が跨がらないようにしましょう。

“`html

これは強調されたテキストです。

これは間違った書き方です。

“`

また、入れ子の深さに応じてインデント（字下げ）を付けることで、コードの構造が視覚的に分かりやすくなります。これは必須のルールではありませんが、多くの開発者が推奨する書き方です。

“`html

“`

インデントにはスペースまたはタブを使用します。どちらを使うかはプロジェクトや個人の好みによりますが、統一することが重要です。

小文字推奨

HTMLのタグ名や属性名、属性値は、大文字でも小文字でも技術的には問題ありませんが、全て小文字で記述するのが一般的かつ推奨されています。これはコードの一貫性を保ち、読みやすくするためです。

“`html

こんにちは

こんにちは

“`

コメントの書き方

コードの中に、人間のためのメモや説明を残したい場合があります。これはブラウザには表示されず、コードを読む人だけが見ることができます。HTMLでコメントを書くには、<!--と-->で囲みます。

“`html

ページのタイトル

本文

“`

コメントは、後で自分がコードを見返したときや、他の人と協力して開発する際に非常に役立ちます。

バリデーションの重要性

HTMLコードが文法的に正しいかどうかを確認することを「バリデーション」と呼びます。HTMLの書き間違い（閉じタグの忘れ、属性値のクォーテーション忘れなど）があると、ブラウザによって表示が崩れたり、意図しない動作になったりする可能性があります。

W3C Markup Validation Serviceのようなバリデーターツールを使うと、HTMLコードのエラーや警告をチェックできます。コードを書き終えたら、バリデーションを行う習慣をつけましょう。最初は小さなミスがたくさん見つかるかもしれませんが、一つずつ修正していくことで正確なコーディングスキルが身につきます。

まとめ：HTMLの次へステップアップ！

お疲れ様でした！この記事では、HTMLの基本的な構造から、テキスト、リスト、リンク、画像、テーブル、フォーム、そしてページの構造を定義する主要なタグまで、幅広く詳細に解説しました。

HTMLはウェブページの骨組みを作る言語であり、ここで紹介したタグはウェブ制作の最も基本的な要素です。これらのタグの意味と使い方をしっかりと理解することで、どんなウェブページもその構造を読み解き、自分で作成できるようになります。

学習のポイント

• HTML文書は<!DOCTYPE html>、<html>、<head>、<body>という基本的な構造を持つ。
• タグはコンテンツに意味や役割を与えるもので、多くは開始タグと終了タグのペアで使う。
• 属性はタグに追加情報（リンク先、画像パス、ID、クラスなど）を与える。
• <p>（段落）、<h1>～<h6>（見出し）、<a>（リンク）、<img>（画像）などは特に頻繁に使う重要なタグ。
• リスト（<ul>, <ol>, <dl>）、テーブル（<table>関連）、フォーム（<form>関連）は、特定の種類のコンテンツを構造化するために使う。
• HTML5で追加されたセマンティックタグ（<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>など）は、ページの役割を明確にし、アクセシビリティやSEOに役立つ。
• idやclassなどのグローバル属性は、CSSやJavaScriptで要素を操作するための重要な手段となる。
• 正しい入れ子、小文字での記述、インデント、コメント、バリデーションは、きれいでメンテナンスしやすいコードを書くための良い習慣である。

練習の勧め

この記事で学んだタグを使って、実際に簡単なHTMLファイルを作成してみてください。テキストエディタ（VS Code, Sublime Textなど）を開き、上記の基本構造をコピー＆ペーストし、様々なタグを試してみましょう。ブラウザでファイルを開いて、どのように表示されるか確認する練習を繰り返すことが、理解を深める最も効果的な方法です。

次に学ぶこと：CSSとJavaScript

HTMLでウェブページの骨組みができたら、次はその見た目を整えたり、動きを付けたりする方法を学びたくなりますね。

• CSS (Cascading Style Sheets)：HTMLで定義した要素の色、フォント、サイズ、配置などを指定するための言語です。HTMLとCSSを組み合わせることで、見栄えの良いウェブページを作成できます。
• JavaScript：ウェブページに動きや対話性（ボタンをクリックしたら何かをするとか、フォームの入力をチェックするとか）を持たせるためのプログラミング言語です。

これらの技術もHTMLと同様に、ウェブ制作の必須スキルです。HTMLの基礎が身についたら、ぜひこれらの技術も学び始めてみてください。

継続的な学習の重要性

ウェブ開発の世界は常に進化しています。新しい技術が登場したり、既存の技術がアップデートされたりします。一度学んだら終わりではなく、継続的に学習を続けることが大切です。

この記事が、あなたのHTML学習の素晴らしい第一歩となることを願っています。これから広がるウェブの世界を、ぜひ楽しんでください！