MDN の HTML 概論を読むまで知らなかったこと

# はじめに
私は約 3 年フロントエンドを中心に開発してきたエンジニアです。
この仕事を始めたときから Vue.js での開発だったため、基本的な HTML や CSS のことを体系的に学んだことがありませんでした。

そこで改めて HTML の基本を学ぶために、[ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn) を読んで学習することにしました。

本記事では、**ガイドを読んでいく中で私が初めて知ったことについてセクションごとにまとめます。**

自分自身の学習内容の定着化を図ると同時に、同じような境遇にある方や、初学者の一助となればと思います。

# 知らなかったこと
## HTML を始めよう
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started

#### a 要素の title 属性を設定するとホバー時にツールチップで設定した内容が表示される
#### 属性の値を囲むクォーテーションはなくても描画可能である
```html
<a href=https://www.google.com/ target=_blank>Google</a>
```
#### 記号の文字参照名の由来
記号 `<` の文字参照 `&lt;` は「less then」
記号 `>` の文字参照 `&gt;` は 「greater than」

## ヘッド部には何が入る? HTML のメタデータ
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

#### iPad 向けのファビコンを設定することができる
```html
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
```

#### defer
`<script>` に `defer` を付けることで html がすべて読み込まれてから js を実行するようになる
[こちら](https://www.wakuwakubank.com/posts/614-javascript-async-defer/)の解説がよりわかりやすくて良かった。


## HTML テキストの基礎
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals

#### 文字を強調したいときは `<b>` `<i>` `<u>` よりも `<em>` や `<strong>` を使う
  - `<b>` `<i>` `<u>` は表示のみを変える効果がある。
  - `<em>` `<strong>` は強調という意味を持たせることができるので、アクセシビリティや SEO などに影響を与える。

:::note warn
`<em>` `<strong>` はスクリーンリーダーでの読み上げで違いが出る、とのことだったが、実際に下記の Chrome 拡張を試したが、違いは出なかった。
- [Read Aloud]( https://chrome.google.com/webstore/detail/read-aloud-a-text-to-spee/hdhinadidafjejdhmfkjgnolgimiaplp?hl=ja)
- [Screen Reader
](https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn)

（実際に読み上げに違いが出る方法を知っている方がいたら教えていただけると嬉しいです。）
:::

## ハイパーリンクの作成
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks

#### a 要素の title 属性の弱点
a 要素の title 属性はマウスホバーで表示されるため、キーボードやタッチパネルでウェブサイトを操作しているユーザーがアクセスしにくいということに留意する。

#### 文書フラグメント
HTMLの特定の部分を指定してリンクを作ることができる。この特定の部分のことを**文書フラグメント**と呼ぶ。
```contacts.html
<h2 id="Mailing_address">Mailing address</h2>
```
```html
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
```

#### 「こちらをクリック」は使わないほうが良い
良い例
```html
<p><a href="https://www.mozilla.org/firefox/">
  Firefox をダウンロード
</a></p>
```

悪い例
```html
<p><a href="https://www.mozilla.org/firefox/">
  こちらをクリック
</a>して Firefox をダウンロード</p>
```

理由は下記のようなことが挙げられる。
- 検索エンジンはリンクテキストの内容を取得して検索結果の画面に表示することがあるから
- リンクテキストは視覚的に注目を集めやすい。注目したときにリンクテキスト自体が「何にリンクされているか」を明確に説明していたほうが分かりやすい。

#### URL をリンクテキストに含めない
URL を含めると、スクリーンリーダーなどで読み上げたとき、アルファベットが１文字ずつ読み上げられて非常に体験が悪くなってしまうため。

#### ダウンロードのリンク
- ファイルなどへのリンクは、そのことが明確であるリンクテキストを使用する。
- ブラウザで開くのではなくダウンロードさせたい download 属性を使用する。

```html
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
   download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>
```

## 高度なテキスト整形
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting

恥ずかしながらこのセクションのほぼ全ての内容が初めて知るものでした。

このセクションでは、やや高度なマークアップに関することを中心に説明しています。

このセクションを読み進めて思ったのは、一部の要素については利用するメリットが分からない、ということです。

そこで、「知らなかったこと」ではなく、「その要素を使うメリット」について調べた結果を紹介します。

### 説明リスト `<dl>` `<dt>` `<dd>`
項目名とそれについての説明を記述するための要素です。
```html
<dl>
  <dt>項目名</dt>
  <dd>この項目の説明</dd>
</dl>
```

#### メリット
- 検索エンジンなどがページの内容を理解するために役立つ。
- スクリーンリーダーなどでリストであることがアナウンスされる。

#### 参考
- [\<dl\>: 説明リスト要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%81%AE%E8%80%83%E6%85%AE)
- [HTMLのdl/dt/ddタグの使い方 - 説明リストを作成する](https://catnose.me/learning/html/dl-dt-dd)

https://catnose.me/learning/html/dl-dt-dd


### 引用 `<blockquote>` `<q>`
``` html
<blockquote cite="https://example.com">
  引用元のテキストなど
</blockquote>

インラインの<q cite="https://example.com">引用</q>
```

#### メリット
- 引用要素を使わず引用して検索エンジンなどにコピーコンテンツだと判定されてしまうことを回避できる

#### 参考
- [引用タグとは？blockquoteの使い方やSEOの関係性を解説 | ウィルゲート](https://www.willgate.co.jp/promonista/blockquote/)

## 文書とウェブサイトの構造
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

#### 色覚/視覚障碍者の割合
- 色覚障碍者は世界の人口の約 4 %
- 視覚障害者は世界の人口の約 4-5 %

思っていたよりも多くて驚きました。

#### `<span>` `<div>` を使うタイミング
`<header>` `<nav>` `<main>` `<section>` など、意味を持つどの要素にも当てはまらないときに初めて `<span>` `<div>` などの**非意味なラッパー**を使うようにする。

## HTML のデバッグ
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML

#### HTML の検証
HTML は構文エラーを出さないため、ブラウザでデバッグしづらい。構文エラーのチェックには、W3C が提供する、[Markup Validation Service](https://validator.w3.org/) を使うのが良い。

（実際に使ってみましたが、すぐに使えて、レポートも丁寧でわかりやすかったです。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474068/b63daa9c-f726-1aef-e27f-142fb4c1cab0.png)

# まとめ
読みながら書いていきましたが、思ったよりも多くのことをリストアップすることになってしまいました。自分のようにフレームワーク先行でフロントエンド開発を始めた人は、同じような状況なのではないでしょうか？

改めて学び直すことで、「あのときの実装はこの要素を使ったほうが良かったな」と思う点がいくつもありました。

今後も他のセクションについても同様に読み進めていきながら記事をまとめてみようと思います。