출처 : https://www.boostcourse.org/cs120/lecture/92892?isDesc=false

HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있습니다.
요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 합니다.
이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며,
각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됩니다.

핵심키워드

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에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됩니다.

Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함됩니다.

3. Sectioning

" article, aside, nav, section "

Sectioning에는 문서의 구조와 관련된 요소들이 포함됩니다.

HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 주게 됩니다.

4. Heading

" h1, h2, h3, h4, h5, h6 "

Heading에는 각 section의 header를 정의하는 heading 태그가 포함됩니다.

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에는 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당합니다.

시멘틱 마크업

검색 엔진 최적화는 HTML 코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트를 구성하여, 검색 결과의 상위에 나올 수 있도록 하는 작업입니다.

해당 웹페이지의 내용을 파악하고 검색엔진에 노출이 잘되도록 하기 위해서는 HTML 요소를 적절하게 사용한 시멘틱한 마크업이 필요합니다.

기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다.

HTML5에서 새로 생긴 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 ..."

다만, HTML5 버전에서 생겨난 한가지 예외 경우가 있는데 <a>는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있습니다.

Author And Source

이 문제에 관하여(TIL 21 , html 콘텐츠모델, 시멘틱 마크업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heyho9292/TIL-21-html-콘텐츠모델-시멘틱-마크업

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

TIL 21 , html 콘텐츠모델, 시멘틱 마크업