Content Models 의 7 분류
- Metadata Content
- Flow Content
- Sectioning Content
- Heading Content
- Phrasing Content
- Embedded Content
- Interacitve Content
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 요소들이 이에 해당합니다.
시맨틱 마크업 이란?
시맨틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다.
시맨틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다.
애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지입니다.
시맨틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다.
시맨틱 마크업 하기
그럼 어떻게 하면 브라우저가 코드를 잘 이해할 수 있을까요?
간단합니다. 정해진 약속을 잘 지키면 됩니다.
구체적으로 설명하자면 마크업 할 때는 의미에 맞는 태그, 요소를 사용하는 것이고
문서를 표현할 때는 구조화를 잘 해주는 것입니다.
정해진 약속대로 코드를 작성하게 되면 결국 기계뿐 아니라 사람도 이해하기 쉬운 코드가 됩니다.
예를 들어보자면, <b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지닙니다.
<strong>은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것입니다.
따라서 중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용하는 것이 적절하고 시맨틱한 마크업입니다.
이외에 <i>는 단순히 기울어진 글자를 표현하지만, <em>은 글자의 특정 부분을 강조하는 의미를 지닙니다.
<u>와 <s>는 단순히 글자에 선을 그은 것이고, <ins>와 <del>은 내용이 새롭게 추가되거나
삭제가 되었다는 의미를 지닙니다.
HTML5에서 새로 생긴 Sematic 요소들입니다.
- <article> 문서나 사이트에서 독립된 컨텐츠 영역을 지정.
- <aside> 페이지의 왼쪽 혹은 오른쪽에 위치한 컨텐츠 영역.
- <figcaption> figure 요소의 제목을 지정합니다.
- <figure> 문서 작성시 본문에 삽입하는 사진이나 차트, 소스코드등을 블록화 하는 태그.
- <footer> 문서나 section의 하단 정보 영역.
- <header> 문서나 section의 상단 정보 영역.
- <main> 문서의 주 컨텐츠 영역을 지정합니다.
- <mark> 강조된 중요한 텍스트.
- <nav> 하이퍼링크를 모아놓은 부분
- <section> 제목이 있는 주제별 콘텐츠 그룹.
- <time> 텍스트가 시간 정보인것을 표시
www.w3schools.com/html/html5_semantic_elements.asp
HTML Semantic Elements
HTML Semantic Elements Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content
www.w3schools.com
정확한 내용은 해당 링크가 도움이 될 것입니다.
블록 레벨 요소
부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다.
양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됩니다.
블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있습니다.
" div, h1~h6, p, ul, li, table ..."
예외로 <h1> ~ <h6>(headings) 요소와 <p> 요소는 블록 레벨 요소지만, 내부 요소로 Phrasing Content만 허용합니다.
인라인 레벨 요소
하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소입니다.
라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있습니다.
인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없습니다.
즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없습니다.
" span, i, img, em, strong, a ..."
다만, HTML5 버전에서 생겨난 한가지 예외 경우가 있는데 <a>는 인라인 레벨 요소지만
자손으로 블록 레벨 요소를 가질 수 있습니다.
'웹 > 웹 이론 정리' 카테고리의 다른 글
| [웹 개발] 선택자 (1) (0) | 2021.01.08 |
|---|---|
| [웹 개발] CSS 이해하기 (0) | 2021.01.08 |
| [웹 개발] HTML 태그 (3) (0) | 2021.01.07 |
| [웹 개발] HTML 태그 (2) (0) | 2021.01.07 |
| [웹 개발] HTML 태그 (1) (0) | 2021.01.06 |
