HTML | Seek Rise https://seek-rise.com Mon, 15 Dec 2025 08:22:02 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://seek-rise.com/wp-content/uploads/2019/10/cropped-favicon-32x32.png HTML | Seek Rise https://seek-rise.com 32 32 167377966 3-2 HTMLの基本構造と必須タグを理解しよう https://seek-rise.com/web-development/html/post-302/ https://seek-rise.com/web-development/html/post-302/#respond Mon, 15 Dec 2025 01:11:40 +0000 https://seek-rise.com/?p=302 前の記事では、HTMLが
Webページの構造を作るための言語であることを学びました。

ここでは、実際にHTMLを書くために必要な
基本構造と、必ず使うタグを整理していきます。

この内容は、CSS・JavaScript・PHPすべての土台になります。
細かく暗記する必要はありませんが、
「こういう形がある」という理解を持つことが重要です。

HTMLの基本構造を理解する

HTMLには、必ず守るべき基本構造があります。

最小構成のHTMLは、次のような形です。

・DOCTYPE宣言
・htmlタグ
・headタグ
・bodyタグ

これらが揃って、1つのHTMLページになります。

※ 実際のHTMLファイルでは、タグの < > をそのまま使用します

HTML文書の全体像

HTMLファイルは、次のような構造になっています。

・文書の種類を宣言
・HTML全体を囲む
・画面に表示されない情報
・画面に表示される内容

この「役割分担」を理解することが大切です。

DOCTYPE宣言とは

DOCTYPE宣言は、

「このHTMLはHTML5で書かれています」

とブラウザに伝えるための宣言です。

これがないと、
ブラウザが古い仕様で解釈してしまうことがあります。

htmlタグの役割

htmlタグは、
HTML文書全体を囲むためのタグです。

この中に、
head と body が入ります。

headタグの役割

headタグには、
画面には直接表示されない情報を書きます。

主な内容は次のとおりです。

・文字コードの指定
・ページタイトル
・CSSやJavaScriptの読み込み

headは、
「ページの設定を書く場所」
と考えると分かりやすいです。

bodyタグの役割

bodyタグの中に書いた内容が、
実際にブラウザに表示されます。

見出し、文章、画像、リンクなど、
ユーザーが目にするものは、すべて body の中です。

見出しタグ（h1〜h6）

見出しを表すタグが、h1〜h6です。

・h1：ページ全体の見出し
・h2：章の見出し
・h3：節の見出し

数字が小さいほど重要度が高くなります。
サイズ目的で使うのではなく、
意味の階層として使うことが重要です。

段落タグ（p）

文章を書くときは、pタグを使います。

段落ごとに意味のあるまとまりを作ることで、
読みやすく、構造の分かりやすいHTMLになります。

リンクタグ（a）

リンクを作るときは、aタグを使います。

リンク先のURLは、
href属性で指定します。

画像タグ（img）

画像を表示するには、imgタグを使います。

画像には、
必ず説明文（alt）を付ける
という点を覚えておきましょう。

これは、SEOやアクセシビリティの面でも重要です。

divタグとは何か

divタグは、
意味を持たない汎用的な箱です。

複数の要素をまとめたり、
CSSでレイアウトを指定するために使われます。

HTMLを書くときの考え方

HTMLを書くときは、
次の点を意識してください。

・見た目ではなく意味でタグを選ぶ
・正しい構造を作る
・後からCSSやJavaScriptで扱いやすくする

HTMLは、
Webページの「設計図」のような存在です。

よくある間違い

初心者がつまずきやすいポイントです。

・タグの閉じ忘れ
・入れ子構造のミス
・全角文字の使用
・拡張子が .html になっていない

表示がおかしい場合は、
まずこのあたりを確認しましょう。

まとめ

HTMLの基本構造と必須タグは、
Web開発のすべての土台です。

・決まった構造がある
・タグには役割がある
・正しいHTMLが後の学習を楽にする

次は、
HTML属性（class・idなど）の役割
について学んでいきます。

次に読むべき記事

▶ 次の記事
3-3 HTML属性とは？class・id・nameの違い

]]> https://seek-rise.com/web-development/html/post-302/feed/ 0 302 3-1 HTMLとは何か｜Webページの構造を作る言語 https://seek-rise.com/web-development/html/post-264/ https://seek-rise.com/web-development/html/post-264/#respond Sun, 14 Dec 2025 18:03:12 +0000 https://seek-rise.com/?p=264 Webページを作るうえで、最初に学ぶべき言語が HTML です。
CSSやJavaScript、PHPといった技術はすべて、HTMLを土台として成り立っています。

・HTMLは何をするためのものなのか
・なぜ最初にHTMLを学ぶ必要があるのか
・CSSやJavaScriptとは何が違うのか

これを曖昧なまま進むと、
「何となく動くけど、よく分からない」状態になりやすくなります。

この記事では、
HTMLの役割と考え方を、実際のコードを交えながら初心者向けに解説します。

この記事で学べること

・HTMLとは何か
・HTMLが担っている役割
・Webページの基本構造
・CSSやJavaScriptとの関係

HTMLとは何か

HTMLとは、
Webページの構造を定義するための言語です。

正式名称は
HyperText Markup Language
ですが、難しく考える必要はありません。

HTMLは、
「この文章は見出し」
「ここは本文」
「これはリンク」
といった 意味や構造をブラウザに伝える役割 を持っています。

なぜHTMLが必要なのか

もしHTMLがなければ、
ブラウザは
「どこが見出しで、どこが本文なのか」
を判断できません。

HTMLを使うことで、
Webページの骨組みを作り、
その上にCSSやJavaScriptを乗せていきます。

よくある例えとしては、
・HTML：骨組み
・CSS：見た目
・JavaScript：動き
という関係です。

HTMLでできること・できないこと

ここで、HTMLの役割をはっきりさせておきましょう。

HTMLでできること
・文章の構造を作る
・見出しや段落を定義する
・リンクや画像を配置する
・フォームを作る

HTMLではできないこと
・デザインを細かく整える
・画面に動きを付ける
・データを保存・処理する

これらは、
CSS・JavaScript・PHPの役割になります。

HTMLの基本構造

HTMLには、
必ず決まった基本構造があります。

最小構成のHTMLは、次のようになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>これはHTMLのサンプルです。</p>
  </body>
</html>

各部分の役割

・<!DOCTYPE html>
→ HTML5で書かれていることを宣言

・<html>
→ HTML全体の範囲

・<head>
→ ページの設定情報

・<body>
→ 実際に画面に表示される内容

最初は、
「こういう形がある」
と理解できていれば十分です。

タグとは何か

HTMLは、
タグと呼ばれる記号で構成されています。

例

<p>文章</p>

・<p>：開始タグ
・</p>：終了タグ

このように、
囲むことで意味を持たせるのがHTMLの基本です。

よく使う基本タグ

ここでは、
必ず使う基本タグだけを紹介します。

・h1〜h6：見出し
・p：段落
・a：リンク
・img：画像
・div：まとまり

詳細は、
次の記事から一つずつ解説していきます。

実際にHTMLを書いてみよう

ここで、
実際にHTMLファイルを作ってみましょう。

① ファイルを作成

ドキュメントルート（htdocs）の中に、
次のファイルを作成します。

index.html

② 中身を書く

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>はじめてのHTML</h1>
    <p>HTMLの学習を始めました。</p>
  </body>
</html>

③ ブラウザで確認

ブラウザで、
次のURLにアクセスします。

http://localhost/

文字が表示されれば成功です。

HTMLが正しく書けているか確認するコツ

初心者がつまずきやすいポイントです。

・タグの閉じ忘れ
・全角文字の混入
・ファイル拡張子が .html になっていない

エラーが出ない代わりに、
表示が崩れる形で問題が現れます。

HTMLは「正しさ」が重要

HTMLは、
見た目よりも 構造と意味 が重要です。

正しいHTMLを書くことで、
・CSSが当てやすくなる
・JavaScriptで操作しやすくなる
・検索エンジンに評価されやすくなる

というメリットがあります。

学習の進め方について

この後の記事では、
HTMLタグを一つずつ学びながら、
実際にページを組み立てていきます。

最初は、
完璧に覚えようとしなくて大丈夫です。

「こういう役割がある」
という感覚を大切にしてください。

まとめ

HTMLは、
Webページの構造を作るための最も重要な言語です。

・HTMLは骨組み
・CSSやJavaScriptの土台
・正しい構造が後の学習を楽にする

次は、
HTMLの基本構造と必須タグについて、
もう少し詳しく見ていきましょう。

次に読むべき記事

▶ 次の記事：
3-2 HTMLの基本構造と必須タグを理解しよう

▶ 関連記事：

]]> https://seek-rise.com/web-development/html/post-264/feed/ 0 264