HTML Living規格とは?


Living Standardは「生きている基準」と直訳した.
簡単に言えば、HTML文法などを規定の基準とすることができます.

構文

  • HTML要素はHTMLタグと属性からなる
  • 一対の開閉ラベルからなる
  • 一部の要素は開いているマークのみからなる
  • 常に開いているタグに属性を挿入
  • ロマンチックなHTML:多くの要素に固有の意味がある.この意味の目的は、人間が必要とする言語ではなく、機械が理解できる言語でHTMLを符号化することです.SEO、アクセス性、

    1.タグを開く: これは. 要素の名前(この例ではp)と括弧. 設定します. 
    2.終了フラグ: 要素名の前にスラッシュ(/)がある以外は、 オープンタグと同じです.エレメントの末尾(この例では段落の末尾)にあります.
    3.内容: 要素の内容ですが、この場合は単純なテキストです.
    4.要素: タグを開く、閉じる、およびコンテンツを総称して要素(element)と呼びます.

    document element

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <p>This is my page</p>
      </body>
    </html>
  • <!DOCTYPE html>:文書形式.DTD(Document type Definition)と呼ばれ、ドキュメントタイプに関する情報を提供します.削除すると、ブラウザは「quirkモード」(quirksmode:サブ互換性モード)を使用してhtmlをレンダリングします.クォークモードでは、各ブラウザの実装方法が若干異なるため、動作が異なる可能性があるため、ドキュメントの上部で宣言する必要があります.
  • <html></html><html>  要素.この要素はページ全体の内容を含み,基本要素とも考えられる.ドキュメントの最上位要素.langプロパティでドキュメントの主な言語を設定できます.プライマリ言語の設定は、検索エンジンとスクリーンリーダーの動作に影響します.
  • <head></head><head>  要素.この要素はホームページユーザーには表示されませんが、検索結果に表示されるキーワード、ホームページの説明、CSSスタイル、charactersetdeclaration などのHTMLページのすべての内容を表示します.
  • <meta charset="utf-8">:HTML文書の文字コードを設定するための要素 UTF-8. 例で指定したUTF-8は、 ほとんどの文字が含まれています.この設定を使用して、ページに含まれるすべてのテキストを処理します.
  • <title></title><title>  要素.この要素を使用 ページのタイトルを設定し、ページをロードするブラウザタブに表示するタイトル.ページタイトルは、ページがブックマークされたときにページを説明するためにも使用されます.一度だけ使用しなければなりません.
  • <body></body><body>  要素.テキスト、画像、ビデオ、ゲーム、再生可能なトラックなどのページに表示されるすべての内容が含まれています. 含む.
  • metadata

  • charset:文書の文字コード状態を示す.通常はUTF-8に設定され、世界中のすべての言語をサポートします.
  • name="author":ページを作成した開発者の名前
  • name="description":ページ説明情報
    これは,検索エンジンがユーザに結果画面を出力する際の重要な考慮要因である.
  • name="viewport":モバイル機器にユーザ画面サイズの値を設定します.必須ではありませんが、最近はスマートフォンやタブレットなどのモバイル機器にも多く接続されているので、必ず加入しなければなりません.
  • http-equiv="X-UA-Compatible”:ベース命令(pragma direction:コンパイラ特定機能指定)と呼びます.ブラウザの動作を示すために使用します.X-UA-Compatible属性値は、IEブラウザがどのような形式でページをレンダリングするかを指定することができ、content='IE=edge'IE 8以降では常に標準モードでレンダリングされる.
  • すべてのタグに注意すべきタグ


    The document element

  • html
  • Document metadata

  • head
  • title - meta
  • link
  • style
  • Sections - body - article - section

  • nav
  • aside
  • h1, h2, h3, h4, h5, h6
  • hgroup
  • header
  • footer
  • address
  • Grouping content - p

  • blockquote
  • ol
  • ul
  • menu
  • li
  • dl
  • dt
  • dd
  • figure
  • figcaption
  • main
  • div
  • Text-level semantics - a

  • em
  • strong
  • cite
  • q
  • dfn
  • abbr
  • code
  • var
  • span
  • br
  • wbr
  • Embedded content

  • img
  • picture
  • source
  • iframe
  • video
  • audio
  • track
  • Tabular data
  • table
  • caption
  • colgroup
  • col
  • tbody
  • thead
  • tfoot
  • tr
  • td
  • th
  • Forms

  • form
  • fieldset
  • legend
  • label
  • input
  • button
  • textarea
  • select
  • option
  • Interactive elements
  • details
  • summary
  • dialog