MDN Web docs ウェブ開発を学ぶ (HTML – Structuring the Web)

MDNで、HTMLの基礎を再確認した時の覚書です。普段あまり使わないタグを中心に、書き留めておきます。


目次

HTMLの学習:ガイドとチュートリアル

HTML概論

  •  Open Graph Data は、Facebook が開発した、ウェブサイトに豊富なメタデータを与えるメタデータプロトコル
    • <meta property="og:title" content="...">
    • Twitterも同様なメタデータがある
    • <meta name="twitter:title" content="...">
  • iPadのホーム画面に保存された時用の高解像度アイコンの指定
    • <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://...">
  • できるだけ相対リンクを使う。絶対リンクはブラウザの効率が下がる
  • 説明リスト <dl> <dt> <dd>
  • 引用 <blocquote> <q>
  • 略語 <abbr>
    • <abbr title="...">xxx</abbr>
  • HTML文書作者の連絡先 <address>
  • 上付きと下付き <sup> <sub>
  • 変数名 <var>
  • キーボード入力 <kbd>
  • コンピュータの出力 <samp>
  • 日付 <time>
    • <time datetime="2020-08-15">2020/8/15</time>
  • HTML要素リファレンス
  • インライン文字列意味付け
  • コンテンツを構造化
    • ヘッダー <header>
    • ナビゲーションバー <nav>
    • メインコンテンツ <main> <article> <section> <div>
    • サイドバー <aside>
    • フッター <footer>
  • <div> は、より良い意味的な解決策がない場合にのみ使用する
  • 改行 <br>
  • 水平線 <hr>
  • HTMLのセクションとアウトラインの使用
  • Markup Validation Service

マルチメディアとその埋め込み方

  • 要素へのラベル付け属性 aria-labelledby
  • 代替テキスト属性 longdesc
  • 図面 <figure>
  • 図面キャプション <figcaption>
  • 画像の説明属性 alt
    • 説明が不要な場合は、alt="" として、スクリーンリーダーに読ませないようにするのが良い。
    • または、role="presentation" という ARIA role属性を使う。
  • CSS背景画像 background-image
    • 画像に意味がある場合は、HTML画像、意味がない装飾用であれば、CSS背景画像が良い
    • CSS背景画像の方が制御しやすい
  • controls属性 video audioの操作画面表示
  • WebVTT 動画のテキストトラックを表示
WebVTT

サンプルのhttp://iandevlin.github.io/mdn/video-player-with-captions/で字幕が表示されることを確認できますが、ソース(https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions)をダウンロードして、ローカルのhtmlで動画を表示すると、字幕が出ませんでした。ローカルファイルへのアクセス許可が必要なのか?

  • iframe
    • src属性はJavaScriptで設定することで、ページのロードを早めることが出来る。
    • sandboxを使う
    • X-Frame-Options 他のサイトにコンテンツが埋められることを制御できる
  • SVG <circle> <rect> <feColorMatrix> (変換行列を使用してい色を変える) <animate> <mask>
  • <img> srcset属性 sizes属性
  • <picture> <source>
    • 小サイズかつ高品質なWebPやPEG-2000は、ブラウザサポートにむらがある
srcset

Chrome 84 で、srcsetが動作しなかった。edge 84では動作した。pictureによる切り替えは、chromeも出来た。

HTML tables

  • <colgroup>
  • <caption>
    • summary属性は、HTML5使用では推奨されていない
  • tableへの構造の追加 <thead> <tfoot> <tbody>
  • scope属性 ヘッダがどのセルのヘッダーであるかをスクリーンリーダーに正確に示す