フロントエンドエンジアへの超入門の第2回です！前回とりあえずWebページがどういった物かを手を動かしつつHTMLを作成・編集してみましたが
今回はHTMLのタグの種類や実際にどういった形式なのか、といった基礎知識をご紹介します。

前回記事で用意したsample.html引き続き利用して
実際にコードを編集・変更しつつ表示を確認するとより良いと思います。

章毎とかで各ページへの冒頭・末尾とかでリンク自動生成するようにする。(チュートリアル第1章のカテゴリがついてたらとか)

HTML文書の基本構造

HTML（HyperText Markup Language）文書の基本構造は、次のような形式を持っています。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
    </head>
    <body>
        ここにコンテンツが入ります
    </body>
</html>

DOCTYPE宣言(ドキュメントタイプ)

<!DOCTYPE html>

HTML文書の最初の1行目にはドキュメントタイプを記述します。
これはHTML文書のタイプを示す宣言です。
htmlの仕様は時代とともに変化していますが、
2023最新の仕様はHTML Living Standardによって定められています。
上記の記述でHTML Living Standard基づいて作成されたhtml文書である事を示す事ができます。

<html>

<html></html>

HTML文書のルート要素です。この要素で全体のコンテンツを囲みます。
この要素で囲まれたテキストをHyper-Text Markup Language(HTML)と呼びます。

<head>

ドキュメントのメタデータ（情報）を含むセクションです。
メタデータとはページのタイトルやディスクリプション(ページの概要)等を指します。

<meta charset="UTF-8">

文書の文字エンコーディングを指定するための要素です。

<title>タイトル</title>

文書のタイトルを指定するための要素です。ブラウザのタイトルバーに表示されたり履歴に表示されたり等します。

<body>

実際のコンテンツが配置されるメインのセクションです。
この部分がブラウザの表示領域に表示されます。
テキスト、画像、リンク、表などの要素をここに配置します。

冒頭の例では、 <body>要素内には"ここにコンテンツが入ります"
というテキストが配置されているのでその表示が確認できると思います。
今回は至極単純な物ですが、実際のコンテンツはここに配置していきます。

HTMLタグ

上記で登場した<head> や <body>はHTMLタグと呼びます。タグは角括弧（<>）で囲まれ、開始タグと終了タグのペアで構成される場合と、自己完結型の場合があります。

開始タグは要素の始まりを示し、終了タグは要素の終わりを示します。

開始タグと終了タグのペアを持つタグ

<p>これは段落のテキストです。</p>
<a href="https://example.com">リンク</a>
<h1>見出しレベル1</h1>
<ul>
    <li>項目1</li>
    <li>項目2</li>
</ul>

自己完結型のタグ(void要素)

<img src="image.jpg" alt="イメージ">
<br>
<input type="text" name="username">
<hr>

改行を示す<br>や、罫線を示す。<hr>といった
閉じタグが必要ない(存在できない)要素もあり、
そういった要素はや空要素と呼びます。

タグの階層構造

HTMLタグは、他のタグの中に入れ子にすることで包含関係を持つことができます。これにより、タグの階層構造を作成することができます。

<div>
    <h1>タイトル</h1>
    <p>段落のテキストです。</p>
</div>

上記の例では、<div>要素が最上位の要素であり、その中に<h1>要素と<p>要素が含まれています。つまり、<h1>と<p>は<div>に包含されています。

このように、HTMLタグは入れ子にすることができ、階層構造を作ることができます。これにより、コンテンツのセクション化やグループ化、スタイルの適用などが可能になります。

包含関係の崩れ

HTMLの包含関係は、正しくネストする必要があります。
誤って包含関係が崩れることがあると文法エラーとなります

<p>これは段落のテキストです。<div>このdivは段落の内側にあります。</p></div>

上記の例では、開始タグと終了タグが正しくマッチしていないため、
<div>要素が<p>要素の内側に入ってしまっています。
この記述は包含関係の崩れがあり正しいマークアップではありません。

この程度であればブラウザの表示が崩れる。という事は無いと思いますが
もう少し複雑な構造やデザインになると予期しない結果をもたらす可能性があります。

タグの属性値

HTMLの開始タグには属性と呼ばれる追加情報を持つことができます。
属性はタグに付加され、タグが持つ特定の動作や表示を制御するために使用されます。属性は、名前と値のペアで構成されます。

<tagname attribute_name="attribute_value">

ここで、tagnameはタグの名前、attribute_nameは属性名、attribute_valueは属性値です。

属性は多くの場合属性名＝属性値という形式で記述しますが一部の属性では属性名だけ指定すればよい場合もあります。属性名は必ず半角文字にしてください。また基本的な仕様としては大文字・小文字どちらでも構いませんが、
一部小文字のみでしか受け付けない属性値も存在するので特に理由がなければ小文字で指定するのが良いです。(大文字で書く人はあまりいない)

属性名の前には必ず、ひとつ以上の半角スペースか、タブ文字か、改行が必要です。属性を複数指定することも可能です。

以下によく使用されるHTML属性のいくつかを示します

class属性

<div class="container">
    <!-- コンテンツ -->
</div>

要素にクラス名を割り当てます。クラス名はCSSスタイルシートで使用され、要素をスタイル化するための識別子として機能します。

src属性

<img src="image.jpg" alt="イメージ">

画像やスクリプトなどの外部リソースのソースパスを指定します。

href属性

<a href="https://example.com">リンク</a>

リンクの対象URLを指定します。

これらは一部の一般的な属性の例です。他にもさまざまな属性があり、それぞれの属性は特定の要素に対して特定の動作や意味を持ちます。

特殊記号

属性値には空白、<>等の不等号& アンパサンド等の特殊記号を含める事もできますが、
含む場合は属性値をクォーテーション("..." か '...')で内包する必要があります。
特殊記号を含まない場合は囲む必要が無いのですが、こちらも小文字指定と同じく常にクォーテーションで囲んでおくのが無難です。

実践記事一覧

第1章 Webページ作成入門

第2章 Webページ作成実践