HTMLの要素ってなに？

HTML文書は要素の組み合わせで構成されます。

要素は「タグ」と呼ばれる文字列で囲んだ範囲のことです。

HTMLには、役割ごとに様々なタグが存在します。

タグの例（divタグ）

<div>文字列</div>

文字列の前後に対となるタグ（<hoge></hoge>）をつけて要素をつくります。

基本構造

htmlの基本構造となる要素を紹介します。

【最上位の要素】 `html要素`

HTML文書における最上位の要素は「 html要素 」です。
html要素はhead要素、body要素の２つから構成されます。

htmlの基本構造

<!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要素

<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>

Qiita

【画像】 `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要素

<div class="foo" id="bar">ブロックレベル要素になります</div>`

`span要素`

span要素

<span class="foo" id="bar">インライン要素になります</span>

※ブロックレベル要素・インライン要素については別の記事で紹介します。

補足

さいごまでお読みいただき、ありがとうございます！

この記事はプログラミング初心者であるわたしが、毎日の学習ログとして書きました。
ご質問やご意見、間違いのご指摘などがあれば、気軽にコメントください。

また、平日にもくもく作業したり質問しあえる仲間も募集しています。
ご興味がある方はTwitterなどでご連絡くださいー！

これからもどうぞよろしくお願いします