苦手なフロントエンド開発について学ぶ「HTML編」

# 始めに
[苦手なフロントエンド開発について学ぶ「目次」](https://qiita.com/Tomo27/items/1d671e579a9ccdd1ed63)のの記事から派生する「HTML編」になります。

:warning:　：この記事を読むと、HTMLの基本が理解でき、簡単なWebページが作れるようになります。

自信のリスキニングを込めて記載していますが、「初心者にも理解しやすく」をモットーに記載していきます。
しかし、読んでいるうちに不明点や深堀してほしい箇所等あればコメントください！
「良いね・ストック」お願いします！



:warning: ：当記事に示された意見はわたし個人のものであり、所属する組織を代表するものではありません。

## HTMLとは？

**HTML（HyperText Markup Language）**は、Webページの構造を記述するための**マークアップ言語**です。
どんなWebページにするかはこのHTMLで記述し作成します。

Webページの中で表示するテキストや画像、リンク、動画、フォームなどの要素を定義し、それらの配置や意味を指定する役割を持ちます。

---

### **HTMLの主な特徴**

1. **Webページの骨組みを作成**  
   - HTMLはWebページの「構造」を定義します。
   - 見出し、段落、リスト、リンク、画像などの基本的な要素を記述。

2. **マークアップ言語**  
   - 人間が読める形式で記述し、コンピュータにその意味を伝えます。
   - HTMLでは「タグ」と呼ばれる特定のキーワードを使います。

3. **静的なコンテンツを提供**  
   - HTML単体では動的な動作は提供せず、主に固定されたコンテンツを表示。
   - 動的な動作を実現するにはJavaScriptなどが必要。

4. **標準化された仕様**  
   - HTMLの仕様は**W3C（World Wide Web Consortium）**や**WHATWG**によって策定され、ブラウザがその仕様に基づいて表示を行います。

---

### **HTMLの構成要素**

1. **タグ（Tag）**  
   - HTMLの基本単位であり、コンテンツの種類や意味を示します。
   - **開始タグ**と**終了タグ**で要素を囲むことが多い。
   - 例:  
     ```html
     <h1>見出し</h1>
     <p>段落テキスト</p>
     ```

2. **要素（Element）**  
   - タグとその中身を含む構造全体を指します。
   - 例: `<h1>見出し</h1>` は見出し要素。

3. **属性（Attribute）**  
   - 要素に追加情報を与える。
   - 例:  
     ```html
     <img src="image.jpg" alt="画像の説明">
     ```

4. **コメント**  
   - コード内でメモや説明を残すための記述。
   - 例:  
     ```html
     <!-- これはコメントです -->
     ```

---

### **よくある間違い**

- タグを閉じ忘れ
HTMLの多くのタグは2対になっていることが多いです。
タグにもよりますが **先頭のタグを作った際終わりのタグもセットで作る**ようにしましょう。
```HTML
<p>この段落は… → <p>この段落は…</p>
```
- 属性の間違い
下記例ではsrcと記載すべきところsourceと記載してしまっています。正しい属性を記載しましょう。
```HTML
<img source="image.jpg"> → <img src="image.jpg" alt="画像説明">
```
- 入れ子構造の誤り
HTMLでは表現の仕方として入れ子構造（タグとタグの間にタグや要素を入れること）ができます。
正しい順序で設定しないと期待した表示がされないことがあります
```HTML
<p><h2>タイトル</h2></p> → <h2>タイトル</h2>
```


### **HTMLの基本構造**

HTML文書の基本的な構造は以下の通りです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLの基本構造</title>
</head>
<body>
    <h1>見出し</h1>
    <p>これはHTML文書の基本構造の例です。</p>
</body>
</html>
```

- **`<!DOCTYPE html>`**: 文書がHTML5であることを宣言。
- **`<html>`**: HTML文書全体を囲むタグ。
- **`<head>`**: メタ情報やスタイル、スクリプトなどを定義。
- **`<body>`**: ページの主なコンテンツを記述。

---

### **HTMLのバージョン**
- HTMLはバージョンを重ねて進化してきました。
  - **HTML 1.0**: 初期の仕様（1991年）。
  - **HTML 4.01**: 広く普及したバージョン（1999年）。
  - **HTML5**: 現在の主流バージョン。マルチメディア要素やセマンティクス（意味付け）の強化。

---

### **HTMLの役割**
1. **セマンティクス（意味付け）**
   - コンテンツの意味や役割を明確にする。
   - 例: `<header>`（ヘッダー）、`<article>`（記事）、`<footer>`（フッター）。

2. **アクセシビリティ**
   - 視覚障害者用のスクリーンリーダーなど、支援技術に対応。

3. **他の技術と連携**
   - CSSやJavaScriptと組み合わせて、スタイルや動きを追加。

---

### **HTMLのタグ一覧とその意味**
HTMLのタグは、ウェブページの構造やコンテンツを定義するために使用されます。タグは**要素の種類や意味を示す**役割を持ち、以下のカテゴリに分類されます。

---

## **1. 文書の基本構造を定義するタグ**
| タグ | 意味 |
|------|------|
| `<!DOCTYPE html>` | 文書がHTML5であることを宣言する。 |
| `<html>` | HTMLドキュメント全体を囲む。 |
| `<head>` | メタ情報（タイトルや文字コードなど）を定義。 |
| `<title>` | ページのタイトルを指定（ブラウザのタブに表示）。 |
| `<meta>` | メタデータ（文字エンコーディング、説明、キーワードなど）を指定。 |
| `<link>` | CSSなどの外部リソースを読み込む。 |
| `<style>` | CSSを埋め込む。 |
| `<script>` | JavaScriptを埋め込む。 |


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PwYVWXa" data-pen-title="HTML例" data-user="TomokiF127" 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/TomokiF127/pen/PwYVWXa">
  HTML例</a> by Tomoki (<a href="https://codepen.io/TomokiF127">@TomokiF127</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

---

## **2. テキスト関連のタグ**
| タグ | 意味 |
|------|------|
| `<h1>` ～ `<h6>` | 見出し（`h1`が最も大きく、`h6`が最も小さい）。 |
| `<p>` | 段落を定義。 |
| `<br>` | 改行（空要素）。 |
| `<hr>` | 水平線（区切り線）。 |
| `<strong>` | 強調（太字）。 |
| `<em>` | 重要性を示す強調（斜体）。 |
| `<small>` | 文字を小さくする。 |
| `<mark>` | ハイライト表示。 |
| `<blockquote>` | 引用文を示す。 |
| `<code>` | ソースコードを表示。 |
| `<pre>` | 改行や空白を保持したまま表示。 |

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="emOxVYG" data-pen-title="テキスト関連のタグ" data-user="TomokiF127" 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/TomokiF127/pen/emOxVYG">
  テキスト関連のタグ</a> by Tomoki (<a href="https://codepen.io/TomokiF127">@TomokiF127</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

---

## **3. リスト関連のタグ**
| タグ | 意味 |
|------|------|
| `<ul>` | 順序なしリスト（箇条書き）。 |
| `<ol>` | 順序付きリスト（番号付き）。 |
| `<li>` | リスト項目（`<ul>` や `<ol>` の中で使用）。 |
| `<dl>` | 説明リスト。 |
| `<dt>` | 説明リストの用語。 |
| `<dd>` | 説明リストの説明。 |

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WbePMbx" data-pen-title=" リスト関連のタグ" data-user="TomokiF127" 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/TomokiF127/pen/WbePMbx">
   リスト関連のタグ</a> by Tomoki (<a href="https://codepen.io/TomokiF127">@TomokiF127</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

---

## **4. ハイパーリンク関連のタグ**
| タグ | 意味 |
|------|------|
| `<a>` | ハイパーリンクを作成。 |
| `target="_blank"` | 新しいタブでリンクを開く属性。 |

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LEPqQEg" data-pen-title="ハイパーリンク関連のタグ" data-user="TomokiF127" 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/TomokiF127/pen/LEPqQEg">
  ハイパーリンク関連のタグ</a> by Tomoki (<a href="https://codepen.io/TomokiF127">@TomokiF127</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

---

## **5. 画像・メディア関連のタグ**
- <img> タグに alt 属性を必ず付けましょう。（アクセシビリティ向上、SEO対策）のため

| タグ | 意味 |
|------|------|
| `<img>` | 画像を表示（`src`属性で指定）。 |
| `<audio>` | 音声ファイルを埋め込む。 |
| `<video>` | 動画ファイルを埋め込む。 |
| `<source>` | `audio` や `video` 内で異なるフォーマットのメディアを指定。 |

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="raBPJVp" data-pen-title="画像・メディア関連のタグ" data-user="TomokiF127" 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/TomokiF127/pen/raBPJVp">
  画像・メディア関連のタグ</a> by Tomoki (<a href="https://codepen.io/TomokiF127">@TomokiF127</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

---

## **6. テーブル関連のタグ**
| タグ | 意味 |
|------|------|
| `<table>` | テーブル（表）を作成。 |
| `<tr>` | テーブルの行を作成。 |
| `<th>` | テーブルのヘッダーセル（見出し）。 |
| `<td>` | テーブルのデータセル。 |
| `<caption>` | テーブルの説明を追加。 |

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MYgLQav" data-pen-title="テーブル関連のタグ" data-user="TomokiF127" 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/TomokiF127/pen/MYgLQav">
  テーブル関連のタグ</a> by Tomoki (<a href="https://codepen.io/TomokiF127">@TomokiF127</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

---

## **7. フォーム関連のタグ**
| タグ | 意味 |
|------|------|
| `<form>` | フォームを作成。 |
| `<input>` | テキスト入力・ボタンなどのフォーム要素。 |
| `<textarea>` | 複数行のテキスト入力エリア。 |
| `<button>` | ボタンを作成。 |
| `<select>` | ドロップダウンリスト。 |
| `<option>` | ドロップダウンリストの項目。 |
| `<label>` | 入力欄のラベル。 |

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LEPqQpX" data-pen-title="フォーム関連のタグ" data-user="TomokiF127" 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/TomokiF127/pen/LEPqQpX">
  フォーム関連のタグ</a> by Tomoki (<a href="https://codepen.io/TomokiF127">@TomokiF127</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

---

## **8. セマンティックタグ（HTML5以降）**
| タグ | 意味 |
|------|------|
| `<header>` | ヘッダー（サイトやセクションの上部）。 |
| `<nav>` | ナビゲーションメニュー。 |
| `<section>` | セクション（意味を持つまとまり）。 |
| `<article>` | 記事（独立したコンテンツ）。 |
| `<aside>` | 補足情報（サイドバーなど）。 |
| `<footer>` | フッター（ページやセクションの下部）。 |

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ByBMYjo" data-pen-title="セマンティックタグ（HTML5以降）" data-user="TomokiF127" 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/TomokiF127/pen/ByBMYjo">
  セマンティックタグ（HTML5以降）</a> by Tomoki (<a href="https://codepen.io/TomokiF127">@TomokiF127</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

---


## **まとめ**
HTMLはウェブページの基礎となる言語です。CSSでデザインを追加し、JavaScriptで動きを与えることで、HTMLを活用したより洗練されたウェブページを作成できます。
HTMLのタグは「**構造・意味を持たせる**」ために使用されます。  
セマンティックなタグを適切に使うことで、可読性やSEO（検索エンジン最適化）が向上し、アクセシビリティも向上します。  
CSSやJavaScriptと組み合わせることで、デザインや動作を付加できます。

また今回紹介したタグの他にも多くのタグが存在します。
気になった方はぜ調べてみてはいかがでしょうか？

ではまた！:wave: