[{"data":1,"prerenderedAt":41},["ShallowReactive",2],{"post-html-tag-selection-tips-for-beginners":3,"distEvent":31},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":6,"revisedAt":6,"title":7,"body":8,"categories":9,"author":11,"thumbnail":23,"ogpImage":27},"html-tag-selection-tips-for-beginners","2026-07-15T10:33:19.702Z","2026-08-14T01:46:08.128Z","HTML初心者が迷いがちなタグの選び方がわかるTIPS10選","\u003Cp>HTMLを学び始めたとき、「この要素はどう使うのが正解……？」と悩んだ経験はありませんか。HTMLは気軽に始められる言語ですが、実はルールや使い方のポイントが数多く存在しています。\u003C\u002Fp>\u003Cp>私はフロントエンドエンジニアとして日々コードを書く一方で、HTMLをはじめとするウェブ技術を大学や企業で教える講師も務めてきました。その中で、なんとかHTMLを書けるようになったものの、要素の使い方や使い分けに自信が持てないという方に数多く出会ってきました。\u003C\u002Fp>\u003Cp>この記事では、そんなHTML初心者に向けてつまずきやすいポイントを10項目ピックアップしてご紹介します。HTMLを学び始めたときに陥りがちなマークアップ時の迷いを、この記事で少しでも解消していただければ幸いです。\u003C\u002Fp>\u003Ch2 id=\"h28d2cea70a\">1. div／spanタグと他のタグの違いを理解する\u003C\u002Fh2>\u003Cp>HTMLに不慣れなころ、意味を深く考えずにdivタグやspanタグを多用してしまった経験はありませんか。\u003C\u002Fp>\u003Cp>これらの要素は汎用性が高く便利ですが、意味や役割を理解せずに使うと、本来文書構造を定義するためのHTMLの意義を無視したコードになってしまいます。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class="nav">\n <div class="nav-item">ホーム<\u002Fdiv>\n <div class="nav-item">ブログ<\u002Fdiv>\n <div class="nav-item">お問い合わせ<\u002Fdiv>\n<\u002Fdiv>\n\n<div class="title">HTMLでよくある間違い<\u002Fdiv>\n\n<div class="text">\n HTMLは<div class="strong">マークアップ言語<\u002Fdiv>です。\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>この例では、ナビゲーションもタイトルも強調したい箇所も、すべてdivタグで表現されています。HTMLはマークアップ言語であり、基本的にすべてのタグに特定の意味（セマンティクス）があります。「囲いたいからdiv」ではなく、構造や意味を意識しましょう。\u003C\u002Fp>\u003Cp>div／spanタグは、非セマンティクスタグと呼ばれて特定の意味を持たず、何かしらを区別するためのグルーピングの役割のみを担います。divタグはブロックや複数要素のまとまりを、spanタグはテキストの一部分のみを囲うために使います。\u003C\u002Fp>\u003Cp>一方でaやh1、strongのように、それぞれ固有の意味を持つタグはセマンティクスタグと呼ばれます。div／spanタグに頼るのは、他に適切な意味を持つタグが見当たらないときだけにしましょう。先ほどの例は、以下のように書き直せます。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><nav>\n <ul>\n <li><a href="\u002F">ホーム<\u002Fa><\u002Fli>\n <li><a href="\u002Fblog">ブログ<\u002Fa><\u002Fli>\n <li><a href="\u002Fcontact">お問い合わせ<\u002Fa><\u002Fli>\n <\u002Ful>\n<\u002Fnav>\n\n<h1>HTMLでよくある間違い<\u002Fh1>\n\n<p>\n HTMLは<strong>マークアップ言語<\u002Fstrong>です。\n<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>navタグでナビゲーションであることを示し、ul／li／aタグでリンクのリストを表現しています。見出しにはh1、本文にはp、強調したい部分にはstrongを使うことで、それぞれの意味が正しく伝わります。\u003C\u002Fp>\u003Cp>もちろん、CSSを適用するためだけにグルーピングしたい場合は、div／spanタグを使っても問題ありません。\u003C\u002Fp>\u003Ch2 id=\"hba03ee1c88\">2. aタグとbuttonタグを使い分ける\u003C\u002Fh2>\u003Cp>aタグとbuttonタグは、どちらを使うべきか混同しがちです。\u003C\u002Fp>\u003Cp>例えば、以下のような見た目のパーツがあったとします。「ボタンらしい見た目」なのでbutton要素を使いたくなるかもしれません。しかしテキストは「詳細ページを開く」となっており、別ページへの遷移が想定される内容です。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><button type="button">\n 詳細ページを開く\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>「ボタンっぽい見た目だからbutton」という理由だけでタグを選んでしまうのはNGです。なぜなら、aタグとbuttonタグでは明確に役割が異なるからです。\u003C\u002Fp>\u003Cp>別のウェブページやPDF、圧縮ファイルといったファイルにリンクする場合は、a要素を用います。一般的には、別URLへの画面遷移を伴うものはa要素になるでしょう。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><a href="\u002Fabout">詳細ページを開く<\u002Fa>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>逆に、画面遷移を伴わない、タブやアコーディオン、ハンバーガーメニューといった操作に対して何らかのアクションを実施するときは、button要素を用います。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><button type="button">ページの詳細を表示<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>a要素として扱うべきリンクをbutton要素でマークアップしてしまうと、リンク先のURLが分からない、Ctrl（macの場合は⌘）＋クリックで別タブを開けない、といった問題が発生します。それぞれの役割を理解して使い分けましょう。\u003C\u002Fp>\u003Ch2 id=\"h28bafc91fb\">3. 見出しレベルの順序を守る\u003C\u002Fh2>\u003Cp>h1～h6タグを使うと、見出しを設定できます。数字は見出しのレベルを表し、h1が最も高く、h6が最も低いランクになります。見出しレベルはスキップできないため、必ずh1から始めて、その次はh2...h6とする必要があります。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- 🙅見出しレベルの順番が違う -->\n<body>\n <h1>大見出し<\u002Fh1>\n <h3>小見出し<\u002Fh3>\n <h2>中見出し<\u002Fh2>\n<\u002Fbody>\n\n<!-- 🙅いきなりh2から始まっている -->\n<body>\n <h2>サイトのタイトル<\u002Fh2>\n <p>本文<\u002Fp>\n<\u002Fbody>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>このような構造では、検索エンジンやスクリーンリーダーのユーザーがページ構造を正確に認識できなくなる恐れがあります。見出しレベルの順番が乱れたり、不適切なレベルを設定したりしないよう注意しましょう。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><body>\n <h1>大見出し<\u002Fh1>\n <h2>中見出し<\u002Fh2>\n <h3>小見出し<\u002Fh3>\n<\u002Fbody>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>見出しレベルのイメージとしては、本に例えると理解しやすいでしょう。本のタイトルがh1、章タイトルがh2、章に属する節タイトルがh3、といった具合です。順番さえ正しく設定されていれば、同じレベルの見出しが複数あっても構いません。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><body>\n <h1>ウェブ制作の教科書<\u002Fh1>\n <h2>第1章 HTMLの基礎<\u002Fh2>\n <h3>1-1. HTMLとは何か<\u002Fh3>\n <h3>1-2. タグの書き方<\u002Fh3>\n <h2>第2章 CSSの基礎<\u002Fh2>\n <h3>2-1. セレクタの種類<\u002Fh3>\n <h3>2-2. ボックスモデル<\u002Fh3>\n<\u002Fbody>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"h960585c181\">4. imgタグの必須属性を理解する\u003C\u002Fh2>\u003Cp>imgタグは、他の要素に比べて指定できる属性が多く、利用頻度も高いためつまづきやすいポイントの1つです。\u003C\u002Fp>\u003Cp>alt属性は、画像の代替テキストを提供するため属性です。アクセシビリティの観点から非常に重要であり、\u003Cstrong>設定が必須\u003C\u002Fstrong>です。\u003C\u002Fp>\u003Cp>通常は、画像を見なくてもその内容や役割が伝わるよう、簡潔かつ具体的な文章を設定するのが基本です。「画像」「写真」のような曖昧な言葉ではなく、何が写っているのか、どんな意味を持つ画像なのかが伝わる表現を心がけましょう。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><img src="dog.jpg" alt="白いポメラニアンが芝生の上で座っている写真" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>単なる装飾のための画像では、空文字（\u003Ccode>alt=""\u003C\u002Fcode>）を指定することで「意味のない画像である」ことを示せます。\u003C\u002Fp>\u003Cp>なお、画像が何らかの理由で読み込めなかった場合、一般的なブラウザはその位置にalt属性のテキストを代わりに表示します。ユーザーが画像を目にできない状況でも、内容を正しく伝えられるのはこのためです。\u003C\u002Fp>\u003Cp>次に、width／height属性です。これらには画像の実際のピクセルサイズ（実寸）を指定します。ここで指定した数値は、「画面上で必ず746x427pxで表示する」という意味ではありません。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><img\n src="dog.jpg"\n alt="白いポメラニアンの写真"\n width="746"\n height="427"\n\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>width／height属性の目的は、画像の縦横比（アスペクト比）を指定し、あらかじめ表示に必要な領域を確保することです。CSS側で\u003Ccode>width: 100%\u003C\u002Fcode>のように可変幅で表示する場合でも、width／height属性から縦横比を計算できるため、画像の読み込み前後で発生しがちなレイアウト崩れ（レイアウトシフトと呼びます）を防げます。\u003C\u002Fp>\u003Ch2 id=\"h3998e1b031\">5. リストの入れ子構造に注意する\u003C\u002Fh2>\u003Cp>入れ子構造（ネスト）とは、あるタグを別のタグの中に含めることを指します。例えば以下のコードでは、h1タグとpタグがsectionタグの入れ子になっています。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><section>\n <h1>HTML初心者必見！ 間違いやすい要素の使い方10選<\u002Fh1>\n <p>この記事では、HTML初心者が間違いやすい要素や注意すべきポイントを10項目ピックアップしてご紹介します。<\u002Fp>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>ただし、タグはなんでも自由に入れ子にできるわけではありません。タグ同士には、入れ子にできるかどうかのルールが決められています。\u003C\u002Fp>\u003Cp>間違いやすい例として、リスト（ul、olタグ）が挙げられます。次のコードでは、材料と調味料を入れ子の箇条書きにしたいのですが、調味料のliタグと中身のulタグが同列に並んでしまっています。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><ul>\n <li>鶏肉<\u002Fli>\n <li>大根<\u002Fli>\n <li>調味料<\u002Fli>\n <!-- 調味料を材料の入れ子にしたい -->\n <ul>\n <li>しょうゆ<\u002Fli>\n <li>酒<\u002Fli>\n <li>みりん<\u002Fli>\n <\u002Ful>\n<\u002Ful>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>ul、olタグの直下に書けるのはliタグだけです。材料と調味料を入れ子にしたい場合は、子のリスト（2つ目のulタグ）を親のliタグで囲う必要があります。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><ul>\n <li>鶏肉<\u002Fli>\n <li>大根<\u002Fli>\n <li>\n 調味料\n <ul>\n <li>しょうゆ<\u002Fli>\n <li>酒<\u002Fli>\n <li>みりん<\u002Fli>\n <\u002Ful>\n <\u002Fli>\n<\u002Ful>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>olの中にolを書く場合や、ulの中にolを書く場合も、考え方は同じです。\u003C\u002Fp>\u003Ch2 id=\"hdd8846aba4\">6. header／footerタグを活用する\u003C\u002Fh2>\u003Cp>headerタグやfooterタグは、「ウェブページ全体のヘッダーやフッターをマークアップするためのタグ」という印象を持たれがちです。そのため、1ページに1つずつしか使えないと誤解されることもあります。\u003C\u002Fp>\u003Cp>しかし実際は、ページ全体に限らずセクション単位やコンポーネント単位にも使用できます。記事やカード、モーダルなどの構造の中で、導入や締めくくりの部分を明示できるのです。\u003C\u002Fp>\u003Cp>以下は、モーダルを簡略化した例です。まず、header／footerタグを使わない場合を見てみましょう。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><dialog>\n <h2>感想・報告を送る<\u002Fh2>\n <form method="post">\n <p>ご感想やご指摘、気になったことについてお気軽にお送りください。<\u002Fp>\n <textarea name="お問い合わせ内容" required placeholder="内容を入力してください"><\u002Ftextarea>\n <button type="submit">送信する<\u002Fbutton>\n <\u002Fform>\n<\u002Fdialog>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>これをheader／footerタグを使って書き換えると、以下のようになります。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><dialog>\n <header>\n <h2>感想・報告を送る<\u002Fh2>\n <\u002Fheader>\n <form method="post">\n <p>ご感想やご指摘、気になったことについてお気軽にお送りください。<\u002Fp>\n <textarea name="お問い合わせ内容" required placeholder="内容を入力してください"><\u002Ftextarea>\n <footer>\n <button type="submit">送信する<\u002Fbutton>\n <\u002Ffooter>\n <\u002Fform>\n<\u002Fdialog>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>モーダルを表現するdialogタグの内部に、headerタグとfooterタグを配置することで、どの部分が導入で、どこがアクションエリアなのかを構造的に示せます。これは要素が複雑化した場合の可読性向上や、アクセシビリティの改善にもつながります。\u003C\u002Fp>\u003Ch2 id=\"hab577c2dff\">7. button／inputタグのtype属性を設定する\u003C\u002Fh2>\u003Cp>buttonタグやinputタグにはtype属性があります。これを指定することで、バリデーションを強化し、意図しない動作を防げます。\u003C\u002Fp>\u003Cp>button要素を例に見てみましょう。type属性を省略すると、デフォルト値である\u003Ccode>submit\u003C\u002Fcode>が適用されてしまい、以下のように不適切なコードとなります。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><button>検索<\u002Fbutton>\n\n<!-- 以下と同じ意味になる -->\n<button type="submit">検索<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>submit\u003C\u002Fcode>はフォームのデータをサーバーに送信するための値です。検索ボタンにはその機能が不要なため、次のようにtype="button"を指定するのが適切です。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><button type="button">検索<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>フォームやボタンの動作を誤って指定しないために、type属性は必ず指定しましょう。特にbutton要素の場合は、type="button"を明示することで意図しないフォーム送信を防げます。\u003C\u002Fp>\u003Ch2 id=\"h962f8c2caf\">8. labelタグはfor属性で関連付ける\u003C\u002Fh2>\u003Cp>フォームを作る際、labelタグをうまく取り扱うことでアクセシビリティ向上につながります。特にfor属性を設定して、inputタグのid属性の値と一致させると、ラベル部分をクリックしてもinputにフォーカスが移ります。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- for属性が設定されていない -->\n<label>名前:<\u002Flabel>\n<input type="text">\n\n<!-- 正しく関連付けられた例 -->\n<label for="username">ユーザー名:<\u002Flabel>\n<input type="text" id="username">\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>チェックボックスやラジオボタンでは特に効果が大きく、UIだけでなく文字部分をクリックして選べるようになります。\u003C\u002Fp>\u003Cp>また、labelとフォーム関連の要素を紐づけるには、labelタグで要素を囲う方法もあります。UIのラベルとして直感的に理解しやすいことと、必要最小限の記述で済むため、筆者はこちらの方法を愛用しています。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- labelタグで囲む例 -->\n<label>\n ユーザー名:\n <input type="text">\n<\u002Flabel>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"h1a770f496e\">9. 日付や時刻のマークアップにはtimeタグを使う\u003C\u002Fh2>\u003Cp>「2024年12月24日」のような日付は、HTMLの中でよく登場する表現の一つです。日付や時刻をブラウザーや検索エンジンに正確に伝えるために、timeタグを使って以下のようにマークアップできます。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- 年月日 -->\n<time>2024-12-24<\u002Ftime>\n\n<!-- 時刻 -->\n<time>14:54<\u002Ftime>\n\n<!-- 年月日＋時刻＋秒 -->\n<time>2024-12-24T14:54:02<\u002Ftime>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>timeタグで囲う文字列は、決められたフォーマットでなければいけません。ただし、現実的にこのフォーマットで日時を表現することは少ないでしょう。\u003C\u002Fp>\u003Cp>「2024年12月24日」のように日本でよく使われる表記にするには、datetime属性を使います。先ほどのコードをdatetime属性で書き換えると、以下のようになります。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- 年月日 -->\n<time datetime="2024-12-24">2024年12月24日<\u002Ftime>\n\n<!-- 時刻 -->\n<time datetime="14:54">午後2時54分<\u002Ftime>\n\n<!-- 年月日＋時刻＋秒 -->\n<time datetime="2024-12-24T14:54:02">2024年12月24日14時54分2秒<\u002Ftime>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>datetime属性を使うことで、人間にもマシンにも読みやすい日時情報を表現できます。\u003C\u002Fp>\u003Ch2 id=\"he9187fee42\">10. metaタグのuser-scalable="no"は使わない\u003C\u002Fh2>\u003Cp>\u003Ccode>meta name="viewport"\u003C\u002Fcode>は、ウェブサイトをあらゆる画面サイズで適切に表示するために使われます。特にレスポンシブウェブデザインには欠かせない要素です。\u003C\u002Fp>\u003Cp>この要素では、user-scalable属性を使ってページ拡大縮小の可否を設定できます。値を\u003Ccode>no\u003C\u002Fcode>（または\u003Ccode>0\u003C\u002Fcode>）に設定すると、ズームが無効化され、ユーザーは自分の意思で拡大率を変更できなくなります。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><meta name="viewport" user-scalable="no" content="width=device-width, initial-scale=1" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>拡大率を固定すると、コンテンツ提供側がレイアウトをユーザーに強制できるため、一見都合がよいようにも思えます。しかし、拡大率が固定されてしまうと、視力が低い方にとってコンテンツが読みづらくなる場合がある、デバイスサイズによっては見づらいレイアウトになる、などの問題が発生します。\u003C\u002Fp>\u003Cp>user-scalable属性の初期値は\u003Ccode>1\u003C\u002Fcode>、つまり\u003Ccode>yes\u003C\u002Fcode>と同じです。特に値を指定しなければ、ユーザーは自由にズームできます。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><meta name="viewport" content="width=device-width, initial-scale=1" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"h6b8aa55dfc\">HTMLを正しく理解し、自信を持ってコーディングしよう\u003C\u002Fh2>\u003Cp>ここまで、HTML初心者が間違いやすい要素・属性の使い方や、注意すべきポイントを10項目ご紹介しました。\u003C\u002Fp>\u003Cp>生成AIにコードを書いてもらうことが当たり前になった今でも、HTMLの仕様を正しく理解しておくことの重要性は変わりません。むしろAIやJavaScript\u002FTypeScript全盛の時代だからこそ、ウェブページの礎となるHTMLについて深く知ることで、スキルに欠かせない土台となるでしょう。\u003C\u002Fp>\u003Cp>コード初心者は、ついついコードをコピペしてしまいがちですが、あいまいな理解のまま中途半端なコードを書くよりも、分からない部分はその都度調べて仕組みを理解する方が、結果的に遠回りになりません。要素の意味や役割を正しく理解し、自信を持ってコーディングできるようになりましょう。\u003C\u002Fp>\u003Cp>この記事が、これからマークアップに触れる方々の助けになれば幸いです。\u003C\u002Fp>",[10],"フロントエンド",[12],{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":15,"name":16,"job":17,"avatar":18,"profile":21,"xId":22,"githubId":22},"zj4140csfzp","2024-02-16T08:47:03.048Z","2024-02-26T02:43:14.033Z","沖 良矢","代表／インタラクションデザイナー",{"url":19,"height":20,"width":20},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F5a1443817ff045dca487a1d1ff776039\u002Foki_202304.png",512,"1981年愛媛県生まれ。インタラクションデザイナー。2003年よりWeb制作に携わる。ビジネスとクリエイティブの両立を強みとして、戦略立案、UI\u002FUX設計、デザイン、フロントエンド開発に携わる。現場で培った知見をもとに講演、執筆、コミュニティ運営にも取り組んでいる。長岡造形大学、東京造形大学非常勤講師。","448jp",{"url":24,"height":25,"width":26},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F0d90c48239d44f41b72c835e508b9f39\u002Fhtml-tag-selection-tips-for-beginners.png",720,1280,{"fieldId":28,"type":29},"ogpImage",[30],"タイプ1（タイトルのみ）",{"contents":32,"totalCount":38,"offset":39,"limit":40},[33],{"id":34,"isArchive":35,"startDate":36,"title":37},"dist-54",false,"2026-09-01T10:00:00.000Z","DIST.54 「アニメーションの良さは何で決まるのか？」",65,0,1,1786672015081]