TIL 21、htmlコンテンツモデル、ビジュアル寸法

5166 ワード
contents model semantic markup html テキストリンク
ソース:https://www.boostcourse.org/cs120/lecture/92892?isDesc=false
HTML 5には、要素の性質に応じて要素タイプを定義するルールがあります.
要素はこれらのルールを遵守し、HTMLの推奨事項に従う必要があります.
これらの規則では、コンテンツモデルは類似の性質を持つ要素を組み合わせます.
各要素は、1つ以上のコンテンツモデルに属します.

コアキー

  • Metadata
  • Flow
  • Sectioning
  • Heading
  • Phrasing
  • Embedded
  • Interactive

    • 1. Metadata


    "base,
 link, 
meta,
 noscript,
 script,
 style,
 title "
    metadataには、コンテンツのスタイル、動作、または他のドキュメントとの関係など、情報を含む要素が含まれています.
    メタラベル、タイトルラベル、スタイルラベル、リンクラベルは<head>内にあります.

    2. Flow


    "a, abbr, address,
map>area, article, aside,
audio, b, bdo, blockquote,
br, button,
    canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,
    fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img,
    input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
    output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
    style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr "
    Flowには、ドキュメントの自然な流れによって配置される要素が含まれています.
    メタデータに対応するタグの一部だけがFlowから除外され、ほとんどの要素がFlowに含まれています.

    3. Sectioning


    "article, aside, nav, section "
    Sectioningには、ドキュメント構造に関連する要素が含まれます.
    HTML 5で新しく生成された<article>, <aside>, <nav>, <section>などが含まれており、これらのタグはドキュメントの構造やアウトラインに影響します.

    4. Heading


    "h1, h2, h3, h4, h5, h6 "
    見出しには、各セクションの見出しを定義する見出しラベルが含まれます.

    5. Phrasing


    "a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed,
    i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output,
    progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
    var, video, wbr"
    Phrasingには、ドキュメントのテキストまたはテキストを装飾する内部段落レベルの要素が含まれています.

    6. Embedded


    "audio,
 canvas,
 embed,
 iframe,
 img,
 math,
 object,
 svg,
 video "
    Embeddedには、外部コンテンツを表す要素と、オーディオ、ビデオ、画像などのマルチメディアに関連する要素が含まれています.

    7. Interactive


    "a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
    object[usemap], select, textarea, video[controls] "
    Interactiveには、ユーザーと対話する要素が含まれています.その中で最も代表的なのはフォーム要素です.

    シンボルマークアップ


    検索エンジンの最適化のタスクは、HTMLコードから情報を収集し、検索キーワードに基づいて適切なWebサイトを構成し、検索結果の上部に配置することです.
    Webページの内容をよりよく理解し、検索エンジンに露出させるためには、適切なHTML要素を使用してシンボルマークを付ける必要があります.
    これは、マシン(コンピュータ、ブラウザ)がよく理解できることを意味します.

    HTML 5で新しく作成されたSematic要素。

    <article>
<aside>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<time>

    ブロックレベル要素


    親要素の水平領域と完全に一致する要素として表示されます.
    他の要素を配置しないボックスを作成します.これにより、ボックスの上下に改行が発生します.
    ブロックレベル要素には、すべての一般要素(ブロック、行内レベルなど)を含めることができます.
    "div, h1~h6, p, ul, li, table ..."

    行レベル要素


    行に自分の内容と同じボックスの要素を作成します.
    他の行の要素は、行をブレークする流れや前後の改行がないため、他の行の要素の位置にある可能性があります.
    行レベル要素はブロックレベル要素のサブ要素に分類されるため、ブロックレベル要素のサブ要素として使用できません.
    つまり、行レベルの要素にブロックレベルの要素を含めることはできません.
    "span, i, img, em, strong, a ..."
    ただし、HTML 5のバージョンでは、<a>はインラインレベルの要素ですが、その子はブロックレベルの要素であってもよいという例外があります.
    JAVA-基礎理論1 JVM GC
    自動検出漢字GB 18030符号化とUTF-8符号化