HTMLの構造ってどんな感じ？

HTMLの構造ってどんな感じ？

HTMLの構造ってどんな感じ？のアイキャッチ
記事公開日 2024/06/07
関連タグHTML初心者向け

HTMLの構造

HTMLドキュメントは、以下の基本的な構造を持っています。

<!DOCTYPE html>
<html>
  <head>
    <!-- メタデータ -->
  </head>
  <body>
    <!-- ページの内容 -->
  </body>
</html>

この構造は、大きく分けて以下の要素で構成されています。

  1. <!DOCTYPE html>
    • DOCTYPE宣言といいます。HTML文書の先頭に記述する宣言です。
    • HTML Living Standardでは、このDOCTYPE宣言の指定が必須となります。
  2. <html>要素
    • HTMLドキュメントのルート要素です。一番外のネストのタグになります。
    • <head>要素と<body>要素を含みます。
  3. <head>要素
    • HTMLドキュメントのメタデータを含む要素です。
    • ページのタイトル、文字エンコーディング、ビューポートの設定、説明文などを記述します。
  4. <body>要素
    • HTMLドキュメントの本文を含む要素です。
    • ページの見出し、段落、画像、リンクなどの内容を記述します。

これらの要素が適切に組み合わされることで、Webブラウザが解釈可能なHTMLドキュメントが構成されます。

html要素

<html>要素は、HTMLドキュメントのルート要素であり、<head>要素と<body>要素を含みます。この要素は、HTMLドキュメントの始まりと終わりを示すために使用されます。

<html lang="ja">
  <!-- head要素とbody要素 -->
</html>

lang属性を使用することで、ドキュメントの主要な言語を指定できます。この情報はスクリーンリーダーなどの支援技術にとって有用であり、アクセシビリティの向上に役立ちます。

head要素

<head>要素は、HTMLドキュメントのメタデータを含む要素です。メタデータとは、ページ自体には表示されませんが、ブラウザや検索エンジンなどが利用する情報のことを指します。

メタデータ

<head>要素内で使用される主なメタデータは以下の通りです。

charset（文字コード）

charsetは、HTMLドキュメントの文字エンコーディングを指定するために使用されます。文字エンコーディングとは、文字をコンピュータで処理するために数値に変換する方式のことです。

<meta charset="UTF-8">

上記の例では、文字エンコーディングとしてUTF-8を指定しています。UTF-8は、現在最も広く使用されている文字エンコーディングであり、多言語対応に適しています。

viewport（ビューポート）

viewportは、モバイルデバイスでのページの表示方法を制御するために使用されます。ビューポートとは、ページが表示される領域のことを指します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

上記の例では、ビューポートの幅をデバイスの幅に設定し、初期倍率を1.0に設定しています。これにより、モバイルデバイスでページが適切に表示されるようになります。

title（タイトル）

<title>要素は、ページのタイトルを指定するために使用されます。タイトルは、ブラウザのタイトルバーやタブに表示されます。

<title>HTMLの構造 - わかりやすい説明</title>

タイトルは、ページの内容を簡潔に表現するものであり、検索エンジンの検索結果にも表示されるため、SEOの観点からも重要です。 SEOは検索エンジンの検索結果で上位表示させるために最適化することを指します。検索エンジンに理解しやすいページが上位表示されやすいと言われています。

description（説明）

descriptionメタデータは、ページの概要や説明文を指定するために使用されます。この情報は、検索エンジンの検索結果に表示されることがあります。

<meta name="description" content="HTMLの構造についてわかりやすく説明します。html要素、head要素、body要素の役割や、head要素内のメタデータについて詳しく解説します。">

説明文は、ページの内容を簡潔に要約したものであり、検索エンジンユーザーがページの内容を理解するのに役立ちます。

body要素

<body>要素は、HTMLドキュメントの本文を含む要素です。ページの見出し、段落、画像、リンクなどの内容を記述します。

<body>
  <h1>HTMLの構造</h1>
  <p>HTMLドキュメントは、以下の基本的な構造を持っています。</p>
  <ul>
    <li>html要素</li>
    <li>head要素</li>
    <li>body要素</li>
  </ul>
  <img src="html-structure.webp" alt="HTMLの構造">
  <p>詳しくは、<a href="https://www.example.com/html-structure">こちらの記事</a>をご覧ください。</p>
</body>

<body>要素内では、見出しタグ（<h1>〜<h6>）、段落タグ（<p>）、リストタグ（<ul>、<ol>、<li>）などを使用して、コンテンツを構造化します。また、<img>タグを使って画像を挿入したり、<a>タグを使ってリンクを作成したりすることもできます。

練習問題

HTMLドキュメントの文字エンコーディングを指定するために使用するメタデータは？
1.charset
2.viewport
3.<title>HTMLの構造</title>
4.description
ページのタイトルを指定するために使用する要素は？
1.<head>
2.<body>
3.<title>
4.<meta>
以下のうち、<body>要素内で使用されるタグは？
1.<title>
2.<meta>
3.<link>
4.<img>

まとめ

本記事では、HTMLの構造について詳しく学びました。HTMLドキュメントは、html要素、head要素、body要素で構成されており、それぞれが重要な役割を果たしています。特に、head要素内のメタデータについては、charset、viewport、title、descriptionなど、詳細に説明しました。以下のポイントを押さえておきましょう。

  • <!DOCTYPE html>は、HTMLドキュメントの型を宣言するための特別な要素
  • <html>要素は、HTMLドキュメントのルート要素であり、<head>要素と<body>要素を含む
  • <head>要素は、HTMLドキュメントのメタデータを含む要素
  • charsetは、HTMLドキュメントの文字エンコーディングを指定する
  • viewportは、モバイルデバイスでのページの表示方法を制御する
  • <title>要素は、ページのタイトルを指定する
  • descriptionは、ページの概要や説明文を指定する
  • <body>要素は、HTMLドキュメントの本文を含む要素
  • <body>要素内では、見出しタグ、段落タグ、リストタグ、画像タグ、リンクタグなどを使ってコンテンツを構造化する

補足　－　文字コードと文字化け

文字コードはコンピューターが文字を認識し、処理するために使用する番号のことです。

コンピューターは文字を直接理解することができません。そこで、各文字に固有の番号を割り当て、その番号を手がかりに文字を処理しています。この番号と文字の対応表が文字コードです。

文字コードには様々な種類があります。ASCII（アスキー）やShift_JISやEUC-JP、UTF-8などがあります。

ここで、保存するときの文字コードと開くときの文字コードが異なってしまったときのことを考えます。

例えば「ああ」のUTF-8の文字コードはE3 81 82 E3 81 82です。

このE3 81 82 E3 81 82をShift_JISで開こうとすると、E3 81は「縺」82 E3は「ゅ」81 82は「≠」のように文字の割り当てが変わってしまい、本来「ああ」と表示されるべき文字が「縺ゅ≠」と表示されてしまいます。これを文字化けといいます。

現在一般的に使われている文字コードはUTF-8という文字コードです。UTF-8は、世界中のほとんどすべての言語・文字を扱うことができる上、異なるシステム間での互換性も優れています。

プログラミングやWebデザインを行う際は、文字コードを正しく指定することが重要です。HTMLでは<meta>タグを使って文字コードを指定し、プログラミング言語ではソースコードの先頭に文字コードを指定するコメントを記述します。テキストエディタで文書を作成する際にも、文字コードを選択して保存しましょう。