MDNでHTMLを体系的に学んでみた備忘録

はじめに

みなさんはHTMLをどんなサイト・書籍で学んできましたか?
私はというと、10年前に当初全て無料で閲覧できていたドットインストールで少しかじり、7年前にWebアプリケーションの開発をする中でプロダクトコードから学んだという具合でした。
現在の会社に転職してきて再度フロントエンドの開発もすることになり、思い返してみるとHTMLを体系的に学んでこなかったと思ったので、MDNが公開している「ウェブ開発を学ぶ」をやってみました。
この記事ではなるほどなと思った部分を抜粋して紹介したいと思います。

前提知識

基本的なことから理解を進めようと思っていたので、まずは「ウェブ入門」から私は始めました。
サイドバーにも記載の通り、「完全な初心者はこちら！」となっているので知っている方は飛ばしてしまっても良いかと思います。

HTML

全体的な印象として、結構な頻度で「スクリーンリーダー」というワードが出てきます。
誰もが平等に情報を得られる権利があるので、それを意識したHTMLの組み立てが必要なんだなと考えさせられます。

h1は1ページ1つ

h1,h2,h3,h4,h5,h6は、3つまでしか使わない。
h1は最も主要な見出し, h2は副見出し, h3は副副見出し

ただ強調したいだけで安易使いがちですが、文章の構成として適切な見出しがつけられているか要確認です。

特殊文字

< : &lt; less than
> : &gt; greeter than
" : &quot; quotation
' : &apos; apostrofy
& : &amp; ampaside

私は今まで「何かの呪文なのかな？」と思っていたのですが、略称でした。

明確なリンク語を使う

スクリーンリーダブル
リンクテキストは可能な限り短く

例えば「こちらをクリック」というリンクテキストにした場合、検索エンジンは「こちらをクリック」というサイトなんだと認識してインデックスします。

明確な道標を示す

ダウンロード, ストリーミング, ポップアップ
download属性

アンカーリンクをクリックすることで何が起きるのか、混乱を避けるためにユーザーに示す必要があります。

高度なテキスト整形

様々なタグが紹介されていたので以下に羅列します。

dl, dt,dd
blockquote, cite, q
abbr, title
address
sup, sub
code, pre, var, kbd, samp
time

timeタグ知らなかったのですが、機械可読な日時を示すことができるので、記事系の更新日時はtimeタグを使った方がいいなと思いました。

文章とWebサイト

ヘッダー : header
ナビゲーションバー : nav
メインコンテンツ : main, article, section
サイドバー : aside
フッター : footer

私は知りませんでした。全部divタグでやっちゃってました。

span : 非意味的要素、コンテンツをラップするより良い意味的なテキスト要素が思いつかないか、特定に意味を加えたくない場合にだけ使う
div : ブロックレベルの非意味的要素、使用するセマンティックブロック要素を考えない場合、特定の意味を追加したくない場合に使用。意味的にもっと良い解決策がない場合に限るように注意、使用箇所を最低限抑える

「意味的にもっと良い解決策がない場合に限る」肝に銘じます。

The W3C Markup Validation Serviceでは、タグの欠損や適切にマークアップできているかをチェックできるようです。
metaタグやlinkタグには閉じタグがいらないのですが、自動補完で付与されちゃう場合があるので補完から除外できないか悩み中です。

画像

figure, figcaption

画像にキャプションつけられるタグです。初めて知りました。

動画

以下はタグ, 属性, フォーマット形式になります。

video, audio : source, autoplay, loop, muted, poster, preload, controls
WebM, MP4, WebVTT,track

これら使ったことなかったのですが、勉強になりました。

レスポンシブ画像

アートディレクション問題, 解像度切り替えの問題

img, srcset, sizes
pircure

PCとSPで1つの画像を使ってましたが、srcsetとsizesを使って適切に画像を設定したいなと思いました。
スキルテストをやる中でsizesで躓いたのですが、developer toolsでは画像の切り替えが行われず、物理的にブラウザの横幅を変えると画像が切り替わりました。
pictureタグではdeveloper toolsでも切り替わっていたので、どちらが良いのかな？という感じです。

テーブル

CSSレイアウト手法ではなく、テーブルをレイアウトに使用するのは得策ではありません

今ではflexやgridという便利なCSSプロパティがありますので、それらを使いましょう。

table, tr, th, td
thead, tbody, tfoot

ヘッダーフッターとコンテンツを示すタグは知らなかったので、勉強になりました。

おわりに

今まで感覚でHTMLを書いていましたが、改めて学び直すことでふわっとしていた部分が明確になり、またセマンティックなHTMLはこういうものだという感覚が多少は掴めたかなと思います。
サクサクと読み進めることができ、また各章にあるスキルテストで学んだことを復習できるので、みなさんも時間がある時に眺めてみてはどうでしょうか。
(CSSの章も書こうと思っていましたが、長くなりそうだったのでまた次回書きます)

参考

https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web
https://developer.mozilla.org/ja/docs/Learn/HTML