5.1.1. HTML

1. 概要

 HTML(HyperText Markup Language)は、Webページの構造を定義するためのマークアップ言語です。HTMLはWebの基盤技術の一つであり、すべてのWebサイトの構造を形作る上で極めて重要な役割を果たしています。HTMLの理解は、Webデベロッパーだけでなく、情報処理技術者にとっても不可欠なスキルです。

2. 詳細説明

 HTMLは、SGMLを元に開発されました。SGMLとは、文書の論理構造を記述するためのメタ言語です。HTMLは、この考え方を取り入れつつ、より単純化された形でWebページの構造を定義します。

 HTMLの主要な特徴は以下の通りです:

  1. タグベースの構造: HTMLは開始タグと終了タグを使用して要素を定義します。例えば、<p>これは段落です。</p>のように記述します。
  2. 文書型定義(DTD): HTMLドキュメントの先頭には、使用するHTML規格のバージョンを指定するDTDが含まれます。これにより、ブラウザはドキュメントをどのように解釈すべきかを理解できます。
  3. 階層構造: HTMLドキュメントは、入れ子構造を持つ要素から構成されます。最上位には<html>要素があり、その中に<head><body>要素が含まれます。
  4. セマンティックな要素: HTML5以降、<header>, <nav>, <article>などのセマンティックな要素が導入され、文書の構造をより明確に定義できるようになりました。

 基本的なHTMLドキュメントの構造は以下のようになります:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    <h1>見出し</h1>
    <p>これは段落です。</p>
</body>
</html>

3. 応用例

 HTMLは様々な分野で幅広く応用されています:

  1. Webサイト開発: 企業のWebサイト、ブログ、ニュースサイトなど、インターネット上のほぼすべてのWebページの基盤としてHTMLが使用されています。
  2. Eラーニング: オンライン教育プラットフォームでは、教材の構造化にHTMLが活用されています。
  3. 電子書籍: EPUB形式の電子書籍は、HTMLをベースとしており、リッチなコンテンツの提供を可能にしています。
  4. ウェブアプリケーション: シングルページアプリケーション(SPA)など、複雑なウェブアプリケーションの基盤としてもHTMLが使用されています。

4. 例題

例題1

 以下の要件を満たすHTMLコードを作成してください:

  • ページタイトルを「私の自己紹介」とする
  • 「自己紹介」という見出しを含める
  • 名前、年齢、趣味を含む段落を作成する
  • 趣味をリストで表示する

回答例1:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私の自己紹介</title>
</head>
<body>
    <h1>自己紹介</h1>
    <p>私の名前は山田太郎です。年齢は30歳です。</p>
    <p>趣味は以下の通りです:</p>
    <ul>
        <li>読書</li>
        <li>旅行</li>
        <li>プログラミング</li>
    </ul>
</body>
</html>

例題2

 HTML5で導入されたセマンティック要素を3つ挙げ、それぞれの用途を簡単に説明してください。

回答例2:

  • <header>: ページまたはセクションのヘッダー部分を定義します。
  • <nav>: ナビゲーションリンクのセットを定義します。
  • <article>: 独立したコンテンツを定義します。ブログ記事や新聞記事などに適しています。

5. まとめ

 HTMLは、Webページの構造を定義するための基本的なマークアップ言語です。SGMLから派生し、開始タグと終了タグを使用して要素を定義します。文書型定義(DTD)を使用してHTMLのバージョンを指定し、階層構造を持つことが特徴です。HTML5以降は、よりセマンティックな要素が導入され、文書の構造をより明確に定義できるようになりました。

 HTMLの理解は、Webサイト開発、Eラーニング、電子書籍、ウェブアプリケーションなど、様々な分野で活用されており、情報処理技術者にとって不可欠なスキルの一つとなっています。