HTML
  • HTML
  • index
    • 概要
    • Living Standard Main
    • 次回チェックする要素
  • Form
    • フォーム共通スタイル
    • フォームバリエーション
GitBook提供
このページ内
  • 基本ルール
  • 厳格な仕様
  • 強い禁則
  • 要注意
  • どちらでも良い
  • 大きなアップデート
  • Picture
  1. index

Living Standard Main

すぐに使いそうな基本仕様キャッチアップをかいつまみ

基本ルール

  • DOCTYPE => <!DOCTYPE html>

  • DOCTYPE宣言を作成できない場合 = <!DOCTYPE html SYSTEM "about:legacy-compat">

厳格な仕様

  • HTTPレスポンスヘッダ

    • XML = application/xhtml+xml、application/xml又はtext/xml

    • HTML = text/html

    • ただしエラーは出ない模様で守らない傾向にもある

強い禁則

  • document.writeとdocument.writelnは使用禁止

要注意

  • br要素は、段落構造を維持したまま段落を複数行に分割する特殊な要素であり、br要素で改行されているからといって、別々の段落だと扱ってはならない。

  • -> 再解釈:文章構造として、段落はpタグで行う。

どちらでも良い

  • svg要素及びmath要素のxmlns属性

大きなアップデート

Picture

  • <picture> 要素は、画像リソースの読み込みを宣言的に行う仕組み

  • レスポンシブ/ユーザー環境最適化の対応のための仕様が大きく変わった

実装例

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>  

参照

前へ概要次へ次回チェックする要素

最終更新 3 年前

Gatsbyは半自動でこの実装が行われるので、再度チェック

自身の実装
各要素にかかわる共通事項:HTML Living Standard各要素別メモ
LogoThe picture element  |  web.devweb.dev