はじめに
私は約 3 年フロントエンドを中心に開発してきたエンジニアです。
この仕事を始めたときから Vue.js での開発だったため、基本的な HTML や CSS のことを体系的に学んだことがありませんでした。
そこで改めて HTML の基本を学ぶために、ウェブ開発を学ぶ | MDN を読んで学習することにしました。
本記事では、ガイドを読んでいく中で私が初めて知ったことについてセクションごとにまとめます。
自分自身の学習内容の定着化を図ると同時に、同じような境遇にある方や、初学者の一助となればと思います。
知らなかったこと
HTML を始めよう
a 要素の title 属性を設定するとホバー時にツールチップで設定した内容が表示される
属性の値を囲むクォーテーションはなくても描画可能である
<a href=https://www.google.com/ target=_blank>Google</a>
記号の文字参照名の由来
記号 < の文字参照 < は「less then」
記号 > の文字参照 > は 「greater than」
ヘッド部には何が入る? HTML のメタデータ
iPad 向けのファビコンを設定することができる
<!-- 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 を実行するようになる
こちらの解説がよりわかりやすくて良かった。
HTML テキストの基礎
文字を強調したいときは <b> <i> <u> よりも <em> や <strong> を使う
-
<b><i><u>は表示のみを変える効果がある。 -
<em><strong>は強調という意味を持たせることができるので、アクセシビリティや SEO などに影響を与える。
<em> <strong> はスクリーンリーダーでの読み上げで違いが出る、とのことだったが、実際に下記の Chrome 拡張を試したが、違いは出なかった。
（実際に読み上げに違いが出る方法を知っている方がいたら教えていただけると嬉しいです。）
ハイパーリンクの作成
a 要素の title 属性の弱点
a 要素の title 属性はマウスホバーで表示されるため、キーボードやタッチパネルでウェブサイトを操作しているユーザーがアクセスしにくいということに留意する。
文書フラグメント
HTMLの特定の部分を指定してリンクを作ることができる。この特定の部分のことを文書フラグメントと呼ぶ。
<h2 id="Mailing_address">Mailing address</h2>
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
「こちらをクリック」は使わないほうが良い
良い例
<p><a href="https://www.mozilla.org/firefox/">
Firefox をダウンロード
</a></p>
悪い例
<p><a href="https://www.mozilla.org/firefox/">
こちらをクリック
</a>して Firefox をダウンロード</p>
理由は下記のようなことが挙げられる。
- 検索エンジンはリンクテキストの内容を取得して検索結果の画面に表示することがあるから
- リンクテキストは視覚的に注目を集めやすい。注目したときにリンクテキスト自体が「何にリンクされているか」を明確に説明していたほうが分かりやすい。
URL をリンクテキストに含めない
URL を含めると、スクリーンリーダーなどで読み上げたとき、アルファベットが１文字ずつ読み上げられて非常に体験が悪くなってしまうため。
ダウンロードのリンク
- ファイルなどへのリンクは、そのことが明確であるリンクテキストを使用する。
- ブラウザで開くのではなくダウンロードさせたい download 属性を使用する。
<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>
高度なテキスト整形
恥ずかしながらこのセクションのほぼ全ての内容が初めて知るものでした。
このセクションでは、やや高度なマークアップに関することを中心に説明しています。
このセクションを読み進めて思ったのは、一部の要素については利用するメリットが分からない、ということです。
そこで、「知らなかったこと」ではなく、「その要素を使うメリット」について調べた結果を紹介します。
説明リスト <dl> <dt> <dd>
項目名とそれについての説明を記述するための要素です。
<dl>
<dt>項目名</dt>
<dd>この項目の説明</dd>
</dl>
メリット
- 検索エンジンなどがページの内容を理解するために役立つ。
- スクリーンリーダーなどでリストであることがアナウンスされる。
参考
引用 <blockquote> <q>
<blockquote cite="https://example.com">
引用元のテキストなど
</blockquote>
インラインの<q cite="https://example.com">引用</q>
メリット
- 引用要素を使わず引用して検索エンジンなどにコピーコンテンツだと判定されてしまうことを回避できる
参考
文書とウェブサイトの構造
色覚/視覚障碍者の割合
- 色覚障碍者は世界の人口の約 4 %
- 視覚障害者は世界の人口の約 4-5 %
思っていたよりも多くて驚きました。
<span> <div> を使うタイミング
<header> <nav> <main> <section> など、意味を持つどの要素にも当てはまらないときに初めて <span> <div> などの非意味なラッパーを使うようにする。
HTML のデバッグ
HTML の検証
HTML は構文エラーを出さないため、ブラウザでデバッグしづらい。構文エラーのチェックには、W3C が提供する、Markup Validation Service を使うのが良い。
（実際に使ってみましたが、すぐに使えて、レポートも丁寧でわかりやすかったです。）
まとめ
読みながら書いていきましたが、思ったよりも多くのことをリストアップすることになってしまいました。自分のようにフレームワーク先行でフロントエンド開発を始めた人は、同じような状況なのではないでしょうか？
改めて学び直すことで、「あのときの実装はこの要素を使ったほうが良かったな」と思う点がいくつもありました。
今後も他のセクションについても同様に読み進めていきながら記事をまとめてみようと思います。