学習ガイド

HTMLの基礎知識

ウェブ制作の第一歩を、基礎からしっかりと理解しよう

目次

  • HTMLとは何か？
  • HTMLの基本構造
  • タグと属性の役割
  • セマンティックなマークアップの重要性
  • まとめ

HTMLとは？Webの「骨」を作る言語

家を建てる時、最初に柱や梁（はり）を組んで骨組みを作るように、Webページを作る時もまずはHTMLで構造を作ります。HTML (HyperText Markup Language) は、ページ内のテキストに「これは見出し」「これは段落」「これは画像」といった意味（マークアップ）を与えるための言語です。

1. HTML文書の基本構造

すべてのHTMLファイルは、以下の決まった形式で始まります。この型（テンプレート）を覚えることが第一歩です。

HTML 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>こんにちは、世界！</h1>
    <p>はじめてのWebページです。</p>
  </body>
</html>
  • <!DOCTYPE html>: 「これはHTML5の文書です」という宣言。
  • <head>: ブラウザや検索エンジンに向けた設定情報（メタデータ）を書く場所。画面には表示されません。
  • <body>: 私たちがブラウザ画面で見ている内容（文章、画像、リンクなど）を書く場所。

2. タグと要素、属性

HTlLは `<タグ名>` で囲むことで記述します。開始タグと終了タグで挟まれた全体を「要素（Element）」と呼びます。

<a href="https://example.com" class="link">リンクはこちら</a>
  • 属性 (Attribute): タグに追加情報を与えます。`href`（リンク先）や `src`（画像の場所）、`class`（CSS用の名前）などがあります。
  • 空要素: `` や `
    ` のように、中身を持たず終了タグが不要なタグもあります。

3. ブロックレベルとインライン

HTML要素には大きく分けて2つの種類の表示ルールがあります。

📦 ブロックレベル要素

画面の横幅いっぱいに広がり、前後に改行が入る要素です。積み木のように縦に積まれていきます。
例: `

`, `

`, `

`, `

    `

    🔤 インライン要素

    文章の一部として扱われ、横に並んでいきます。幅や高さの指定は基本的にできません。
    例: ``, ``, ``, ``

4. セマンティックHTMLの重要性

ただ見た目が整っていれば良いわけではありません。「意味（セマンティクス）」を持った適切なタグを使うことが、現代のWeb制作では求められます。

  • SEO効果: Googleなどの検索エンジンは、`

    ` や `
    ` といったタグを見て、ページの構成や重要なキーワードを理解します。

  • アクセシビリティ: 視覚障害のある方が使うスクリーンリーダー（読み上げソフト）は、正しいタグ付けを頼りに情報を伝えます。

例えば、単に文字を太くしたいだけで `` を使うのではなく、重要性を強調する `` を使う、といった使い分けがプロの技です。

まとめ

HTMLはシンプルですが、奥が深い言語です。「正しく意味のあるマークアップ」を心がけることで、検索エンジンにもユーザーにも優しい、高品質なWebサイトを作ることができます。