HTML でよく使用されるタグ、要素、属性

# HTMLとは
HTMLの略はハイパーテキストマークアップランゲージ(Hyper Text Markup Language)。
- Hyper Text：文書内に他の文書へのリンクを埋め込むことで、情報を相互に結びつける仕組み
- Markup language：文書の構造と体裁を明確に記述するためのデータ記述言語

HTMLは、ウェブページを形作るためのツールであり、ハイパーテキストの能力を活かして情報同士を結びつけ、マークアップによって文書の構造を明示します。

# HTML の構成要素
HTMLは以下の図のように3つの要素で構成されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935725/bba58e9f-3c96-4c31-beb3-1d0d4d3791bc.png)

| 種類   | 例                                          | 説明                                                                                              |
|--------|---------------------------------------------|---------------------------------------------------------------------------------------------------|
| タグ   | `<h1>`, `<p>`                              | HTMLの要素を定義するためのマークアップ。例の`<h1>`は見出しを示し、`<p>`は段落を示す。                        |
| 要素   | `<h1>メインタイトル</h1>`, `<p>これは段落です。</p>` | タグで囲まれた内容全体が要素となる。`<h1>`要素はページのメインタイトルを示し、`<p>`要素はテキストの段落を示す。 |
| 属性   | `<a href="https://www.example.com">`, `<img src="image.jpg" alt="画像の説明">` | タグに追加情報を提供するためのもの。`<a>`の`href`属性はリンクの先を示し、`<img>`の`src`属性は画像のパスを示す。  |

# よく使用される「タグ」
| タグ                      | 説明                                         |
|--------------------------|----------------------------------------------|
| `<h1>`                   | ページの主な見出しを示します。               |
| `<p>`                    | 段落を示します。                             |
| `<a>`                    | ハイパーリンクを作成します。                 |
| `<div>`                  | セクションやブロックの構造を作ります。       |
| `<img>`                  | 画像を表示します。                           |
| `<ul>` / `<ol>`         | 順不同リスト / 順序付きリストを作成します。  |
| `<table>`                | 表を作成します。                             |

↓コード記載例
```tag.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タグの例</title>
</head>
<body>
    <h1>ウェブサイトの主な見出し</h1>
    <p>これは段落です。</p>
    <a href="https://www.example.com">リンクテキスト</a>
    <div>ここにセクションの内容があります。</div>
    <img src="image.jpg" alt="説明用画像">
</body>
</html>
```

# よく使用される「要素」
| 要素                                      | 説明                                         |
|-------------------------------------------|----------------------------------------------|
| `<h1>ウェブサイトのタイトル</h1>`        | ページやセクションの主題を表す要素。       |
| `<p>これはサンプル段落です。</p>`         | テキストの段落を表す要素。                   |
| `<a href="https://www.example.com">リンク</a>` | 他のページやリソースへのリンクを示す要素。 |
| `<div>コンテンツのセクション</div>`      | スタイルや構造を管理するためのブロック要素。|

↓コード記載例
```youso.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>要素の例</title>
</head>
<body>
    <h1>メインタイトル</h1>
    <p>これはサンプル段落です。</p>
    <a href="https://www.example.com">こちらにアクセス</a>
    <div>コンテンツのセクションです。</div>
</body>
</html>

```

# よく使用される「属性」
| 属性                | 説明                                           |
|---------------------|------------------------------------------------|
| `href`              | リンクの先を指定するための属性。              |
| `src`               | 画像やフレームのソースを指定するための属性。  |
| `alt`               | 画像が表示できない場合に表示される代替テキスト。|
| `class`             | CSSスタイルを適用するためのクラスを指定する属性。|
| `id`                | 一意の識別子を指定し、JavaScriptやCSSで特定の要素を参照するための属性。|

↓コード記載例
```zokusei.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>属性の例</title>
</head>
<body>
    <h1 id="main-title">ウェブサイトのタイトル</h1>
    <p class="introduction">これはサンプル段落です。</p>
    <a href="https://www.example.com" target="_blank">新しいタブでリンクを開く</a>
    <img src="image.jpg" alt="説明用画像" class="responsive">
</body>
</html>

```