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