HTMLについて学んだことまとめ

[HTML - MDN - Mozilla](https://developer.mozilla.org/ja/docs/Learn/HTML)で学んだことをまとめます。

## 目次
1. HTMLとは
2. HTMLの基本

## 今回の学習のゴール
- HTMLとは何か、何ができるかを知る
- 実際の使い方について知る

## 1. HTMLとは
- HyperText Markup Languageの略称
- webページのレイアウトに従ってwebページのコンテンツを記述し定義するもの
- マークアップを使用してwebページのコンテンツを記述する
    - マークアップ : 文書構造（テキスト）や視覚表現（装飾）などの情報を、コンピュータが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくこと

```html
ex. <head>, <title>, <body>, <header>, <footer>
```

## 2. HTMLの基本

### ブロック要素とインライン要素
- ブロック要素
    - 段落・リスト・ナビゲーションメニュー・フッターなどのウェブページ上で視認できるブロックを形成する要素
    - インライン要素の中にネスト（入れ子）されることはできないが、他のブロックレベル要素にネストされることはある

```html
<p>first</p><p>second</p><p>third</p>
```
```ブラウザ:ブラウザ
first
second
third
```
- インライン要素
    - ブロックレベル要素の中に包含され、段落全体やコンテンツのグループではなく、ドキュメントの内容の小さな部分だけを囲む要素
    - ドキュメント内に新たな行を表示させず、テキスト段落の中で表示される

```html
<em>first</em><em>second</em><em>third</em>    <!-- 強調要素 -->
```
```ブラウザ:ブラウザ
firstsecondthird
```

### HTML文書の構造

```html
<!DOCTYPE html>    <!-- DOCTYPE宣言 -->
<html>    <!-- ページ全体を囲むタグ -->
  <head>    <!-- HTMLページに必要だが表示しない要素 -->
    <meta charset="utf-8">    <!-- 文字コード -->
    <title>first page</title>    <!-- ページのタイトル ブラウザのタブに表示される -->
    <link rel="stylesheet" href="my-css-file.css">    <!-- HTMLにCSSを追加 -->
  </head>
  <body>
    <!-- webページで表示したいコンテンツを記載する -->
  </body>
  <script src="my-js-file.js"></script>    <!-- HTMLにJavaScriptを追加 -->
</html>
```
- 補足
    - DOCTYPE宣言とは
        - この文書がHTMLであること宣言し、HTMLのバージョンを明記するもの
        - `<!DOCTYPE html>`は、HTML5を宣言するもの
    - `<link>`要素は`<head>`タグの中に置く

### 主なレイアウト要素

| タグ              | 説明                                      |
|:----------------:|:-----------------------------------------:|
| `<main>`             | Webサイト内の各ページで繰り返し使われるヘッダーやナビゲーション、検索フォームやフッター情報などを除いた、その文書内で主な内容となる部分 |
| `<article>`          | 文書内の独立した記事セクション                 |
| `<section>`          | 見出しを伴う文書内の章や節                    |
| `<aside>`            | 補足や脚注、用語の説明など、本筋とは別に触れておきたい内容 |
| `<header>`           | 文書やセクションのヘッダー                    |
| `<nav>`              | 文書内の主要なナビゲーション                  |
| `<footer>`           | 文書やセクションのフッター 著者情報や関連記事へのリンクを記述することが多い |

### 主要な要素

```html
<h1>見出し</h1>

<p>パラグラフはpタグを使う</p>

<p>
    <img src="test.jpg">    <!-- 画像の埋め込み -->
    <a href="https://www.example.com">リンクの名前</a>    <!-- リンクの埋め込み -->
</p>
```

```html
<!-- 順序なしリスト -->
<ul> 
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
</ul>

<!--順序つきリスト -->
<ol>
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
    <li>リストの項目が入る</li>
</ol>
```
```html
<!-- テーブル -->
<table> 
    <tr>    <!-- table row -->
        <th>デーブルヘッダー1</th>    <!-- table header 表の見出し -->
        <th>デーブルヘッダー2</th>
        <th>デーブルヘッダー3</th>
        <th>デーブルヘッダー4</th>
    </tr>
    <tr>
        <td>デーブルデータ1</td>    <!-- table data -->
        <td>デーブルデータ2</td>
        <td>デーブルデータ3</td>
        <td>デーブルデータ4</td>
    </tr>
</table>
```

### HTMLフォーム

```html
<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="button">
    <button type="submit">送信</button>
  </div>
</form>
```
- 補足
    - `<form>`タグはフォームを表す
        - action属性にはフォームで収集したデータを送信すべき場所(URL)を定義する
        - method属性にはデータを送信するために使用するHTTPメソッドを定義する
    - `<label>`タグはフォームの中でフォームの項目名と構成部品（チェックボックス、ラジオボタンなど）を関連付けるためのもの
    - `<input>`タグはフォームにおける入力欄を表す
        - type属性では入力欄の種別を指定できる
            - submit : 送信ボタン
            - text : 1行テキストの入力欄
            - email : メールアドレスの入力欄
            - checkbox : チェックボックス（複数選択可能）
            - radio : ラジオボタン（1つだけ選択可能）
    - `<textarea>`タグは複数行の入力が可能な入力欄を作成するためのもの
    - `<button>`タグは`<form>`タグで作成したフォームの中で汎用的にボタンを作成することができる
        - type属性でボタンの形式を指定する
            - submit : フォーム入力内容を送信する
            - reset : フォーム入力内容をリセットする
            - button : 何もしない汎用的な押しボタン


## 参照
- [HTML - MDN - Mozilla](https://developer.mozilla.org/ja/docs/Learn/HTML)