📍
【HTML】今更だけど、よく使いそうなタグについてまとめた②
はじめに
この記事は学習ノートです。
HTMLのタグについて、今更だけどまとめました。
前回の記事はコチラ👇
基本のタグまとめ
headerタグ
- 見出しやロゴ、検索フォーム、ナビゲーションなどの、導入的なコンテンツをまとめるタグ
- ページの最初以外にも使用できる
- 1つのHTML文書の中で、何回でも使用できる
footerタグ
- 直近のまとまりに対する、著作者情報や関連文書へのリンク、コピーライトなどを含むタグ
- ページの最後以外にも使用できる
- 1つのHTML文書の中で、何回でも使用できる
navタグ
- ナビゲーションリンクを提供するセクションを表す
- メニュー、目次、索引など
そもそもナビゲーションリンクとは👇
ulタグ
- 順序なしリストを表す
- リストアイテムの順番が、特に関係のないときに使用する
-
ulは、unordered listの略
olタグ
- 順序つきリストを表す
- リストアイテムの順番が重要なときに使用する
- ランキングや料理のレシピなど
-
olは、ordered listの略
li タグ
-
ulタグ、olタグの、リストの項目を表すために使用する - 単体では使用しない！
NG🙅
<h2>私の好きな動物</h2>
<li>うさぎ</li>
<li>ねこ</li>
OK🙆
<h2>私の好きな動物</h2>
<ul>
<li>うさぎ</li>
<li>ねこ</li>
</ul>
dlタグ
- 説明リストを表す
- definition(意味・定義) listの略
dtタグ
-
dlタグ内で、リストの用語を表す部分に使用する - definition term(用語)の略
ddタグ
-
dlタグ内でdtタグ(用語)の説明を表す部分に使用する - definition description(説明)
使用例
<dl>
<dt>うさぎ</dt>
<dd>耳が長い。かわいい。</dd>
<dt>ねこ</dt>
<dd>耳が短い。かわいい。</dd>
</dl>
formタグ
- フォームを作るときに使用する
- ユーザーがブラウザで入力した値を、まとめてサーバーに送信するために使用する
labelタグ
- 入力欄の説明を表すために使用する
inputタグ
- さまざまな種類の入力欄を作るために使用する
- 1行テキスト、チェックボックス、ラジオボタンなど
使用例
<label for = "username">お名前</label>
<input type = "text" id = "username">
詳しくは、以下の記事が分かりやすかったです👇
textareaタグ
- コメントやお問い合わせフォームのように、複数行の入力欄を作るために使用する
buttonタグ
- クリックできるボタンを表す
- フォームの送信など、簡単なボタン機能が必要なときに使用する
おわりに
基本的にMDNで調べて、分かりにくいところは他のサイトでも調べながらまとめたのですが、catnoseさんのサイトがめちゃくちゃ分かりやすかったです！😳
これからもお世話になります…🙇🙇
参考
Discussion