今回はHTMLのページを構成する上で必要なタグを
まとめました。
いっぱいありすぎて忘れちゃいますよね。。。
なのでブクマとかいいねとか（露骨）
してすぐ読み返せるようにして
忘れた頃に戻ってきてもいいのよ。
⭐︎この記事でわかること⭐︎
基本的なHTMLのタグの種類と意味
HTMLのタグ一覧
【必須級】
ここではHTML文書を作る上で必須となるタグをご紹介します。
| タグ | 意味 | 一言メモ |
|---|---|---|
| <!DOCTIPE HTML> | HTML5文書であることの宣言 | 一番最初に 書こう。 |
| <html lang = "ja"> | このHTML文書は "ja"(日本語)ですよと宣言 必ず必要ではないがほぼ必須級 | 文書のルールの違いがあるため宣言する。 例えば "en"(英語)は単語毎の間にスペースがある など |
| <html></html> | HTML文書の開始、終了タグ | これで文書全体を囲む |
| <head></head> | HTML文書のヘッダーデータ 検索エンジン、ブラウザに正しく反映されるために必須。 | ページ自体に表示されない |
| <meta charset= "UTF-8"> | 文字エンコーディングの指定 | 今はほとんどこれでOK |
| <meta name="viewpoint" content="width=device-width, initial-scale=1.0"> | 異なるデバイスでWEB閲覧の際にも最適な表示にしてくれる （レスポンシブデザイン） | 見やすいサイト作りに必須 |
| <title></title> | タブ（上にあるやつ）のところに表示されるタイトルの指定 | 検索エンジンの結果にも使われる |
| <body></body> | サイトのメイン部分 ここに色んなタグを追加して見やすくしていく | 見出しや画像、段落、別ページへのリンクなどがここに集結 |
書くとこんな感じ↓
h1 p などは以下でご紹介します。
【かなり大事級】
| タグ | 意味 | 一言メモ |
|---|---|---|
| <h1></h1> | 見出しを作る際に必要。h1からh6 まであり数字が大きくなる毎に段階的に小さくなる | 記事を段階毎に整理するのに必須級 |
| <p></p> | 段落を示すためのタグ | |
| <ul></ul> | 箇条書きのリストを作るタグ | 順不同 |
| <ol></ol> | 番号付きのリストを作るタグ | 順序付き |
| <li></li> | リストアイテムを表示するためのタグ | ol ul の中とかに入れてあげる |
| <a></a> | ハイパーリンクを作成するタグ | ここを押すとそのリンク先に飛べる |
| <img> | 画像データを挿入するためのタグ | 画像の場所変わると呼び出せない 注意⚠️ |
| <!-- --> | コメントを残すためのタグ 空白のところにコメントを入れる | コメントはプログラムに反映されない 残す癖を付けよう。デバッグ（エラーを直す）しやすい |
書くとこんな感じ↓
実際のページ。画像はリンク先がないため表示されません。
表を作りたい時に使うタグ
似た要素などをまとめて表（テーブル）を作りたい時に使います。
| タグ | 意味 | 一言メモ |
|---|---|---|
| <table></table> | 表を作成する際に必要なタグ | 表の要素の最初と最後を囲む |
| border | 表に罫線を引く table タグの後ろに <table border="1">のように書く | "１" のところ変更して罫線の太さを変えられる |
| <th></th> | 表の見出しを表示するためのタグ | この表でいけば 「タグ」「意味」「一言メモ」のところ |
| <tr></tr> | 表の行を表示するタグ | 同じく行の最初と最後を囲む 「行」って横ね |
| <td></td> | 表のセルを示すタグ | trよりももっと狭い範囲 |
※body タグ以降見切れてます。
↓こうなります
グループ化したい時に使うタグ
要素をまとめたい時に使います。
CSSとかと組み合わせることが多いです。
例：ここからここまで の 色を 赤に 変更したい
となったときに div タグでグループ化し、そこを指定することで一気に変更できる
| タグ | 意味 | 一言メモ |
|---|---|---|
| <div></div> | ブロック要素をグループ化するためのタグ | デフォルトでは要素ごとに改行になる |
| <span></span> | インライン要素をグループ化するためのタグ | デフォルトでは同じ行に表示される |
フォームを構成するタグ
フォームなど入力できる所を作ることができます。
お問い合わせフォームとか あんな感じのページが作れます。
| タグ | 意味 | 一言メモ |
|---|---|---|
| <form></form> | フォームを作成するときに使用 | formでフォームの要素全体を囲む |
| <input></input> | フォームの入力するとこを作成するタグ | type = の後に好きなタグを指定してさまざまな形にできる 詳しくは下のコードにコメント書いてるので参考にしてちょ |
| <button></button> | ボタンを作る際に使う | ボタンの中に好きな文字入れられるよ |
| <label></label> | フォームのラベルを作成する時に使う | 「名前」とか「電話番号」項目に使うイメージ |
| <textarea></textarea> | 複数行の入力フォームを作成するときに使う | cols で一行に表示できる最大文字数 lows で列数を指定 |
| <select></select> | ドロップダウンリストを作るためのタグ | select size = " " や select multiple などいろんな選択ボックスを作れる |
| <option></option> | ドロップダウンリストの選択肢を作成するためのタグ | select タグの中に項目の数の分入れる |
また、任意のボタンを作ったり、
選択式で選べるとこも作ることができます。
・ 押したら〜 のところはぽちぽち押せるボタンになってます。
・一行だけを〜 のところはクリックすると中に格納されているのを選択できます。
・ 複数行〜 のところはスクロールするとそれぞれ選択できます。
・ 最後 のところはクリック自体できなくしています。
セクション レイアウト関連のタグ【作成中】
| タグ | 意味 | 一言メモ |
|---|---|---|
| <header></header> | ヘッダーを示すためのタグ | |
| <main></main> | メインコンテンツを示すためのタグ | |
| <footer></footer> | フッターを示すためのタグ | |
| <nav></nav> | ナビゲーションを示すためのタグ | |
| <section></section> | セクションを示すためのタグ | |
| <article></article> | 記事を示すためのタグ | |
| <aside></aside> | サイドバーを示すためのタグ |