HTMLの要素ってなに？
HTML文書は要素の組み合わせで構成されます。
要素は「 タグ 」と呼ばれる文字列で囲んだ範囲のことです。
HTMLには、役割ごとに様々なタグが存在します。
<div>文字列</div>
文字列の前後に対となるタグ（<hoge></hoge>）をつけて要素をつくります。
基本構造
htmlの基本構造となる要素を紹介します。
【最上位の要素】 html要素
HTML文書における最上位の要素は「 html要素 」です。
html要素はhead要素、body要素の２つから構成されます。
<!DOCTYPE html> ...DOCTYPE宣言
<html> ...html要素
<head> head要素 </head>
<body> body要素 </body>
</html>
lang属性
html要素には、lang属性で言語コードを記述するのが慣例となっています。
<html lang="ja"> <!-- 日本語を設定 -->
| 言語 | 文字コード（属性値） |
|---|---|
| 日本語 | ja |
| 英語 | en |
| 中国語 | zh |
| 韓国語 | ko |
【メタデータ】 head要素
文書タイトルなどの補足情報を記述します。
【コンテンツ】 body要素
ブラウザに表示するコンテンツを記述します。
head要素内でつかう要素
head要素内でつかう要素を紹介します。
【タイトル】 title要素
文書タイトルを設定します。
<title>文書タイトル</title>
タイトルはブラウザのここに表示されます。
【補足情報】 meta要素
文字コードや文書の概要文・キーワードを設定します。
適切に設定することで、SEOの観点でも有利に働きます。
<meta charset="文字コード">
<meta name="description" content="概要文">
<meta name="keywords" content="キーワード, キーワード, ...">
他にも、viewport、robots、OGPなどの設定ができます。
body要素内でつかう要素
body要素内でつかう要素を紹介します。
【見出し】 h1〜h6要素
見出しをつくる要素で、大きさが６段階あります。
h1から順に、番号が小さいほど大きな見出しになります。
See the Pen Untitled by ゆたか (@yutaka_pg) on CodePen.
【段落】 p要素
段落をつくる要素です。
pはparagraphの頭文字。
See the Pen Untitled by ゆたか (@yutaka_pg) on CodePen.
【箇条書き】 ol要素・ul要素・li要素
箇条書きリストをつくる要素です。
- 順序があるリスト： ol要素の中でli要素を使用
- ol: ordered list の意
- li: list の意
- 順序のないリスト: ul要素の中でli要素を使用
- ul: unordered list の意
li要素は必ず「ol要素またはul要素」の中で使用します。
See the Pen Untitled by ゆたか (@yutaka_pg) on CodePen.
【記述リスト】 dl要素・dt要素・dd要素
項目の説明文を含むリスト（記述リスト）をつくる要素です。
- dl: description list（説明リスト）
- dt: description term（説明する単語）
- dd: description difinition（説明文）
See the Pen Untitled by ゆたか (@yutaka_pg) on CodePen.
【表組み】 table要素
表組みを作成する要素です。
行単位（横方向）で記述します。
tr: table row（行）
th: table header（見出しセル）
td: table data（内容セル）
See the Pen Untitled by ゆたか (@yutaka_pg) on CodePen.
【改行】 br要素
テキストを改行する要素です。
htmlでは単にコード上で改行しても反映されません。
空要素のため、終了タグは不要です。
ここで<br>改行されます
ここで
改行されます
【区切り線】 hr要素
話の意味的な区切りを表す要素です。
空要素のため、終了タグは不要です。
１つ目の話 <hr> ２つ目の話１つ目の話
２つ目の話
注意
水平線をひく目的であれば、CSSのborderプロパティなどで設定しましょう
【ハイパーリンク】 a要素
ハイパーリンクを設定します。
href属性で、リンク先のURLを指定します。
<a href="https://qiita.com/">Qiita</a>
【画像】 img要素
画像を設定します。
画像サイズなどはCSSで設定することが一般的です。
src（ソース）属性で、画像の保存先のパスを指定します。
alt（オルト）属性で、画像が利用できない場合の説明テキストを記述します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2323790/profile-images/1638160198" alt="サンプル画像" >
【重要語句】 strong要素
重要な語句を表す要素です。
<p>
ここが<strong>重要</strong>です
</p>
ここが重要です
注意
太字にする目的であれば、CSSのfont-weight:bold;で設定しましょう
【強調語句】 em要素
強調したい語句を表す要素です。
<p>
ここを<em>強調</em>します
</p>
ここを強調 します
注意
斜体にする目的であれば、CSSのfont-style:italic;で設定しましょう
【連絡先】 address要素
連絡先情報を記述する要素です。
<adress>
<p>下記よりご連絡先ください</p>
<p>
ゆたか:
<a href="mailto:yutaka.pg@gmail.com">yutaka.pg@gmail.com</a>
</p>
</adress>
下記よりご連絡先ください
ゆたか: yutaka.pg@gmail.com
範囲を決めるだけの汎用的な要素
範囲をグループ化するだけの、意味を持たない要素です。
class属性やid属性を付与することで、要素に対しCSSやJavascriptの操作がしやすくなります。
div要素
<div class="foo" id="bar">ブロックレベル要素になります</div>`
span要素
<span class="foo" id="bar">インライン要素になります</span>
※ブロックレベル要素・インライン要素については別の記事で紹介します。
補足
さいごまでお読みいただき、ありがとうございます！
この記事はプログラミング初心者であるわたしが、毎日の学習ログとして書きました。
ご質問やご意見、間違いのご指摘などがあれば、気軽にコメントください。
また、平日にもくもく作業したり質問しあえる仲間も募集しています。
ご興味がある方はTwitterなどでご連絡くださいー！
これからもどうぞよろしくお願いします