ぽかぽかコード日和

とっても暑い夏の日にプログラミングはじめました☀️

【HTML】目的別!タグの選び方

htmlで「どのタグを選んだら良いのかわからない!」ってときにみる、まとめページです。随時変更していきます。

改行をしたい!

  • <p>タグは段落を表す。テキストのまとまりを表現したいとき。

  • <br>タグは単なる改行を挿入する。特定の行間が必要なとき。使用例:住所

☆基本的には<p>を使用する。どうしても必要であれば<br>を使う。

太字にしたい!

  • <strong>タグはテキストに協調の意味を持たせるとき。太字になる。見出し<h1>

    には使用しない。

  • <b>タグは太字にして目立たせるとき。

  • HTMLの<head>で<style>タグ、またはタグ内で<style>属性、またはCSSで{font-weight: bold;}を指定する。

箇条書きにしたい!

  • <ul>タグは順序なしのリスト。「・」がつく。

  • <ol>タグは順序ありのリスト。「1. 」数字が順番につく。使用例:ランキング、手順

テキストの一部分だけデザインを変えたい!

  • <span>タグを使う。囲った部分のみをグループ化する。

上下付き文字(m²やX2)を表示したい!

  • 上付き文字は<sup>タグで囲む

  • 下付き文字は<sub>タグで囲む。

いろいろな入力欄を表示したい!

  • 一行の入力欄・・・<input type="text">

  • 複数行の入力欄・・・<textarea></textarea>

  • メール入力欄・・・<input type="email">

  • ラジオボタン・・・<input type="radio">

  • チェックボックス・・・<input type="checkbox">

  • ボタン・・・<input type="submit">

  • プルダウン・・・<select>に<option>を入れる

※<input>要素は終了タグは無し

リンクや画像を紐付けしたい!

  • リンク・・・<a href="リンク先のURL">テキスト</a>

  • 同じサイト内のページへのリンク・・・<a href="about.html”>About Us</a>

  • 外部サイトへのリンク・・・<a href="https:~">外部サイト</a>

  • 画像の挿入・・・<img src="画像のパス” alt="代替テキスト">

  • 画像にリンクを設定・・・<a href="URL"><img src="画像のパス” alt="代替テキスト”></a>

※<img>要素は終了タグは無し

グループ化したい!

  • <div>は特に意味はない。汎用のコンテナ

  • <section>関連するコンテンツをまとめるために使う。通常見出しを含む


参考にしたサイト

改行https://white-link.com/sem-plus/html-ptag/#3-3

太字https://white-link.com/sem-plus/html-strongtag/

箇条書きhttps://web-dev.tech/front-end/html/difference-ul-ol/

spanタグhttps://keywordmap.jp/academy/span/#span-2

上下付き文字https://irodori-design-web.com/blog/blog-2764/#google_vignette

リンクhttps://zero-plus.io/media/html_link_how_to/