HTML5의 특징

jkpark104·2021년 9월 11일

html

1. HTML 이란?

HyperText Markup Language : 웹 페이지의 의미와 구조를 정의하는 언어

2. HTML 5의 특징

(1) Content Models

content models

기존 Html 에서 Block과 Inline으로 구분되던 요소를 새롭게 그룹화 하여 정의한 모델
하나의 요소가 여러 그룹에 속해 있을 수 있다.

Sectioning Root
- <section> | <article>과 같이 계층 구조로 구분되지 않고 독립적인 콘텐츠로 분리돼 아웃라인에 영향을 주지 않는 콘텐츠
- 조상 섹셔닝 루트와 독립적으로 아웃라인을 생성한다.
- <blockquote> | <body> | <figure> | <fieldset> ...
Metadata Content
- 웹에 직접적으로 표시되지 않으면 문서와 문서 간의 관계를 설정한다.
- <meta> | <style> | <title> | <link> ...
Flow Content
- body 요소에 들어가는 대부분의 요소들
Sectioning Content
- 대부분 HTML5에서 새롭게 추가된 요소들
- 제목과 내용을 포함한 범위를 지정하는 콘텐츠
- 헤딩과 아웃라인을 가진다.
- <article> | <aside> | <nav> | <section>
Heading Content
- <h1> | <h2> | ...
- Section의 제목을 나타낸다.
- 문서의 아웃라인을 고려하여 사용해야 한다.
Phrasing Content
- 문서의 텍스트를 나타내며 프레이징 콘텐츠를 통해 문단을 구성한다.
- cf. 다른 요소를 포함하지 않는 <a> 는 프레이징 콘텐츠가 될 수 있다.
- 프레이징 콘텐츠는 프레이징 콘텐츠와 임베디드 콘텐츠를 포함할 수 있다.
Embedded Content
- 문서 안의 외부자원 또는 HTML이 아닌 다른 언어로 표현되는 콘텐츠
- <audio> | <canvas> | <iframe> | <svg> | <video> ...
Interactive Content
- 어떤 기능을 조작할 수 있는 콘텐츠
- <a> | <button> | <iframe> ...
Palpable Content
- 구체적으로 보여지고 이해할 수 있는 콘텐츠 요소
- 하나 이상의 요소가 존재해야 하며 숨김 상태가 아니여야 한다.
Script-supporting Elements
- 사용자에 대한 기능 등에 해당하는 스크립트를 지원하는데 사용된다.
- <script>

(2) Outline Algorithm

정보 구조를 명확히 할 수 있도록 HTML5에서 도입한 개념
직접적으로 아웃라인을 구성하는 요소로는 Heading | Sectioning Root | Sectioning Content가 있다.

즉, 헤딩 뿐만 아니라 콘텐츠 모델의 아웃라인을 구성하는 요소를 활용해 웹페이지의 개요(아웃라인)를 생성 할 수 있다.