032.1 HTML ドキュメントの仕組み

Web Development Essentials | 2024/01/30

HTMLドキュメントの仕組み　

第２トピックからWebページを表示する為に必要なHTML（エイチティーエムエル）について学習していきます。Web Development Essentialsでは、後のトピックでもHTMLは取り扱うため、とても重要な項目です。しっかりと身に着けていきましょう！

HTMLとは

HTML（略称：Hyper Text Markup Language）はWebページを表示する為の言語です。
Hyper Text（ハイパーテキスト）とは文書を他の複数の文書と紐づける仕組みです。

Markup（マークアップ）とはタグと呼ばれる記号を使い、文章に意味や構造を付与する仕組みです。例えば下記の場合だと、titleタグで囲まれた文章（タイトル）はコンピュータがページのタイトルとして認識します。人は目で見てページのタイトルを読み取れますが、文章の意味を読み取る為にコンピュータの場合は「マークアップ」が必要となります。

HTML言語と文法

それでは、実際にHTML文書で書かれたソースコードを見てみましょう。

■HTMLの基本（雛形）例

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="えるすた">
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

上記はHTMLの雛形と呼ばれるソースコードです。またはHTMLスケルトンと呼ばれます。雛形のソースコードは基本的にHTMLを作成するうえで、必須の項目となります。HTMLは書き方にルールがあり、ルールに沿って表示したいテキスト等を追加し、HTMLファイルを作成します。先ずは基本的な文法について説明します。

ルール① :: 開始タグと終了タグについて。　

HTMLの基本的なルールはタグ【<○○>】で文章を囲い込むことです。タグの始まりを開始タグ、タグの終わりを終了タグもしくは閉じタグと呼びます。終了タグの場合はタグにスラッシュを追加し、【</ ○○>】と記述します。（※一部終了タグが無いタグもあります。）

HTMLの基本例を確認してもらうと、「html」「title」「head」「body」が開始タグと終了タグを持ち合わせています。

■htmlタグ

<html lang="ja">  →開始タグ
</html>           →終了タグ

■titleタグ

<title>   →開始タグ
</title>  →終了タグ

開始タグから終了タグまでに含まれている内容を「要素」と呼び、HTMLは構成されています。例えば、「<title>~~~</title>」は<title>から</title>までの部分全体が１つのHTML要素となります。

ルール②::タグの入れ子構造（ネスト）について。

HTMLの基本例を確認すると、htmlタグの中にはtitleタグが含まれていますよね。開始タグと終了タグで囲んだタグのことを「入れ子構造」もしくは「ネスト」と呼びます。また入れ子構造の内側に囲われた要素のことを「子要素」と呼び、子要素からみた外側の要素のことを「親要素」と呼びます。

以下の「参考例」では、html要素の内側にtitle要素があります。html要素を基準にした場合、内側にあるtitle要素は「子要素」となります。また、title要素を基準にした場合では、外側にあるhtml要素は「親要素」になります。

■参考例

<html lang="ja">  →開始タグ１     親要素
    <title>	      →開始タグ２     子要素
    </title>      →終了タグ２
</html>           →終了タグ１

また、タグの入れ子構造では、タグ同士が互い違いになるように記述してはいけません。ブラウザによっては不具合が生じ、ブラウザ画面の表示がおかしくなる場合があります。HTMLを記述する際は、必ずタグがネストしていることを確認しましょう。またhtmlタグは入れ子にして使用するため、判別しやすいように子要素にはインデント（空白）をつけ、段落を分けて記述するのが一般的です。

正しい記述　:: htmlタグとtitleタグがネストしている 
<html lang="ja">    
    <title>	       
    </title>      
</html>

間違った記述　:: htmlタグとtitleタグが互い違いになっている　
<html lang="ja">  
    <title>
</html>  	       
    </title>

HTMLタグについての紹介

主にHTMLを構成するために必須となるタグについて紹介していきます。（※一部はタグではありませんが、この項目で紹介します。）

<!DOCTYPE html>

概要：HTMLの一行目に記述します。<!DOCTYPE html>の記述はHTMLのタグではなく、HTMLドキュメント（HTML文書）であることを宣言しています。現在のHTMLのバージョン（HTML Live Standard）では必須のタグとなります。（※試験では問われ無いと思いますが、HTMLは定期的にバージョンアップが行われており、現在はHTML Live Standardというバージョンが使用されています。）

<html lang=”ja”>

終了タグ：</html>
概要：HTMLドキュメントであることを宣言するタグです。HTMLドキュメントはHTMLのソースコード全体を指します。html要素は「属性」という何かしらの設定を付けることができ、属性の形式は<タグ名属性名=”属性値” >から構成されています。

上記例では、「lang属性」は「ja」という属性値を持ち合わせており、コンピュータに主要な言語を伝えるために記述します。ちなみに、日本語を指定したい場合は”ja”、英語を指定したい場合は”en”を指定します。

<head>

終了タグ：</head>
概要：要素内にページのタイトルやページの簡単な説明、メタ情報等のファイルの情報を指定するタグです。（※メタ情報については次項で説明します。）

<title>

終了タグ：</title>
概要：headタグの子要素にあるタグです。titleタグで囲まれた内容がWebのページタイトルやブラウザタブで表示されます。

<body>

終了タグ：</body>
概要：bodyタグで囲まれた要素（テキストや画像等）はWebページ上に表示されるため、ブラウザに表示したい内容は全てこのタグの中に記述します。

metaタグについて

終了タグ：無し
概要：metaタグはheadタグの子要素にあたるタグです。metaタグの形式は<meta 属性名=”属性値” >から構成されており、ページの説明や文字コードといった情報を設定することができます。上記のHTMLの基本例を参考に、頻繁に利用される属性名と属性値について紹介していきます。

<meta name=”○○○” content=”○○○”>

metaタグ内にname属性とcontent属性を一緒に使用すると、HTMLドキュメントに関連付けられた追加情報を設定することが出来ます。name属性の属性値にはいくつか種類がありますが、本章では”description”属性値を参考例として紹介します。”description”属性値を指定した場合、検索時にWebサイトのタイトルの下にcontent属性の属性値に書かれた内容を表示することができます。

name属性値は試験の範囲外である為、覚える必要はありませんが、Web開発を行う上で設定することが推奨されている属性値もあるので、一度調べてみることをおススメします。

HTMLファイルの作成

それではHTMLファイルを作成し、下記のようにソースコードを記述してみましょう！　（※本章ではVSCodeを使用し、HTMLファイルの作成と記述を行います。VSCodeの導入とHTMLファイルの作成方法はこちらの記事をご参照ください。）

■記述するHTMLファイルのソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="えるすた">
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

ここまでソースコードが書けましたか？これまでに紹介した全てのタグや属性がこのソースコードに記述されています。紹介したタグや属性は全て試験範囲となりますので、それぞれの書き方や機能を把握しておきましょう。

続いて、こちらのソースコードを基に「コメント」という機能について紹介します。

コメントについて

コメントとは、HTML等といったソースコードに影響を与えないでコードを記述することが出来る機能で、主にソースコードの説明や補足情報・メモとして利用されています。コメントの記述方法は言語ごとに異なりますが、下記はHTMLを使用する場合のコメントについて紹介します。

■コメントを追加したHTMLファイルのソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="えるすた">
        <title>Document</title>
    </head>
    <body>
        <!-- このコメントはWebブラウザに表示されません。 -->
        <p>このコメントはWebブラウザに表示されます</p>  
    </body>
</html>

上記のHTMLファイルのbodyタグ内に<!– このコメントはWebブラウザに表示されません。 –>　と記述された部分がコメントになります。この部分はWebブラウザ上に表示されることはありません。<!– –>がHTMLのコメントの形式であることを覚えておきましょう！