レッスン 2: HTMLの基本構造を理解しよう

この記事の概要

HTML（HyperText Markup Language）は、ウェブページの骨組みを作成するための言語です。HTMLの基本構造を理解することは、ウェブ開発の第一歩であり、全てのコンテンツやデザインの基盤となります。この記事では、HTMLの基本構造を学び、シンプルなHTMLページを作成できるようになることを目指します。

HTMLの基本構造

HTMLの基本的な構造は、以下のようにHTMLタグを使って表現されます。それぞれのタグは、特定の役割を持ち、コンテンツを整理・構造化するために使われます。

<!DOCTYPE html>
<html>
<head>
    <title>ページタイトル</title>
</head>
<body>
    <h1>見出し</h1>
    <p>これは段落です。</p>
</body>
</html>

各タグの意味

  • <!DOCTYPE html>：この文書がHTML5で書かれていることを宣言します。
  • <html>：HTML文書全体を囲むタグです。この中にページの内容を含めます。
  • <head>：ページに関するメタ情報を含む部分です。ページのタイトルやCSS、JavaScriptなどをここで指定します。
  • <title>：ブラウザのタブや検索エンジンに表示されるページのタイトルです。
  • <body>：実際に表示されるコンテンツ（見出し、段落、画像など）を含む部分です。

HTMLタグの基本ルール

  1. 開始タグと終了タグ：ほとんどのHTMLタグは、開始タグ<tag>と終了タグ</tag>で囲まれます。
  2. 入れ子構造：タグは入れ子にすることができ、他のタグの中にさらに別のタグを含めることが可能です。
  3. コメント：<!-- コメント --> の形式で、メモや注釈を追加できます。ブラウザには表示されません。

実践：基本的なHTMLページを作ってみよう

  1. HTMLファイルの作成：
    • テキストエディタを開き、上記のHTMLコードをコピーします。
    • index.htmlという名前でファイルを保存します。
  2. ブラウザで表示：
    • 作成したファイルをダブルクリックしてブラウザで開くと、シンプルなHTMLページが表示されます。

練習課題

  1. <h1>タグの下に、<h2>や<h3>の見出しを追加してみましょう。
  2. <p>タグを使って段落を増やし、文章を入れてみましょう。
  3. <title>タグの内容を変更し、ブラウザのタブに反映されることを確認しましょう。

HTMLの基本構造を理解することは、今後のWeb開発に大いに役立ちます。HTMLの骨組みをしっかりと理解し、次のステップであるCSSを使ったスタイリングに進んでいきましょう。

コメント