これまで学んできたHTMLについて、定番の骨組み・主要なタグについてまとめました。
定番の骨組み
<!DOCTYPE html>
<html lang=“ja”>
<head>
</head>
<body>
</body>
</html>
headタグ内
文書に関する情報を入れる。
最低限必要なのは、①文字コード ②ページタイトル ③CSSの読み込み の3つ。
| <meta charset=“utf-8″> | コンピュータが使う文字コードの指定。日本語のサイトには必ず入れる。 記述は必ずheadタグ開始直後。現在では、ほとんどがutf-8。 |
| <title></title> | ページタイトルの指定。見出しタブに表示される。 |
| <link rel=“stylesheet” href=“cssファイルパス”> | CSSファイル読み込みの指示。linkタグは、headタグ内のみで使用される。 relは、関係性を示す。hrefは、ファイルがある場所を示す。 |
| <meta name=“description” content=“サイトの内容”> |
文書の説明。検索エンジンへの情報提供。サイトの説明として使われることあり。
|
| <meta name=“viewport” content=“width=device-width, initial-scale=1”> | レスポンシブデザインであることをブラウザに伝える。必ずこの書き方。 縮小機能がオフになる。 |
| <link rel=“icon” href=“.ico画像ファイルパス”> |
見出しタブアイコン（Favicon）の表示。
|
Favicon用の.icoファイルの作成方法については、こちらの記事にまとめています↓
関連記事
(adsbygoogle = window.adsbygoogle || []).push({}); ドットインストールで動画を見ながら、HTMLを勉強中。 やっぱり動画で見ると、分かりやすいですね！ ドッ[…]
bodyタグ内
区切りタグ
| <header></header> | 文章のヘッダー的要素。 |
| <footer></footer> | 文章のフッター的要素。 |
| <main></main> | ページの中心的要素。1つのHTMLファイルで1回しか使えない。 |
| <section></section> | 汎用的なかたまり要素。divタグより重要度が高いもの。 |
| <div></div> | 汎用的なかたまり要素。class定義によく使われる。 |
| <span></span> | 文中一部の文字スタイルを変える場合に使用する。タグ前後の改行不要。 |
文字修飾など
| <h1></h1> | head1の略。見出し。数字が大きくなるほど見出しレベルが下がる。 |
| <p></p> | paragraphの略。説明文など、一般的な文章を書く。 |
| <hr> | horizontal ruleの略。水平の罫線を引く。 |
| <br> | breakの略。改行。 |
| <strong></strong> | 文字の強調。 |
| <blockquote></blockquote> | 引用風に表示。 |
画像の表示やリンクなど
| <img src=“画像ファイルパス” width=“数値” height=“数値” alt=“画像の名前” class=“識別子名”> |
imageの略。画像を表示。
srcは、sourceの略。widthは、画像幅。heightは、画像高さ。 altは、画像が表示されない場合等のテキスト。音声ソフトでの読み上げにも対応。 classは、CSSで識別子として使用する名前を書く。 |
| <a href=“〇〇” target=“_blank”></a> |
anchorの略。
hrefは、リンク先指定。 〇〇にURL→ webサイトに飛ぶ 〇〇にmailto:aaa.com→aaa.com宛メール画面を開く 〇〇にファイルパス→ファイルに飛ぶ target=“_blank”で、新タブで表示。 |
| <!– コメント –> | コメントタグ。ページには表示されない。 ソースコードでは表示されるため、機密情報等は書かない。 |
| <nav></nav> | navigationの略。文書のナビゲーション。 |
| 母体→ <a href=“#〇〇”> 飛び先→ <h2 id=“〇〇”> |
内部リンク。 リンク先idを〇〇に記入。（自由。”TOP”は×。） h2部分は自由に変更可。 別のhtmlファイル内を指定する場合は、<a href=“aaa.html#〇〇”>と#id名の前にhtmlファイルパスを記入する。 |
| <p><a href=“#”>TOPへ</a></p> |
「TOPへ」という文書に、ページトップへ戻るリンクを貼る。
リンク先は#のみ、もしくは、#TOPとする。 |
リスト
| <ol><li>項目</li></ol> |
Ordered Listの略。番号付きリスト。「li」はList Itemの略。それぞれのリストの要素。
属性reversedを入れることで（<ol reversed>）、降順になる。 属性startを入れることで（<ol start=“始めの数字”>）、始まりの数字を指定できる。 |
| <ul><li>項目</li></ul> | Unordered Listの略。番号なしリスト。 |
| <dl><dt>項目</dt><dd>項目</dd></dl> |
Description Listの略。説明リスト。
「dt」はDescription Termの略。それぞれのリストの項目。複数並んでも可。 「dd」はDescription Detailの略。それぞれのリストの説明。複数並んでも可。 |
フォーム
| <input type=“text”name=“〇〇”> |
テキスト入力欄（一行）の作成。閉じタグ不要。
name属性は、入力内容送信時に処理プログラムが必要とする情報。 placeholder属性で入力ガイドを表示できる。 |
| <textarea></textarea> | テキスト入力欄（複数行）の作成。 タグで挟んだ文章は、初期値として入力欄に表示される。 |
| <input type=“password”> | パスワード入力欄（入力を●で表示）の作成。 |
| <input type=“radio” name=“〇〇” value=“aaa”> |
ラジオボタン（1つのみ選択）の作成。
属性として、checked（値はなし）と入力すれば、あらかじめ選択した状態に。 value属性は、入力内容送信時に処理プログラムが必要とする情報。 同じ設問に対する選択肢には、同じname属性を付けておく。 |
| <input type=“checkbox”name=“〇〇” value=“aaa”> |
チェックボックス（複数選択）の作成。
同じ設問に対する選択肢には、同じname属性を付けておく。 |
| <button>AAA</button> | ボタンの作成。「AAA」と書かれたボタンを表示。 実際に作動させるには、他言語が必要。 |
| <input type=“submit” value=“AAA”> |
ボタンの作成。「AAA」と書かれたボタンを表示。
value属性なしの場合、「送信」と書かれたボタンを表示。 上記buttonタグを使用する方が、汎用性高い。 |
| <select name=“〇〇”> <option value=“aaa”>AAA</option> <option value=“bbb”>BBB</option> <option value=“ccc”>CCC</option> </select> |
プルダウンメニューの作成。 選択肢として、「AAA」「BBB」「CCC」を表示。 |
その他のタグなどについて
今回紹介したのはほんの一部なので、他にもたくさんのタグや属性が存在します。
そんな時に使えるのが、HTMLのまとめサイト「MDN web docs」。
トップページの「HTML要素リファレンス」から、タグ一覧を見ることができます。
それぞれのタグについて、使用例や詳しい性質、
それぞれの要素に含めて良いタグ（「許可された内容」という項目）などの情報があるので、非常に役立ちますよ。
