콘텐츠 모델
HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있다. 이 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며, 각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 된다.
- 메타데이터(METADATA) 모델
콘텐츠의 style(표현), script(동작)를 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소
ex ) base, link, meta, noscript, script, style, title
이 태그들의 대부분이<head>태그 내에 들어가는 태그들이다.
- 플로우(FLOW) 모델
문서 내에 자연스러운 흐름에 의해 배치되는 요소들이다.
일부 메타데이터 태그를 제외하고 대부분의 요소들이 이 모델에 해당한다.
- 섹셔닝(SECTIONING) 모델
문서의 구조와 관련된 요소들이다. HTML5 에서 새로 생긴 태그들이다.
ex)article, aside, nav, section
- 헤딩(HEADING) 모델
섹션의 헤더를 정의하는 요소들이다.
ex)h1, h2, h3, h4, h5, h6
- 프레이징(PHRASING) 모델
문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이다.
ex) b, i, br, a
- 임베디드(EMBEDDED) 모델
외부 컨텐츠를 표현하는 요소들이다. 멀티미디어 관련 요소들이 주로 있다.
임베디드 모델들은 모두 프레이징 모델이다.
ex) audio, video, img
- 인터렉티브(INTERACTIVE) 모델
사용자와 상호작용 하는 요소들이다. 대표적으로 폼 요소들이 들어간다.
semantic
프로그래밍에서, semantic은 코드가 어떻게 보이는가 보다는,
행이 실행되었을때의 효과나 목적과 같은 코드의 의미를 뜻한다.
HTML5에서 새로 생긴 Semantic 요소들
<article>
- 독립적으로 배포하거나 재사용할 수 있도록 의도된 문서, 페이지, 애플리케이션 또는 사이트의 독립적인 구성을 나타낸다.
<aside>
- 내용이 문서의 주요 내용과 간접적으로만 관련된 문서의 일부를 나타낸다.
<figcaption>
- 상위
<figure>요소의 내용을 설명하는 캡션 또는 범례를 나타낸다.
<figure>
- 이미지와 같은 독립적인 컨텐츠를 표현한다.
<fooster>
- 저작권 데이터나 관련 문서에 대한 링크에 대한 정보를 포함한 바닥글을 나타낸다.
<header>
- 제목 혹은 로고, 검색 양식, 작성자 이름 및 기타 요소가 포함된다.
<main>
<body>의 대부분의 내용을 나타낸다.
<mark>
- 중요성으로 인해 강조 표시된 텍스트를 나타낸다.
<nav>
- 현재 문서 내에서 메뉴, 목차 등의 다른 문서로의 탐색 링크를 제공한다.
<section>
- 문서의 독립 실행형 섹션을 나타낸다. 일반적으로 섹션마다 제목을 필요로 한다.
<time>
- 시간의 특정 지점 또는 구간 표현. 날짜를 기계가 읽을 수 있는 형식으로 변환하는 datetime 속성이 포함될 수 있으므로 더 나은 검색 엔진 결과 또는 알림 같은 사용자 지정 기능이 가능하다.
블록레벨과 인라인레벨
콘텐츠 모델로 분류되기 전에는 크게 블록 레벨 요소와 인라인 레벨 요소로만 구분했었다. 지금도 블록레벨과 인라인 레벨로 많이 구분하는데, 시각적으로 차이가 명확하기 때문이다.
블록레벨 요소
부모 요소의 영역을 가로로 다 채워서 표현 된다.
양 옆으로 다른 요소가 배치되지 않게 박스를 생성한다.
ex) <div>, <p>, <h>
인라인 레벨 요소
한 줄에서 본인이 가지고 있는 내용만큼의 요소 박스를 만든다. 그 줄의 흐름을 끊지 않아서 요소 앞뒤로 줄바꿈이 일어나지 않고, 뒤에 이어서 다른 인라인 요소가 올 수 있다.
ex) <span>, <a>
HTML에서는 기본적으로 블록 레벨 요소가 인라인 레벨 요소의 자손으로 들어가는 것을 허용하지 않는다. 인라인 레벨 요소는 블록 레벨 요소를 감쌀 수 없다는 말이다.
한가지 예외 케이스가 있는데, 인라인 레벨인 <a>요소에는 블록 레벨 요소도 자손으로 올 수 있다.
