お問い合わせ

032.2 HTMLの意味とドキュメントの階層
Web Development Essentials | 2024/02/06

前回の記事では、HTMLの基本的な仕組みと文法について学びました。本章からは、更に要素の仕組みについて理解を深め、より多くのタグについて詳しく説明していきます。

マークアップ言語とは

HTML(hyper text markup language)はWebページを制作する為のマークアップ言語です。マークアップ言語はデータの計算や処理を行うプログラム言語とは異なり、タグを使って文章構造をコンピュータに理解させる為に使用します。例えば、<title>というタグで囲まれた文言は「Webブラウザのタブ」や「Webブラウザの検索結果」として表示されます。（※マークアップとは：コンピュータに文書の意味を理解させること。）

ブロック要素とインライン要素について

Webブラウザに表示する部分は <body>タグに記述します。<body>タグ内で使用される要素は大きく分けて「ブロック要素」と「インライン要素」のカテゴリに分けることができ、本章では「ブロック要素」と「インライン要素」について詳しく説明していきます。

ブロック要素

HTMLのタグは殆どブロック要素からなります。下記はブロック要素の <div>タグと<p>タグを並べて記述したコードとブラウザの表示例です。ブロック要素は横幅いっぱいに広がり、ブロック要素毎に自動的に改行する特徴があります。

■ブロック要素のコード例

<body>
    <div>これはdivタグで文章を囲んだブロック要素です。</div>
    <p>これはpタグで文章を囲んだブロック要素です。</p>
</body>

インライン要素

下記はインライン要素の <strong>タグと<a>タグを並べて記述したコードと、ブラウザの表示例です。インライン要素はタグで囲まれた領域のみに影響を与えるため、横幅いっぱいに領域が広がらず、インライン要素を並べても自動で改行はされません。また、インライン要素の中にブロック要素を入れることは出来ません。

■インライン要素のコード例

<body>    
    <strong>strongタグ</strong>
    <a href="">aタグ</a>
</body>

階層化HTMLテキスト構造の理解

前回の記事ではHTMLのネストについて簡単に説明しましたが、タグの中には特定のタグしか子要素にしてはいけない特殊なタグがあります。本項目ではそのような特徴を持つ代表的なタグについて説明します。

<ul>

ブロック要素
終了タグ：</ul>
概要：ulは「Unordered List（順序がないリスト）」の略で、順序のないリスト要素を表します。<ul>タグの行頭にはドットや円形といった意味を持たない形式の記号が描画されます。<ul>タグの子要素には<li>タグしか使用することができません。

<ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
</ul>

<li>

ブロック要素
終了タグ：</li>
概要：liは「List Item」の略称で、順序付きリスト（番号付きリスト）や順序なしリスト（箇条書きリスト）など、さまざまな種類のリストの項目を表します。<ul>タグの子要素として使用されます。

<dl>

ブロック要素　
終了タグ：</dl>
概要：dlは「Description List」の略で、用語の項目名とその説明を組み合わせとするリストを表します。一般的に用語集の作成等に使用されます。子要素は<dt>タグと<dd>タグしか使用することが出来ません。

<dt>

ブロック要素
終了タグ：</dt>
概要：dtは「Definition Term」の略で、「用語の項目」を表します。このタグは親要素に<dl>タグしか使用することが出来ません。

<dd>

ブロック要素
終了タグ：</dd>
概要：ddは「Definition Description」の略で、用語の説明を表します。このタグは親要素に<dl>タグしか使用することが出来ません。

HTMLには箇条書きリストである <ul>タグと似たようなタグとして<ol>タグが用意されており、<ol>タグも子要素として<li>タグを使用します。本章ではタグ名の紹介のみに留めますが、こちらのタグも試験範囲ですので、特徴について調べておきましょう。

重要性な意味構造のHTMLエレメントの理解

HTMLエレメントとは、開始タグから終了タグまでに含まれている内容（要素）のことを指します。本章では、HTMLを作成するうえで特に重要なHTMLエレメントを説明します。

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

ブロック要素
終了タグ：</h1>、</h2>、</h3>、</h4>、</h5>、</h6>
概要：<h1> ～ <h6>タグまでの各タグは見出しを表します。この「h」は英語で見出しを意味する「heading」の略で、見出しタグは合計で6種類あり、<h1>タグが最上位、続いて<h2>タグ、<h3>タグといった順番で上位順が決められており、<h6>タグが最下位となります。上位の見出しタグになる程、重要度が増し、フォントサイズが大きく表示されます。また、<h1>タグは1ページに１つだけ使用することが一般的であり、ページ全体の内容を端的に表すために使用されます。その為、いくつも<h1>タグを使用しないように注意しなければなりません。

<h1>最上位の見出しです(h1)</h1>
<h2>次に重要度の高い見出しです(h2)</h2>
<h3>次に重要度の高い見出しです(h3)</h3>

<div>

ブロック要素
終了タグ：</div>
概要：<div>タグは汎用的なHTMLタグで、各コンテンツをひとまとめする（ブロック要素としてグループ化する）ブロックを表します。

<p>

ブロック要素
終了タグ：</p>
概要：pは、英語で「段落」を意味する「paragraph（パラグラフ）」の頭文字を取ったタグです、その意味の通り一つの段落を意味します。<p>タグはスタイルや間隔の調整などに使用します。

<header>

ブロック要素
終了タグ：</header>
概要：<header>タグはページのヘッダーを表します。ヘッダーにはWebサイトの見出し、ロゴ、ナビゲーションのような内容を配置します。<header>タグの子要素に別の<header>タグは配置出来ません。また<header>タグの中に<footer>タグを入れる事は出来ません。

<main>

ブロック要素
終了タグ：</main>
概要：<main>タグはページのメインコンテンツを表します。1ページに<main>タグを2つ以上置くことは出来ません。

<footer>

ブロック要素
終了タグ：</footer>
概要：<footer>タグはページのフッターを表します。フッターにはコピーライト（著作権情報）や関連文書へのリンク等を表示するために使用します。

<section>

ブロック要素
終了タグ：</section>
概要：<section>タグは1つのセクション（文書の章や節）であることを表します。<section>タグの子要素の一行目には見出しタグ（<h1> ～ <h6>）を書くことが一般的です。

<nav>

ブロック要素
終了タグ：</nav>
概要：<nav>タグはナビゲーションとなるセクションを表します。<nav>タグは主要なナビゲーション（メニューなど）に使用されます。

<a>

インライン要素
終了タグ：</a>
概要：<a>タグの「a」は「anchor（アンカー）」の頭文字を意味し、リンクを表します。リンクの作成はリンク名として表示したい文言を<a>タグで囲み、「href」属性を指定して属性値に移動したいURLを記述します。下記の場合、「えるすた記事」をクリックするとえるすたのホーム画面に画面遷移します。

<a href="https://l-study.arcjp.com/lpic/">えるすた記事</a>

これらタグはWeb開発を行う上で、頻繁に使用されるタグです。もちろん試験でも問われますので、しっかりと各タグの特徴について把握しておきましょう。

その他のタグ

前の項目では、HTMLを作成する上で特に重要なタグについて紹介しましたが、HTMLのタグの種類は100個以上あります。HTMLドキュメント（※HTML文書）を作成する上で全てのタグを覚える必要はありませんが、本章ではよく使用するタグについて説明します。

<span>

インライン要素　
終了タグ：</span>
概要：<span>タグは汎用的なhtmlタグで、<span>タグで囲んだ文章のスタイルを調整する際等に使用します。

<code>

インライン要素
終了タグ：</code>
概要：<code>タグはプログラムのソースコードを表します。HTML文書にプログラムのソースコードを記述すると、プログラムが実行される場合がある為、ソースコードを記述したい場合は<code>タグで囲む必要があります。

<pre>

ブロック要素
終了タグ：</pre>
概要：<pre>タグは整形済みの文章を表します。<pre>タグで囲まれたソースコードはスペースや改行がそのまま保持され、等幅フォントで表示されます。また自動的な折り返しが行われなくなります。

<blockquote>

ブロック要素
終了タグ：</blockquote>
概要：<blockquote>タグは、<blockquote>タグで囲まれた文章が引用文であることを示します。

<strong>

インライン要素
終了タグ：</strong>
概要：<strong>タグは内容の重要性が高い文章を表します。Webブラウザでは太字で表示されます。

文章に何かしらの効果を付与するタグは <strong>タグ以外にも、<em>タグ、<b>タグ、<i>タグ、<u>タグ等があり、これらのタグも試験範囲に含まれています。本章では詳細な説明は省きますが、どのような特徴のあるタグなのか調べておきましょう。

HTMLドキュメントのコンテンツにマークアップ

ここまで多くのタグについて学習しましたが、実際にマークアップしたコンテンツがWebブラウザ上でどのように表示されるか確認することで、よりHTMLの理解が深まると思います。そこで、新しくHTMLファイルを作成し、以下の仕様（1 〜 14）に沿ってHTMLを記述し、Webブラウザに表示してみましょう。

■仕様

  1. 「test.html」ファイルを作成し、HTMLの雛形のソースコード（参考：前回の記事（HTML ドキュメントの構造））を記述しましょう。

  2. ページの「タイトル（<title></title>）」の文言は「タイトル」と記述しましょう。（※<title>タグで囲んだ文言はWebブラウザのタブに表示する際に使用します。）

  3. <body>タグの子要素に「ヘッダー（<header></header>）」を作成しましょう。（※<header>タグはWebサイト内のナビゲーションリンク等を表示する際に使用します。）

  4. 「ヘッダー」の子要素に「ナビゲーションリンク（<nav></nav>）」を作成しましょう。（※<nav>タグはWebサイトのメニュー（TOPページやお知らせ等）を表示する際に使用します。）

  5. 「ナビゲーションリンク」の子要素に「箇条書きリスト（順序無しタグ）（<ul></ul>）」を追加しましょう。

  6. 「箇条書きリスト」の子要素に「リスト項目（<li></li>）」を2つ追加しましょう。

  7. 各「リスト項目」の子要素に「リンク（<a href=”” alt=””></a>）」を追加し、1つ目のリスト項目のリンクには「<a href=”https://l-study.arcjp.com/lpic/” alt=”えるすた”>えるすた</a>、2つ目のリスト項目のリンクには<a href=”https://l-study.arcjp.com/lpic/category/info/” alt=”お知らせ”>お知らせ</a>」と記述しましょう。

  8. 「ヘッダーの閉じタグ（</header>）」の後に改行し、「メインコンテンツ（<main></main>）」を追加しましょう。（※<main>タグはWebサイト内の主要コンテンツを表示する際に使用します。）

  9. 「メインコンテンツ」の子要素に「最高位の見出し（<h1></h1>）」を追加し、見出しの文言は「ページの見出し」と記述しましょう。

  10. 「最高位の見出し（</h1>）」の後に改行し、「セクション（<section></section>）」を追加しましょう。（※<section>タグはWebサイト内に1つのセクションがあることを想定して記述します。）

  11. 「セクション」の子要素に「2番目に大きな見出し（<h2></h2>）」を追加しましょう。また、見出しの文言は「セクションの見出し」と記述しましょう。

  12. 「2番目に大きな見出し（</h2>）」の後に改行し、3つの「段落（<p></p>）」を追加して一つずつ改行しましょう。そして段落順に「これは太文字の文章です」、「これは斜体（Italic）の文章です」、「これは下線の文章です」と文言を記述しましょう。また、各段落で記述した「太文字」は<b>タグ、「斜体（Italic）」は<i>タグ、「下線」は<u>タグで囲みましょう。

  13. 「メインコンテンツの閉じタグ（</main>）」の後に改行し、「フッター（<footer></footer>）」を追加しましょう。（※<footer>タグはWebサイト内のコピーライト等を表示する際に使用します。）

  14. 「フッター」の子要素に「段落（<p></p>）」を追加し、段落の文言は「コピーライト」と記述しましょう。

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

<!DOCTYPE html>    <!-- 1 -->
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
　　    <meta name="description" content="えるすた">
        <title>タイトル</title>    <!-- 2 -->
    </head>
    <body>
        <header>    <!-- 3 -->
            <nav>    <!-- 4 -->
                <ul>    <!-- 5 -->
                    <li>    <!-- 6 -->
                        <a href="https://l-study.arcjp.com/lpic/" alt="えるすた">えるすた</a>    <!--7  -->
                    </li>
                    <li>    <!-- 6-->
                        <a href="https://l-study.arcjp.com/lpic/category/info/" alt="お知らせ">お知らせ</a>    <!-- 7 -->
                    </li>
                </ul>
            </nav>
        </header>
        <main>    <!-- 8 -->
            <h1>ページの見出し</h1>    <!-- 9 -->
            <section>    <!-- 10 -->
                <h2>セクションの見出し</h2>    <!-- 11 -->
                <p>これは<b>太文字</b>の文章です</p>    <!-- 12 -->
                <p>これは<i>斜体(Italic)</i>の文章です</p>    <!-- 12-->
                <p>これは<u>下線</u>の文章です</p>    <!-- 12 -->
            </section>
        </main>
        <footer>    <!-- 13 -->
            <p>コピーライト</p>    <!-- 14 -->
        </footer>
    </body>
</html>

いかがでしたか？上記ソースコードはこれまでに紹介したタグの一部を使用しています。上記ソースコードを繰り返し記述することで、タグの特徴について理解が深まると思います。また、上記ソースコードにその他タグ（<strong>タグや<code>タグ等）を追加し、Webブラウザ上でどのように表示されるか確認してみてくださいね！

それでは、今回はここまで〜。

<<前のページ
目次に戻る
次のページ>>
PAGE TOP