はじめに
Webサイト制作やフロントエンド開発を始めると、必ず最初に触れるのが HTML（HyperText Markup Language） です。
HTMLはプログラミング言語ではなく、「Webページの構造を定義するためのマークアップ言語」です。
本記事では、HTML入門として以下を目的に解説します。
- HTMLとは何かを理解する
- 基本構造と主要タグを覚える
- 実際に手を動かすハンズオンでHTMLを書けるようになる
完全初心者でも理解できる内容になっています。
HTMLとは何か？
HTMLは、Webブラウザに対して
「ここは見出し」「ここは本文」「ここはリンク」
といった文書構造の意味を伝えるための言語です。
HTMLでできること
- 文章構造の定義（見出し・段落）
- 画像・リンクの表示
- フォームの作成（入力欄・ボタン）
- 他の技術（CSS・JavaScript）との連携
HTML単体では見た目の装飾や動的処理は行いません。
| 技術 | 役割 |
|---|---|
| HTML | 構造 |
| CSS | 見た目 |
| JavaScript | 動き |
HTMLの基本構造
HTMLファイルは、決まった構造を持っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML入門</title>
</head>
<body>
<h1>Hello HTML</h1>
<p>これはHTMLのサンプルです。</p>
</body>
</html>
各要素の役割
<!DOCTYPE html>
→ HTML5で書かれていることを宣言<html>
→ HTML文書全体<head>
→ ページの設定情報（タイトル・文字コードなど）<body>
→ 実際に画面に表示される内容
HTMLタグの基本ルール
HTMLは タグ を使って記述します。
<p>これは段落です</p>
<p>：開始タグ</p>：終了タグ- タグで囲まれた部分が要素（element）
属性（attribute）
タグには属性を指定できます。
<a href="https://example.com">リンク</a>
hrefが属性- 値は
"で囲む
よく使うHTMLタグ一覧
見出しタグ（SEOでも重要）
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
※ h1 は1ページに1つが基本
段落・改行
<p>文章を書く</p>
<br>
リンク
<a href="https://example.com">公式サイト</a>
画像
<img src="sample.jpg" alt="サンプル画像">
alt属性は SEO・アクセシビリティ で重要
リスト
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
【ハンズオン】HTMLでWebページを作ってみよう
ステップ1：HTMLファイルを作成
- 任意のフォルダを作成
index.htmlというファイルを作る- エディタ（VS Codeなど）で開く
ステップ2：基本構造を書く
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML入門ハンズオン</title>
</head>
<body>
</body>
</html>
ステップ3：コンテンツを追加
<body>
<h1>HTML入門</h1>
<p>このページはHTMLの練習用です。</p>
<h2>学習内容</h2>
<ul>
<li>HTMLの基本</li>
<li>タグの使い方</li>
<li>簡単なページ作成</li>
</ul>
<p>
参考サイト：
<a href="https://developer.mozilla.org/ja/">MDN Web Docs</a>
</p>
</body>
ステップ4：ブラウザで表示
index.htmlをダブルクリック- ブラウザで表示されれば成功 🎉
SEOを意識したHTMLのポイント
1. 見出しタグを正しく使う
h1 → h2 → h3の順序を守る- 見出しに 検索キーワード を自然に含める
2. titleタグは必ず設定
<title>HTML入門｜初心者向けハンズオン解説</title>
3. alt属性を省略しない
<img src="html.png" alt="HTML入門のイメージ">
よくある初心者のつまずきポイント
- タグの閉じ忘れ
- 全角文字の混入
- ファイル拡張子が
.htmlになっていない - 文字化け（
charset="UTF-8"忘れ）
まとめ
本記事では、HTML入門として以下を解説しました。
- HTMLの役割と基本概念
- HTMLの基本構造とタグ
- 実際に作るハンズオン
- SEOを意識した書き方
HTMLは すべてのWeb技術の土台 です。
コメントを残す