CSS하는데 내가 원하는 그 위치에 안 있어서 부스트코스 강의를 듣고 정리한 내용.

콘텐츠 모델

Before we start

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

Content Model의 7분류

Metadata Content

base, link, meta, noscript, script, style, title

콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함된다. 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 <head>내에 들어간다는 것이 특징이다.

모르는 태그 정리(클릭)
  • base: 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정하는 태그. 문서에는 하나의 `base` 요소만 존재할 수 있다.
  • link: 해당 문서와 외부 소스 사이의 관계를 정의할 때 사용. 빈 태그로 속성만을 포함한다. 주로 외부 style sheet를 연결할 때 사용
  • noscript: client-side script를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 때 사용

Flow Content

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

문서의 자연스러운 흐름에 의해 배치되는 요소들. Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow Content이다.

Sectioning Content

article, aside, nav, section

문서의 구조와 관련된 요소들. HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이들은 문서의 구조와 아웃라인에 영향을 준다.

Heading Content

h1, h2, h3, h4, h5, h6

각 section의 header를 정의

Phrasing Content

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

문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소

Embedded Content

audio, canvas, embed, iframe, img, math, object, svg, video

외부 콘텐츠를 표현하는 요소들. 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당됨

Interactive Content

a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu, object[usemap], select, textarea, video[controls]

사용자와 상호작용을 하는 요소들. 대표적으로 form 요소들이 이에 해당된다.

Semantic Markup

Before we start

웹이 발전하고 데이터가 방대해지면서 인터넷 마케팅이 급속도로 발달했다. 인터넷 마케팅 방식의 한 방식으로 검색 엔진 최적화가 있다.

검색 엔진 최적화는 HTML 코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트 구성하여, 검색 결과의 상위에 나올 수 있도록 하는 작업인데, 해당 웹페이지의 내용을 파악하고 검색엔진에 노출이 잘되도록 하기 위해서는 HTML 요소를 적절하게 사용한 시멘틱한 마크업이 필요하다.

시멘틱 마크업이란?

시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 의미한다. 애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지이다. 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다.

HTML5 시멘틱 요소

HTML 5에서 새로 생긴 semantic 요소들 Semantic에 관한 MDN 글 읽어보기

  • <article>: 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용. 원칙적으로 article 요소에 담긴 나용은 기사 통합 서비스 등을 통해 따로 배포되거나 재사용할 수 있다.
  • <aside>: 분문 영역의 옆에 사용하는 태그. 주로 사이드바 혹은 콜아웃 박스로 표현된다.
  • <figure>: 책이나 잡지에서 이미지, 차트 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용. 해당 콘텐츠의 위치가 문서의 주요 흐름과는 독립적이기 때문에, 제거해도 문서의 흐름에 영향을 주면 안됨.
  • <figcaption>: <figure> 요소의 caption을 정의할 때 사용
  • <footer>: 문서에 대한 꼬릿말. 저자 정보, 저작권 정보, 맨 위로 돌아가기 등등의 내용을 작성한다.
  • <header>: 문서나 특정 섹션의 헤더를 정의할 때 사용. 보통 도입부에 해당하는 콘텐츠나 네비게이션 링크의 집합 등과 같은 정보를 포함한다.
  • <main>: 문서의 <body> 요소의 메인 콘텐츠를 정의할 때 사용. <main 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련돼 있거나 확장되는 콘텐츠로 구성돼야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 된다.
  • <mark>: highlighted text를 텍스트를 정의할 때 사용. 형광펜 칠하는 것 같은 효과를 준다고 생각하면 됨
  • <nav>: 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용
  • <section>: HTML 문서에 포함된 독립적인 섹션을 정의할 때 사용. 보통 제목 요소를 자식 요소로 포함하고 있는 경우가 많음
  • <time>: 일반 텍스트로 보이는 날짜와 시간 정보가 진짜 날짜, 시간 정보임을 HTML에게 알려주기 위해 사용

Reference

Block & Inline

Before we start

콘텐츠 모델은 사실 나중에 좀 더 복잡하게 분류된 것이고, 그 이전에는 요소들을 크게 블록 레벨과 인라인 레벨로 구분했었다. 블록 레벨 요소와 인라인 레벨 요소는 시각적으로 차이가 아주 명확하므로 지금도 두 가지로 많이 구분한다.

블록 레벨 요소

div, h1~h6, p, ul, li, table …

  • 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소
  • 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄바꿈이 생김
  • 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있음

인라인 레벨 요소

span, i, img, em, strong, a, …

  • 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소
  • 라인의 흐름을 끊지 않고 요소 앞뒤로도 줄바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있음
  • 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없음. 즉, 블록 레벨 요소를 포함할 수 없음!
  • 예외적으로 HTML5에서 <a>는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있음