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

8月 19, 2020

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 動画のテキストトラックを表示
  • コンバータ　Miro Video Converter や Audacity

• iframe
  • src属性はJavaScriptで設定することで、ページのロードを早めることが出来る。
  • sandboxを使う
  • X-Frame-Options 他のサイトにコンテンツが埋められることを制御できる

• SVG <circle> <rect> <feColorMatrix> (変換行列を使用してい色を変える) <animate> <mask>

• <img> srcset属性 sizes属性
• <picture> <source>
  • 小サイズかつ高品質なWebPやPEG-2000は、ブラウザサポートにむらがある

HTML tables

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