Resources

1.HTMLの基本構造とタグ

  • HTML

HTML（HyperText Markup Language）は、ウェブページを作成するための標準的なマークアップ言語です。ウェブページの内容を構造化し、ブラウザにどのように表示するかを指示します。HTMLを使うことで、テキスト、画像、リンク、フォームなどのコンテンツをウェブページに配置できます。

HTMLの定義と役割

HTMLは「マークアップ言語」と呼ばれるもので、特別なタグを使って文書の構造を記述します。HTMLはコンテンツの意味を明示的に指定する役割を果たし、ブラウザがその内容を適切に解釈して表示することができます。HTMLを使うことで、ページの構造（見出し、段落、リスト、リンクなど）を定義できます。

HTMLはウェブの基盤となる技術であり、CSS（スタイルシート）やJavaScript（動的な動きやインタラクション）と組み合わせて、よりリッチで魅力的なウェブ体験を作り出します。

基本的なHTML文書の構造

HTML文書は、特定の基本的な構造に従っています。すべてのHTMLページは、次のような基本的な要素で構成されています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>
  </head>
  <body>
    <!-- ページの内容がここに入ります -->
  </body>
</html>
  1. <!DOCTYPE html>: これは「文書型宣言（ドキュメントタイプ宣言）」です。HTML5文書であることをブラウザに知らせます。この宣言は、ブラウザがHTML5のルールに従って文書をレンダリングするために必要です。
  2. <html>: HTML文書の開始タグです。このタグ内に、文書全体の内容が入ります。lang="ja"属性は、ページの言語が日本語であることを示しています。
  3. <head>: HTML文書のメタ情報（文書のタイトルや文字エンコーディングなど）を記述する部分です。この部分にはブラウザに表示されない情報が含まれます。
    • <meta charset="UTF-8">: このタグは、HTML文書の文字エンコーディングを指定します。UTF-8は、ほとんどの言語をサポートする標準的なエンコーディングです。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: モバイルデバイスでの表示に対応するための設定です。画面の幅をデバイスの幅に合わせ、初期のズームスケールを1に設定します。
    • <title>: ブラウザのタブに表示されるページのタイトルを設定します。
  4. <body>: 実際のコンテンツ（テキスト、画像、リンクなど）を含む部分です。この部分に記述された内容がウェブページとして表示されます。

HTMLの基本タグ

HTMLにはさまざまなタグがありますが、まず覚えておきたい基本的なタグをいくつか紹介します。

  • <html>: HTML文書全体を囲むタグです。必須です。
  • <head>: 文書のメタ情報を含むタグです。
  • <title>: ブラウザタブに表示されるページタイトルを定義するタグです。
  • <body>: 実際のページの内容を含むタグです。
  • <h1>〜<h6>: 見出しタグです。<h1>は最も重要な見出し、<h6>は最も小さな見出しを意味します。
  • <p>: 段落を作成するタグです。
  • <a>: ハイパーリンクを作成するタグです。リンク先のURLを指定するhref属性を使います。
  • <img>: 画像を埋め込むタグです。src属性で画像ファイルのパスを指定します。

まとめ

HTMLはウェブページの構造を決定する基本的な言語です。これからウェブデザインやウェブ開発を学ぶには、まずHTMLの基本的な構造やタグを理解することが重要です。これを踏まえて、次のステップとしてCSSやJavaScriptを組み合わせて、さらに高度なウェブページを作成することができます。