【保存版】HTML基本構造・タグ完全ガイド｜初学者が知るべき基礎知識を凝縮

HTMLとは何か？
タグの基本ルール
HTMLの全体構造（テンプレート）
よく使う重要タグ一覧
表（テーブル）の作り方
入力フォーム関連
実装時の注意点（セマンティックHTML）
ステップアップのためのメモ

HTMLとは何か？

**HTML（HyperText Markup Language）**は、Webページの「骨組み」を作るための言語です。

私たちが普段見ているWebサイトの文章、見出し、画像などはすべてHTMLによって「これは見出しである」「これはリンクである」と定義されています。

タグの基本ルール

HTMLは、要素をタグで囲むことで意味を付けます。

開始タグと終了タグ: 基本は <タグ名>中身</タグ名> の形で書きます。
要素（Element）: 開始タグから終了タグまでのひとまとまりのこと。
属性（Attribute）: タグに詳細な情報を加えるもの。 <a href="URL"> の href など。

HTMLの全体構造（テンプレート）

どんなWebページも、まずはこの構造から始まります。

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>

よく使う重要タグ一覧

① テキスト関連

タグ	名称	使い方・備考
`<h1>`〜`<h6>`	見出し	`h1`が最大で最重要。順番を守って使うのがルール。
`<p>`	段落	文章のひとまとまり（Paragraph）。
`<br>`	改行	終了タグが不要な「空要素」。
`<strong>`	強調	文字を太字にし、重要であることを示す。

② リスト（箇条書き）

HTML

<ul> <li>項目1</li>
    <li>項目2</li>
</ul>

<ol> <li>手順1</li>
    <li>手順2</li>
</ol>

③ リンクと画像

リンク (<a>): href属性で飛び先を指定。HTML<a href="https://example.com" target="_blank">別タブで開くリンク</a>
画像 (<img>): srcで画像パス、altで画像の説明（必須）を指定。HTML<img src="logo.png" alt="サイトのロゴ">

④ コンテナ（グループ化）

デザインを整えるために、要素をまとめる箱として使います。

<div>: ブロックとしてまとめる（改行される）。
<span>: 文章の一部などインラインでまとめる（改行されない）。

表（テーブル）の作り方

HTML

<table>
    <tr> <th>見出し</th> <td>データ</td> </tr>
</table>

入力フォーム関連

ユーザーからの入力を受け付けるためのエリアです。

HTML

<form>
    <label for="name">名前：</label>
    <input type="text" id="name" placeholder="例：山田太郎">
    
    <button type="submit">送信</button>
</form>

実装時の注意点（セマンティックHTML）

単に見た目を作るだけでなく、**「意味の正しいタグ」**を使うことが重要です（SEO対策やアクセシビリティに直結します）。

以前はすべて <div> で囲っていましたが、現在は以下のタグで役割を分担します。
- <header>: ページ上部のナビゲーションなど
- <main>: ページのメインコンテンツ
- <footer>: ページ下部のコピーライトなど
- <article>: 独立した記事内容

ステップアップのためのメモ

CSSとの連携: class="box" のようにクラス名をつけ、CSSで見た目を飾る。
検証ツールの活用: ブラウザ（Chromeなど）で右クリック→「検証」を押すと、実際のサイトのHTML構造が見られます。

ついに自分の実験場（Sandbox）である「TN Sandbox」を立ち上げました。記念すべき最初の投稿は、Web制作の基本中の基本であり、自分自身の開発の「型」となるHTMLの超基本タグを厳選してまとめます。自分の実験場（Sandbox）である「TN Sandbox」の最初の記録として、Web制作の土台となるHTMLの基本タグをまとめます。

「なんとなく」で使ってしまいがちなタグですが、意味を正しく理解して使う（セマンティックなコーディング）ことが、SEO（検索エンジン最適化）やメンテナンス性の向上に繋がります。

この「TN Sandbox」では、こうした技術的な備忘録や、新しいデザインの試作ログを積み上げていく予定です。

まずは「型」を覚えるところから。一歩ずつ、この砂場で遊んでいこうと思います。

関連記事 [CSSデザイン・レイアウトガイド]