HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있습니다. 요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 합니다. 이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며, 각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됩니다.
" base, link, meta, noscript, script, style, title "
Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다. 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 <head>
내에 들어간다는 것이 특징입니다.
" 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에 포함됩니다.
" article, aside, nav, section "
Sectioning에는 문서의 구조와 관련된 요소들이 포함됩니다.
HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section>
등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 주게 됩니다.
" h1, h2, h3, h4, h5, h6 "
Heading에는 각 section의 header를 정의하는 heading 태그가 포함됩니다.
"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에는 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함됩니다.
" audio, canvas, embed, iframe, img, math, object, svg, video "
Embedded에는 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당합니다.
" 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>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>
위 코드를 작성해서 화면을 보면 각각의 요소가 같은 모습으로 표현되나 그 의미가 같지는 않습니다.
<b>
는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>
은 중요하다는 의미를 지닙니다. <strong>
은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것입니다.
따라서 중요하다는 의미를 포함할 때는 <b>
가 아닌 <strong>
을 사용하는 것이 적절하고 시멘틱한 마크업입니다.
이외에 <i>
는 단순히 기울어진 글자를 표현하지만, <em>
은 글자의 특정 부분을 강조하는 의미를 지닙니다. <u>
와 <s>
는 단순히 글자에 선을 그은 것이고, <ins>
와 <del>
은 내용이 새롭게 추가되거나 삭제가 되었다는 의미를 지닙니다.
HTML5에서 새로 생긴 Sematic 요소들입니다.
<article>
<aside>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<time>
영상에서 다루지 않은 요소들입니다.(사실 다루지 않은 요소가 훨씬 많죠?)
https://developer.mozilla.org/en-US/docs/Glossary/Semantics
이전 강의에서 요소들을 총 7개의 콘텐츠 모델로 구분했습니다.
콘텐츠 모델은 사실 나중에 좀 더 복잡하게 분류된 것이고, 그 이전에는 요소들을 크게 블록 레벨과 인라인 레벨로 구분했었습니다. 블록 레벨 요소와 인라인 레벨 요소는 시각적으로 차이가 아주 명확하므로 지금도 두 가지로 많이 구분합니다. 이번 강의에서는 블록 레벨 요소와 인라인 레벨 요소의 차이점과 태그의 중첩 가능 관계에 대해 알아보도록 하겠습니다.
부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다.
양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됩니다.
블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있습니다.
" div, h1~h6, p, ul, li, table ..."
하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소입니다.
라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있습니다. 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없습니다.
즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없습니다.
" span, i, img, em, strong, a ..."
다만, HTML5 버전에서 생겨난 한가지 예외 경우가 있는데<a>
는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있습니다.