ツール一覧

ツール一覧へ →
📝

HTML基礎

1〜2週間 入門

見出し、段落、リスト、リンク。1タグずつ丁寧に学ぶ。

概要

これは何？

HTMLはWebページの骨組みを作る言語です。見出し、段落、リスト、リンクなど、文章に意味を持たせて構造化します。タグ（<h1> など）で囲むことで「これは見出し」「これは段落」とブラウザに伝えます。

なぜ重要？

HTMLがなければWebページは作れません。すべてのWebサイトの土台です。まずは基本のタグを1つずつ押さえましょう。

何を学ぶか
  • 見出し（h1〜h6）の使い方と意味
  • 段落（p）の書き方
  • リスト（ul, ol, li）の構造
  • リンク（a）と画像（img）
  • strong, em, div, span の使い分け

詳細解説

HTMLタグの基本構造

HTMLは「タグ」で要素を囲みます。開始タグ <h1> と終了タグ </h1> の間にテキストを書きます。例: <h1>タイトル</h1>。タグ名は小文字が推奨。 < と > は必ず半角です。

例:
  • <h1>見出し</h1>
  • <p>段落のテキスト</p>
  • 間違い: ＜h1＞見出し＜/h1＞（全角）
Tips:
  • 開始タグと終了タグをセットで
  • 入れ子は閉じる順序を守る（先に開いたものを後に閉じる）
よくある間違い:
  • </h1> を忘れる
  • 全角の＜＞を使う
  • タグ名を大文字で書く（動くが非推奨）

見出し（h1〜h6）

見出しは文章の構造を表します。h1が最も大きく、h6が最も小さい。h1はページのメインタイトルで、1ページに1つが推奨。h2は大見出し、h3は小見出し…と階層を作ります。

例:
  • <h1>私のページ</h1>
  • <h2>自己紹介</h2>
  • <h3>趣味</h3>
Tips:
  • 階層を飛ばさない（h1の次にh3は避ける）
  • 見た目より意味を優先
よくある間違い:
  • h1を複数使う → SEOに不利
  • 見出しを装飾目的で使う

段落（p）

pタグは段落（paragraph）を表します。文章の1ブロックを意味づけます。開始タグ<p>と終了タグ</p>でテキストを囲みます。例: <p>これは1つの段落です。</p>。複数の段落はpタグを複数使います。

例:
  • <p>はじめてのWebページです。</p>
  • <p>段落1</p><p>段落2</p>
Tips:
  • 見出しの下に段落を置くと読みやすい
  • 改行したいだけならbrよりpを複数使う
よくある間違い:
  • pの中にpを入れる → 不正なHTML
  • pを忘れてテキストだけ書く

リスト（ul, ol, li）

ulは順序なしリスト（箇条書き）、olは順序付きリスト（番号付き）。liが各項目です。ulやolの直下にはliだけを置きます。liは必ずulかolの中に書きます。

例:
  • <ul><li>りんご</li><li>みかん</li></ul>
  • <ol><li>手順1</li><li>手順2</li></ol>
Tips:
  • ulの直下にli以外を置かない
  • olは手順・ランキングに
よくある間違い:
  • ulの直下にli以外を置く
  • liをul/olの外に書く

リンク（a）

aタグでリンクを作ります。href属性に飛び先のURL、タグの間のテキストが表示されます。例: <a href="https://example.com">例のサイト</a>。hrefは必須です。

例:
  • <a href="/about">会社概要</a>
  • <a href="https://google.com">Google</a>
Tips:
  • 外部リンクは target="_blank" rel="noopener" を付けると新しいタブで開く
よくある間違い:
  • hrefを忘れる
  • URLの引用符を忘れる

画像（img）

imgタグで画像を表示します。src属性に画像のURL、alt属性に説明（必須）を書きます。自己閉じタグなので</img>は不要。例: <img src="photo.jpg" alt="説明">

例:
  • <img src="https://example.com/img.png" alt="サンプル画像">
Tips:
  • altはスクリーンリーダー用。画像が表示されないときも表示される
よくある間違い:
  • altを省略
  • srcのURLを間違える

strong, em, div, span

strongは強い強調（太字）、emは軽い強調（斜体）。divはブロック要素（縦に積む）、spanはインライン（横に並ぶ）。divとspanは意味がなく、グループ化・装飾用です。

例:
  • <p>これは<strong>重要</strong>です。</p>
  • <div>ブロック1</div><div>ブロック2</div>
  • <p>これは<span>赤い文字</span>です。</p>
Tips:
  • strong/emは意味を持つ。b/iは見た目だけなので避ける
よくある間違い:
  • divとspanの使い分けを間違える

テーブル（table）

表形式のデータを作るためのタグです。tableで全体を囲み、tr（行）、th（見出しセル）、td（データセル）を組み合わせて作ります。

例:
  • <table>\n <tr>\n <th>見出し</th>\n </tr>\n <tr>\n <td>データ</td>\n </tr>\n</table>
Tips:
  • レイアウト目的にはTableを使わない
よくある間違い:
  • trの中に直接テキストを書く → 必ずthかtdに入れる

セマンティックタグ

header（ヘッダー）、main（主要コンテンツ）、footer（フッター）、nav（ナビゲーション）、article（独立した記事）、section（意味のある区切り）など、「要素の意味」を表すタグです。SEOやアクセシビリティに役立ちます。

例:
  • <article>\n <section>第1章</section>\n</article>
Tips:
  • divの代わりに適切なタグがないか考える
よくある間違い:
  • 全部divで作る（divスープ）

フォームの基本

ユーザーからの入力を受け取る仕組みです。formで全体を囲み、input（1行入力）、textarea（複数行）、select（選択肢）などを置きます。

例:
  • <form>\n <input type="text" name="username">\n <button type="submit">送信</button>\n</form>
Tips:
  • name属性がないとデータが送信されない
よくある間違い:
  • formタグを忘れてinputだけ書く

ラベルとチェックボックス

labelタグをinput要素と紐づけると、文字をクリックしてもチェックできるようになります。forとidの値を一致させます。

例:
  • <label for="agree">同意する</label>\n<input type="checkbox" id="agree" name="agree">
Tips:
  • labelでinputを囲む（<label><input> 同意</label>）方法でも紐づく
よくある間違い:
  • forとidを書き忘れる

カスタムデータ属性

data-で始まる独自の属性を付けて、要素にデータを持たせることができます。JavaScriptから簡単に取得・操作できます。

例:
  • <div data-id="123" data-status="active">ユーザー</div>
Tips:
  • 見た目に関係ないデータを持たせるのに便利
よくある間違い:
  • 標準の属性（idやclass）で無理やりデータを持たせようとする

実践手順

  1. 1
    h1タグを書く 2分

    見出しを1つ書いてみます。

    • <h1>こんにちは</h1> と入力
    • 実行してプレビューを確認
    
                          <h1>こんにちは</h1>
  2. 2
    pタグで段落を追加 2分

    見出しの下に段落を追加します。

    • <h1>タイトル</h1> の下に <p>段落です。</p> を追加
    • 実行して確認
    
                          <h1>タイトル</h1>
<p>段落です。</p>
  3. 3
    ulとliでリストを作る 3分

    箇条書きリストを作ります。

    • <ul> と </ul> で囲む
    • その中に <li>項目1</li> などを書く
    
                          <ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>

よくある質問

いちいちarticleとかsectionとか書くのダルい。全部divじゃダメ？
見た目的には全く問題ない（全部divで作るのをdivスープって言います）んだけど、Googleの検索ロボットとか、画面読み上げソフトからすると「どこが本文でドコがオマケなの！？」ってブチギレ案件になります。SEO（検索順位）下げたくないなら地道に書いた方がいいかも。
<button> と <a>（リンク）ってパッと見同じだけど、どっち使うの？
「別のURLのページに飛ぶ」なら<a>、「画面の中でポチッとアクション起こす（送信とか開くとか）」なら<button>の一択です！これ混同してると、キーボード操作でタブ移動してるユーザーが発狂するUIが爆誕します。
<img> の一番最後に「/」って書くべき？（<img />みたいな）
HTML5的にはどっちでもOKなんだけど、後々Reactとか（JSX）やり始めると、この「/」がないだけで一生エラー吐き続けて泣くハメになるんで、今のうちからスラッシュ付けて閉じる癖つけとくのがおすすめです！
h1要素ってページに1個だけじゃないとダメなの？
昔は「sectionごとになら何個でもいけるべ！」って仕様だったんだけど、結局ブラウザが全然対応してくれなくて「やっぱりページに1個で、あとは順番にh2、h3って使ってね…」って方針に戻った歴史があります。素直に1個にしときましょう。

① 解説を読んだ。次は② 演習する。

HTMLの基本を押さえました。

次はCSSで見た目を整えましょう。色、余白、フォントを学びます。

② 演習する（12問）
関連ツール: HTMLエスケープ

🛠️ おすすめの開発ツール

画像圧縮・WebP変換

完全ローカル処理で安全に画像を軽量化。最高画質のまま高速化できます。

JSON整形・バリデーター

1行のJSONを読みやすく整形。構文エラーもその場でチェック可能。

JWTデコード・検証

トークンの中身を一瞬で解析。有効期限やクレームの確認に。