【HTML備忘録】モダンなコーディングに欠かせない基本タグ一覧

ついに自分の実験場「TN Sandbox」を立ち上げました。最初の投稿として、Web制作の根幹であり、自分自身の開発の「型」となるHTML5の基本タグを一覧としてまとめます。

1. コンテンツの骨組み（セクション）
2. テキスト・文章の装飾
3. 実装の参考：基本構造のサンプルコード
これからの展望

1. コンテンツの骨組み（セクション）

サイトの構造をGoogleなどの検索エンジンに正しく伝えるための「セマンティック」なタグです。

<header> : サイトのロゴやナビゲーションを含む頭の部分。
<main> : ページのメインコンテンツ。1ページに1つだけ使用。
<section> : 意味のある情報のまとまり。見出し（h2など）を伴うのが基本。
<article> : 記事単体として独立して成立する内容。
<footer> : 著作権情報やサイトマップなど、ページ下部の情報。

2. テキスト・文章の装飾

読みやすさを左右する、最も頻繁に使うタグ群です。

<h1> 〜 <h6> : 見出し。数字が小さいほど重要度が高い。
<p> : 段落。文章のまとまり。
<ul> / <li> : 箇条書きリスト。
<ol> / <li> : 番号付きリスト。
<a> : 他のページへのリンク。href属性で遷移先を指定。

3. 実装の参考：基本構造のサンプルコード

「TN Sandbox」のトップページをイメージした、シンプルなHTML5の構造例です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>TN Sandbox</title>
</head>
<body>
    <header>
        <h1>TN Sandbox</h1>
    </header>
    
    <main>
        <article>
            <h2>Hello World!</h2>
            <p>ここから実験を開始します。</p>
        </article>
    </main>

    <footer>
        <p>&copy; 2026 tnsbx.com</p>
    </footer>
</body>
</html>

これからの展望

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

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