HTMLの超きほん　〜要素の種類と使い方〜

# HTMLの要素ってなに？
HTML文書は要素の組み合わせで構成されます。

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

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

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

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

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

```html:htmlの基本構造
<!DOCTYPE html>  ...DOCTYPE宣言
<html>           ...html要素
  <head> head要素 </head>
  <body> body要素 </body>
</html>
```
### `lang属性`
html要素には、lang属性で言語コードを記述するのが慣例となっています。

```html
<html lang="ja"> <!-- 日本語を設定 -->
```
| 言語 | 文字コード（属性値） |
|:-:|:-:|
|日本語|ja|
|英語|en|
|中国語|zh|
|韓国語|ko|

## 【メタデータ】 `head要素`
文書タイトルなどの補足情報を記述します。

## 【コンテンツ】 `body要素`
ブラウザに表示するコンテンツを記述します。

# head要素内でつかう要素
head要素内でつかう要素を紹介します。

## 【タイトル】 `title要素`
文書タイトルを設定します。
```html
<title>文書タイトル</title>
```
タイトルはブラウザのここに表示されます。
![0313-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2323790/d5cee25a-283a-0cbc-8ada-43635865f1ce.png)

## 【補足情報】 `meta要素`
文字コードや文書の概要文・キーワードを設定します。
適切に設定することで、SEOの観点でも有利に働きます。

```html:meta要素
<meta charset="文字コード">
<meta name="description" content="概要文">
<meta name="keywords" content="キーワード, キーワード, ...">
```
他にも、viewport、robots、OGPなどの設定ができます。

# body要素内でつかう要素
body要素内でつかう要素を紹介します。

## 【見出し】 `h1〜h6要素`
見出しをつくる要素で、大きさが６段階あります。
h1から順に、番号が小さいほど大きな見出しになります。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNpNQLg" data-user="yutaka_pg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yutaka_pg/pen/oNpNQLg">
  Untitled</a> by ゆたか (<a href="https://codepen.io/yutaka_pg">@yutaka_pg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 【段落】 `p要素`
段落をつくる要素です。
pはparagraphの頭文字。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ExoxOyJ" data-user="yutaka_pg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yutaka_pg/pen/ExoxOyJ">
  Untitled</a> by ゆたか (<a href="https://codepen.io/yutaka_pg">@yutaka_pg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 【箇条書き】 `ol要素`・`ul要素`・`li要素`
箇条書きリストをつくる要素です。

> - 順序があるリスト： ol要素の中でli要素を使用
>     - ol: ordered list の意
>     - li: list の意
> - 順序のないリスト: ul要素の中でli要素を使用
>     -  ul: unordered list の意

li要素は必ず「ol要素またはul要素」の中で使用します。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWXWEbX" data-user="yutaka_pg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yutaka_pg/pen/NWXWEbX">
  Untitled</a> by ゆたか (<a href="https://codepen.io/yutaka_pg">@yutaka_pg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 【記述リスト】 `dl要素`・`dt要素`・`dd要素`
項目の説明文を含むリスト（記述リスト）をつくる要素です。
> - dl: description list（説明リスト）
> - dt: description term（説明する単語）
> - dd: description difinition（説明文）

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BaJaGYJ" data-user="yutaka_pg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yutaka_pg/pen/BaJaGYJ">
  Untitled</a> by ゆたか (<a href="https://codepen.io/yutaka_pg">@yutaka_pg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 【表組み】 `table要素`
表組みを作成する要素です。
行単位（横方向）で記述します。

> tr: table row（行）
> th: table header（見出しセル）
> td: table data（内容セル）

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gOoOZwK" data-user="yutaka_pg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yutaka_pg/pen/gOoOZwK">
  Untitled</a> by ゆたか (<a href="https://codepen.io/yutaka_pg">@yutaka_pg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 【改行】 `br要素`
テキストを改行する要素です。
htmlでは単にコード上で改行しても反映されません。

空要素のため、終了タグは不要です。
```html
ここで<br>改行されます
```
> ここで<br>改行されます

## 【区切り線】 `hr要素`
話の意味的な区切りを表す要素です。

空要素のため、終了タグは不要です。

> ```html
> １つ目の話
> <hr>
> ２つ目の話
> ```
> １つ目の話<hr>２つ目の話

:::note warn
注意
水平線をひく目的であれば、CSSのborderプロパティなどで設定しましょう
:::

## 【ハイパーリンク】 `a要素`
ハイパーリンクを設定します。
href属性で、リンク先のURLを指定します。

```html
<a href="https://qiita.com/">Qiita</a>
```
> <a href="https://qiita.com/">Qiita</a>

## 【画像】 `img要素`
画像を設定します。
画像サイズなどはCSSで設定することが一般的です。

src（ソース）属性で、画像の保存先のパスを指定します。
alt（オルト）属性で、画像が利用できない場合の説明テキストを記述します。

```html
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2323790/profile-images/1638160198"　alt="サンプル画像" >
```
> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2323790/profile-images/1638160198"　alt="サンプル画像" >


## 【重要語句】 `strong要素`
重要な語句を表す要素です。
```html
<p>
  ここが<strong>重要</strong>です
</p>
```
> <p>
>   ここが<strong>重要</strong>です
> </p>
:::note warn
注意
太字にする目的であれば、CSSのfont-weight:bold;で設定しましょう
:::

## 【強調語句】 `em要素`
強調したい語句を表す要素です。
```html
<p>
  ここを<em>強調</em>します
</p>
```
> <p>
>   ここを<em>強調</em> します
> </p>
:::note warn
注意
斜体にする目的であれば、CSSのfont-style:italic;で設定しましょう
:::

## 【連絡先】 `address要素`
連絡先情報を記述する要素です。
```html
<adress>
  <p>下記よりご連絡先ください</p>
  <p>
    ゆたか: 
    <a href="mailto:yutaka.pg@gmail.com">yutaka.pg@gmail.com</a>
  </p>
</adress>
```
> <adress><p>下記よりご連絡先ください</p><p>ゆたか: <a href="mailto:yutaka.pg@gmail.com">yutaka.pg@gmail.com</a></p></adress>

## 範囲を決めるだけの汎用的な要素
範囲をグループ化するだけの、意味を持たない要素です。
class属性やid属性を付与することで、要素に対しCSSやJavascriptの操作がしやすくなります。

### `div要素`
```html:div要素
<div class="foo" id="bar">ブロックレベル要素になります</div>`
```
### `span要素`
```html:span要素
<span class="foo" id="bar">インライン要素になります</span>
```

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

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

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

また、平日にもくもく作業したり質問しあえる仲間も募集しています。
ご興味がある方は[Twitter](https://twitter.com/yutaka_pg)などでご連絡くださいー！

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