【HTML】HTMLのbody要素について

# 記事概要
HTMLのbody要素について、まとめる。

# まとめ(body要素)
## header要素
Webページ最上部のヘッダー専用のブロックレベル要素
※head要素とは異なる

## main要素
主要なコンテンツを記載する要素

## footer要素
Webページ最下部のフッター専用のブロックレベル要素

## h1 ~ h6要素(見出し要素)
文章の見出しを作る要素

```html
<h1>見出し1</h1>
<h2>見出し2</h2>
```

## p要素
文章の段落を表す要素

```html
<p>段落</p>
```

## br要素
テキストを改行するための要素

```html
文章はここで<br>改行される
```

## b要素
文字を太くする要素

```html
文章は<b>ここが太字</b>になる
```

## a要素
- テキストをリンクにする要素
- クリックすると特定のページに移動する

### href属性
リンクの移動先を指定する属性

```html
<a href="https://www.google.com/">クリックすると、Googleへ移動</a>
```

[サンプルコード](https://github.com/likapantrip/html_css)の`html/index_a.html`を参照

## span要素
- テキストの一部だけを装飾するために使用される要素
- 部分的にテキストの装飾を変更するために使用する

```html
文章の一部のみ<span>装飾する</span>ことができる
```

## div要素
- 特定の意味が無い要素
- 汎用的に様々な用途で使うことができる
- レイアウトを作成する際に重宝される

## ul要素
順序のないリストを示すブロックレベル要素

## li要素
- リストの項目を示すブロックレベル要素
- ul要素の子要素として記述する

```html
<div>
    リスト
    <ul>
      <li>アイテム1</li>
      <li>アイテム2</li>
      <li>アイテム3</li>
    </ul>
</div>
```

[サンプルコード](https://github.com/likapantrip/html_css)の`html/index_ul_li.html`を参照

## img要素
Webサイト上に画像を表示することができる要素

### src属性
画像の場所を指定する属性

### alt属性
画像が表示されなかった場合に代替テキストなどを表示するための属性

```html
<img src="images/sample-1.jpg" alt="サンプル画像です">
```

[サンプルコード](https://github.com/likapantrip/html_css)の`html/index_img.html`を参照

## form要素
- フォーム関連要素の集まりを表すブロック要素
- `<form>` `</form>`のなかに、入力フォームや送信フォームを作成

### action属性
リクエスト先のURLを指定する属性

```html
<!-- ローカルサーバーで起動しているアプリケーションの場合、「localhost:3000/items」へ、フォームに記載した内容がリクエストとして送信される -->
<form action="/items" method="post">
</form>
```

### method属性
リクエストに使用されるHTTPメソッドを指定する属性

```html
<!-- フォームに記載した内容を送信する際のHTTPメソッドとして、データを送信する際に使用するPOSTを指定している -->
<form action="/items" method="post">
</form>
```

### input要素
フォームの入力欄や実行ボタンなどを作成することができるインライン要素

#### type属性
様々な種類のフォーム部品を作り出せる属性

| type属性 | 装飾結果 |
|---|---|
| text | １行のテキスト入力欄を作成します |
| checkbox | チェックボックスを複数作成することができます |
| radio | 複数の中から１つしか選択できない、ラジオボタンを作ります |
| submit | 送信ボタンを作ります |

#### placeholder属性
入力フォームに仮の文字列を入れることができる属性

#### value属性
- フォームの送信時に、どのような値を送信するのかを決めることができる
- 送信ボタンの場合、value属性で指定した文字が、送信ボタンに表示される

#### name属性
- フォームに入力して送信するデータの名前を設定する
- サーバーとのやり取りに関係するものである

[サンプルコード](https://github.com/likapantrip/html_css)の`html/index_form.html`を参照

### textarea要素
複数行のテキスト入力欄を作成するインライン要素

### label要素
フォームの項目名とフォームの入力要素（画像選択フォーム、プルダウン、チェックボックスなど）を関連付けるための要素

label要素がクリックされたときに、子要素もクリックされたことにしてくれるため、見えないはずのボタンをクリックしたかのように動作させることができる

[サンプルコード](https://github.com/likapantrip/html_css)の`html/index_form-label.html`を参照

### select要素
プルダウンのようなセレクトボックスを作成するための要素

#### name属性
任意の値を指定することで、paramsを通して、その値をコントローラーへ渡すことができる

```html
<!-- キーに対して、値を格納する -->
<select name ="room"></select>
=> {"room" => "値"}
=> {"room" => "1"}

<!-- キーに対する値として、ハッシュを入れ子にすることを示す -->
<select name ="room[user_ids]"></select>
=> {"room" => {"user_ids" => "値"}}
=> {"room" => {"user_ids" => "1"}}

<!-- キーに対する値を、配列として格納することを示す -->
<!-- 1つのキーに対して、複数の値を受け取ることができる -->
<select name ="room[user_ids][]"></select>
=> {"room" => {"user_ids" => ["値"]}}
=> {"room" => {"user_ids" => ["1", "2"]}} 
```

### option要素
select要素の中に記述することで、プルダウンの選択肢になる要素

```html
<select name="fruit">
  <option value="">好きなフルーツを選択してください</option>
  <option>りんご</option>
  <option>オレンジ</option>
  <option>ぶどう</option>
</select>
```

#### value属性
フォームの送信時に、どのような値を送信するのかを決めることができる

```html
<form>
  <select name="room[user_ids]">
    <option value="">チャットするユーザーを選択してください</option>
    <option value="2">User2</option>
    <option value="3">User3</option>
  </select>
  <input type="submit" value="送信" class="form">
</form>
=> User2を選択した場合、「{"room"=>{"user_ids"=>"2"}}」
```

#### 複数の値を連携
```html
<form>
  <div>
    <select name="room[user_ids][]">
      <option value="">チャットするユーザーを選択してください</option>
      <option value="2">User2</option>
      <option value="3">User3</option>
    </select>
    <!-- 画面上非表示だが、値を連携する -->
    <input name="room[user_ids][]" type="hidden" value="1">
  </div>
  <input type="submit" value="送信" class="form">
</form>
=> User2を選択した場合、「{"room"=>{"user_ids"=>["2", "1"]}}」
```

# 参考記事
- [【HTML】HTMLについて](https://qiita.com/likapantrip/items/394727fefa76a4c487d3)
- [【HTML】HTMLのbody要素について](https://qiita.com/likapantrip/items/5cd8625437aefe0614ef)
- [【CSS】CSSについて](https://qiita.com/likapantrip/items/b67d11333f8fda83be79)
- [【CSS】CSSのプロパティについて](https://qiita.com/likapantrip/items/848f3a00c2a7ae9cd409)