いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【HTML/CSS】HTMLの基本構造を学ぼう

Webページ制作の第一歩となるHTMLの基本構造を初心者向けに解説します。この記事を読めば、HTMLとは何かという基礎知識から、Webページの骨組みとなる<!DOCTYPE html>, <html>, <head>, <body>タグのそれぞれの役割と書き方までを理解できます。

作成日: 更新日:

HTMLとは？

HTMLは「HyperText Markup Language(ハイパーテキストマークアップランゲージ)」の略称です。 Webページに表示される文章や画像などの要素を配置し、その構造を定義するために使われる、基本となる言語です。

  • 「ハイパーテキスト」とは、テキストを超えて、他の文書や画像などの情報源へと移動できる「リンク」の機能のことです。
  • 「マークアップ」とは、文章の各部分が「見出し」なのか「段落」なのか、といった意味や役割を、「タグ」と呼ばれる記号で囲んで示すことです。

具体的には、HTMLを使うことで、文章のどの部分が見出しで、どこからどこまでが段落なのかをコンピュータに伝えられます。 また、Webページ上に画像や動画を表示させたり、クリックすると別のページに移動するリンクを設置したりすることも可能です。

HTMLは、Webサイトに表示する内容とその構造を定義する役割を担います。 Webページの見た目を整える「CSS」や、動きを加える「JavaScript」といった他の言語と組み合わせて使用することで、より洗練されたWebページを作成できます。

HTMLファイルとは？

HTMLファイルは、Webページの骨組みを記述するための、文字だけで構成されたファイルのことです。ブラウザに対して「ここに見出しを置いて」「ここに文章を表示して」といった指示を出す、いわばWebページの設計図のような役割を持っています。

ファイル名の末尾に付く**「.html」（または「.htm」）は拡張子（かくちょうし）**と呼ばれ、そのファイルがHTMLファイルであることを示します。Webサイトの最初のページ（トップページ）は、index.html という名前で保存するのが一般的です。

例： index.html

HTMLファイルの中身は、<p>のような**「タグ」という特別な記号と、Webページに表示したい「テキスト（文章）」だけでできています。そのため、Windowsのメモ帳や、プログラミングでよく使われるVisual Studio Code（VS Code）のようなテキストエディタ**（文字を入力・編集するためのソフト）を使って、誰でも簡単に作成・編集することができます。

そして、作成したHTMLファイルをGoogle ChromeやSafariなどのWebブラウザで開くと、ブラウザがタグの指示を解釈し、私たちが普段見ているような整ったWebページとして表示してくれます。

ファイル名の注意点

HTMLファイルを作成する際は、ファイル名にいくつかのルールがあります。これらのルールは、Webサーバー上でファイルが正しく認識され、エラーを防ぐために重要です。

  • 拡張子は必ず .html と小文字で書きます。
    • 予期せぬエラーを避けるため、小文字に統一するのが基本です。
  • ファイル名は半角英数字のみ使用します。（全角、日本語、スペースは使わない）
    • 日本語やスペースが含まれていると、サーバーによってはファイルが正しく認識されず、リンク切れなどの原因になります。
  • 記号は「-（ハイフン）」と「_（アンダースコア）」のみ使用します。
    • これも、サーバー環境によるエラーを防ぐためのルールです。
  • ファイル名は小文字のみに統一します。
    • 大文字と小文字を区別するサーバーもあるため、すべて小文字で統一しておくと管理がしやすくなります。

また、ファイルを保存する際には、意図せず拡張子が .txt などになっていないかを必ず確認してください。例えばメモ帳で保存すると、自動的に .txt が付いてしまうことがあります。

例： index.html（OK） 例： index.html.txt（NG）

index.html.txt という名前のファイルは、HTMLファイルではなく「.txt」という拡張子を持つテキストファイルとして扱われます。そのため、ブラウザで開いてもWebページとして表示されず、書いたコードがそのまま文字として表示されてしまいますので注意しましょう。

HTMLの基本構造

以下はHTMLの基本構造のテンプレートです。

index.html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8" />
6  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7  <title>ページのタイトル</title>
8</head>
9
10<body>
11  <h1>HTMLを学ぼう！</h1>
12  <p>これはHTMLの基本構造のサンプルです。</p>
13</body>
14
15</html>

このコードは、Webページを作成する際の骨格となるものです。 HTMLの基本構造は、主に以下の4つの要素で構成されています。

  • <!DOCTYPE html> これは、このファイルがHTML5というバージョンのルールに従って書かれていることを、ブラウザに伝えるための宣言です。すべてのHTMLファイルの先頭に必ず記述します。

  • <html> <!DOCTYPE html> の次に記述され、HTML文書全体の始まりと終わりを示します。すべてのHTML要素は、この <html> タグの中に記述する必要があります。lang="ja" は、このページの言語が日本語であることを示しています。

  • <head> Webページそのものの設定情報を記述する部分です。ここに書かれた内容は、ブラウザの画面には直接表示されません。例えば、文字コードの指定（文字化け防止）、ページのタイトル、CSSファイル（デザインを指定するファイル）の読み込み設定などを記述します。

  • <body> 実際にブラウザの画面に表示される内容を記述する部分です。見出し、文章、画像など、ユーザーが目にするコンテンツはすべてこの <body> タグの中に配置します。

HTMLファイルの骨組み

Webページを作成する際の基本となる、HTMLファイルの構造について解説します。HTMLファイルは、いくつかの決まったタグで構成される骨組みを持っています。

  • <!DOCTYPE html>
    • この文書がHTML5というルールに従って書かれていることを、ブラウザに伝えるための宣言です。HTMLファイルの最初に必ず記述します。
    • html の後にバージョンの指定がなければ、 HTML5 のことを指します。
  • <html lang="ja"> ～ </html>
    • <!DOCTYPE html>を除いた、HTML文書のすべての要素を囲む、大元となるタグです。
    • lang="ja" は、このWebページが日本語で記述されていることをブラウザや検索エンジンに伝えます。これにより、翻訳機能や音声読み上げ機能が正しく動作する助けになります。
  • <head> ～ </head>
    • そのページの 設定情報（メタ情報） を記述する部分です。
    • ここに書かれた内容は、ページのタイトルや文字コードの設定など、ブラウザや検索エンジンが内部的に利用する情報が中心となり、基本的に Webページ上には表示されません 。
  • <body> ～ </body>
    • ユーザーが実際に目にする、 Webページの本体（コンテンツ） を記述する部分です。
    • 見出し、文章、画像など、画面に表示させたい内容はすべてこのタグの間に記述します。

<head>内で使用する基本なタグの例

<head>タグの中には、Webページを正しく機能させるための重要な設定を記述します。

  • <meta charset="UTF-8">
    • 文字コードを指定するタグです。文字コードとは、コンピュータが文字を認識するためのルールのことです。
    • 日本語を含むWebページでは、文字が正しく表示されず意味不明な記号になる「文字化け」を防ぐため、世界中の多くの言語に対応している UTF-8 を指定するのが一般的です。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • レスポンシブ対応のためのタグです。レスポンシブ対応とは、PC、スマートフォン、タブレットなど、異なる画面サイズのデバイスで表示を最適化することです。
    • この記述により、ページの表示幅をデバイスの画面幅に合わせるなど、各デバイスで見やすい表示に自動調整されるようになります。
  • <title>ページタイトル</title>
    • ページのタイトルを指定するタグです。
    • ここに設定したテキストは、ブラウザのタブやウィンドウの上部、ブックマークした際の名称、そしてGoogleなどの検索エンジンで検索した際の結果一覧に表示されます。

<body>内で使用する基本なタグの例

<body>タグの中には、Webページに表示したいコンテンツを、意味に合ったタグを使って記述していきます。

  • <h1>〜<h6>
    • ページの見出しを示すタグです。<h1>が最も重要な大見出しで、<h2>, <h3>と数字が大きくなるにつれて、見出しの階層が下がっていきます。
  • <p>
    • 段落を示すタグです。「Paragraph」の略で、ひとまとまりの文章をこのタグで囲みます。
  • <ul>, <ol>, <li>
    • リスト（箇条書き）を作るためのタグです。
    • <ul>は順序のないリスト（行頭に点が付く）、<ol>は順序のあるリスト（行頭に数字が付く）を作成します。<li>はそれぞれのリストの項目を示します。
  • <br>
    • 改行を行うタグです。段落を変えるのではなく、文の途中で強制的に改行を入れたい場合などに使用します。
  • <img>
    • 画像を表示するタグです。src属性で画像ファイルの場所を指定します。
  • <a>
    • リンクを作成するタグです。href属性でリンク先のURLを指定することで、他のWebページへ移動させることができます。

おわりに

今回は、Webページ制作の土台となるHTMLの基本構造について学びました。すべてのHTMLファイルは<!DOCTYPE html>という宣言から始まり、<html>タグの中にページ設定を記述する<head>と、画面に表示される内容を記述する<body>を配置するのが基本ルールです。この骨組みを理解することが、Webページを正しく構築するための第一歩となります。

【HTML/CSS】HTMLの基本構造を学ぼう | いっしー@Webエンジニア