Html5 웹접근성 - html5 webjeobgeunseong

마크업 언어의 분류

마크업 언어에는 크게 순차적 마크업 언어(procedural markup language)와 서술적 마크업 언어(descriptive markup language)가 있습니다. 순차적 마크업 언어는 한 문서에 기본 데이터, 구조, 표현 정보가 저장되며, 문서 내용을 어떻게 시각적으로 표현할 것인가에 대한 정보를 비롯하여 폰트, 색상, 여백, 줄 간격 등 표현에 관련된 다수의 추가 정보가 포함됩니다. 반면 서술적 마크업 언어는 기본 데이터와 구조만으로 이루어져 있기 때문에 제목, 부제목, 작가, 서론, 주소, 참고 도서 등의 구조 정보만 가집니다.

🌑순차적 마크업(Descriptive Markup)

서술적 마크업은 문서가 기본 데이터와 구조(의미)만 가지기 때문에 결과적으로 문서 구조와 표현 정보를 분리(Document-View Pattern의 일종)할 수 있습니다. 또 분리된 표현 정보를 필요로할 때 다양하게 적용할 수 있고, 텍스트를 기반으로 하기 때문에 이질적인 환경에서 데이터 교환 형태로도 적합합니다. 대표적인 순차적 마크업 언어인 HTML은 웹 문서를 제작하기 위한 언어로 설계되었기 때문에 범용적 전자 문서나 전자 데이터를 표현하는 기능은 충분하지 않았습니다. 이 때문에 서술적 마크업인 XML(eXtensible Makeup Language)이 등장했습니다.

🌑서술적 마크업(Procedural Markup)

서술적 마크업은 문서가 기본 데이터와 구조(의미)만 가지기 때문에 결과적으로 문서 구조와 표현 정보를 분리(Document-View Pattern의 일종)할 수 있습니다. 또 분리된 표현 정보를 필요로할 때 다양하게 적용할 수 있고, 텍스트를 기반으로 하기 때문에 이질적인 환경에서 데이터 교환 형태로도 적합합니다. 대표적인 순차적 마크업 언어인 HTML은 웹 문서를 제작하기 위한 언어로 설계되었기 때문에 범용적 전자 문서나 전자 데이터를 표현하는 기능은 충분하지 않았습니다. 이 때문에 서술적 마크업인 XML(eXtensible Makeup Language)이 등장했습니다.

순차적인 마크업의 기능과 서술적인 마크업의 장점을 모두 수용한 마크업 언어로는 XHTML이 있습니다. XHTML은 HTML은 XML로 재 구축한 마크업 언어로, HTML의 단점을 보완하여 좀 더 폭넓게 사용할 수 있습니다. 간혹 HTML이 표준이 아니고 XHTML이 표준이기 때문에 XHTML을 사용해야 한다고 오해하는 경우가 있습니다. 하지만 HTML과 XHTML 모두 웹 문서를 제작할 때 사용하는 웹표준 기술이므로 상황이나 환경에 따라 제작자가 선택할 수 있습니다.

HTML 마크업의 기초

📌태그(tag)

태그는 시작 태그와 종료 태그로 나눌 수 있으며 "<"와 ">"로 둘러싸여 있습니다. 기본 형식은 시작 태그의 경우 <tag>의 형태를 가지며, 종료 태그의 경우에는 </tag> 형태를 가집니다. 일부 태그의 경우, 종료 태그를 가지지 않는 경우도 있는데, 이를 ‘빈 요소(empty element)’라고 합니다.

📌속성(attribute)

시작 태그는 필요에 따라 정해진 속성을 가질 수 있으며, 사용할 수 있는 속성은 태그마다 다를 수 있습니다. 또한 시작 태그 내에 여러 개의 속성을 선언할 수도 있는데, 이 경우 속성과 속성은 공백으로 구분하여 지정해야 합니다. 속성에는 값을 가지지 않는 논리 속성도 있습니다.

📌요소(element)

시작 태그와 종료 태그 모두를 포함하여 ‘요소(element)’라고 합니다. 요소는 다음과 같은 항목으로 구성되어 있습니다.

XHTML의 서식

XHTML은 HTML을 XML로 재정의한 언어이기 때문에 요소(element)와 속성(attribute)에는 차이가 없습니다. 하지만 기존의 HTML이 사용하던 느슨한 규칙이 아니라 XML 방식의 엄격한 규칙을 적용하기 때문에 문법상 HTML과 XHTML은 몇 가지 차이점이 있습니다.

📌요소 사용 시 종료 태그의 생략 불가능

HTML에서는 P, TR, TH, TD, LI 등의 요소명을 사용할 때 종료 태그를 생략할 수 있지만, XHTML 에서는 이를 허용하지 않습니다. 따라서 모든 요소는 반드시 시작과 종료가 선언 되어야합니다.

HTML  : <P><IMG SRC="images/back.gif" alt="뒤로">
XHTML : <p><img src="images/back.gif" alt="뒤로"></p> 

1
2

📌요소명과 속성명에 소문자 사용

HTML에서는 요소명과 속성명에 대소문자를 구분하지 않고 사용했지만, XHTML에서는 모든 요소명과 속성명에 소문자만 사용할 수 있습니다.

HTML  : <P><IMG SRC="images/back.gif" alt="뒤로"></P>
XHTML : <p><img src="images/back.gif" alt="뒤로"></p>

1
2

📌빈 요소 사용 시 <요소명 /> 형식으로 기술

HTML에서는 빈 요소의 경우 시작 태그만 기술해도 되지만, XHTML에서는 모든 요소에 종료의 표현을 기술해야 합니다. 따라서 빈 요소는 HTML과 XHTML이 다르게 표현합니다.

HTML  : <P><IMG SRC="images/back.gif" alt="뒤로"></P>
XHTML : <p><img src="images/back.gif" alt="뒤로" /></p>

1
2

📌속성에 속성값 생략 불가능

HTML에서는 몇 가지 속성의 경우 속성값을 생략할 수 있지만, XHTML에서는 이러한 단축 표기가 허용되지 않으므로 반드시 속성값을 지정해야 합니다.

HTML  : <OPTION selected>…</OPTION>
XHTML : <option selected="selected">…</option>

1
2

📌잘못된 중첩 사용 불가능

HTML에서는 규칙을 느슨하게 적용하여 중첩을 잘못해도 문제가 발생하지 않는 경우가 있었지만, XHTML에서는 잘못된 중첩이 허용되지 않습니다.

HTML  : <P><span><em>…</span></em></P>
XHTML : <p><span><em>…</em></span></p>

1
2

📌모든 속성값에 인용 부호 사용

HTML에서는 속성에 값을 지정할 때 인용 부호를 생략할 수 있지만, XHTML에서는 속성값은 시작과 끝을 반드시 인용 부호로 감싸야 합니다.

HTML  : <IMG SRC=cake.jpg alt=케이크>
XHTML : <img src="cake.jpg" alt="케이크" />

1
2

📌<, >, &을 <, >, &로 변환하여 사용

HTML과 XHTML 모두 문자 참조(특수 문자)의 경우 Characters Entity Name이나 Characters Entity Code로 변환해야 합니다. 다음의 예와 같이 &의 문자 참조를 Entity Name으로 지정할 경우에는 &로, Entity Code로 지정할 경우에는 &로 지정합니다.

<h2>웹 표준 & 웹 접근성</h2> (특수문자를 직접 입력한 경우)
<h2>웹 표준 &amp; 웹 접근성</h2> (특수문자를 이름으로 입력한 경우)
<h2>웹 표준 &#38; 웹 접근성</h2> (특수문자를 코드로 입력한 경우)

1
2
3

📌주석은 바르게 사용하고 그 안에 --(더블대시) 사용 불가

HTML과 XHTML에서 사용하는 올바른 주석은 입니다. 특히 해당 주석에 영역을 구분할 목적으로 더블대시를 반복해서 사용하지 않아야 합니다.

<!-- 주석 삽입 -->
<!---- -- 잘못된 사용 방법. --(더블대시)는 연결하여 사용하지 않는다.-- ---->
<!-- ****** 유효한 주석 표현 방법 ****** -->
<!-- ------ 유효한 주석 표현 방법 ------ -->

1
2
3
4

HTML5의 탄생

HTML5가 탄생하기 이전까지 HTML의 최초 버전은 1993년에, 최신 버전은 1999년에 발표되었습니다. 그러나 당시 웹 표준화 기구인 W3C(World Wide Web Consortium)에서는 HTML5에 대한 계획을 가지고 있지 않았습니다. 그 대신 XHTML1.0을 XML 기반으로 구체화하기 위한 작업에 몰두하고 있었습니다. 그러나 XHTML2.0은 견고한 웹을 구현한다는 취지아래 기존 웹과의 하위 호환성을 고려하지 않는 치명적인 문제를 안고 있었습니다.

W3C의 이러한 행보에 반기를 들고 HTML 및 관련 기술들을 발전시키는 데 관심이 있는 사람들의 모임인 WHATWG(Web Hypertext Application Technology Working Group)가 탄생했습니다. WHATWG는 2004년 애플, 모질라 재단, 오페라 소프트웨어가 공동으로 설립한 공개 그룹으로, 이 공개 그룹을 통해 Web Application1.0과 Web Forms2.0을 만들어 냈습니다.

WHATWG의 활동이 성과를 거두기 시작하고, 2007년 3월 W3C가 공개적으로 XHTML 2.0의 실패를 인정한 후 새롭게 HTML을 개발하기로 결정하면서 WHATWG의 표준안을 대부분 수용하여 HTML5가 탄생하게 됩니다.

초기의 웹은 단순히 하이퍼텍스트 문서(HTML)를 웹 브라우저에 나타내는 수준에 지나지 않았으며, 웹표준 기술이 지원하지 못하는 부분을 비표준적인 태그들과 Active X, Flash, Flex, SilverLight 등의 써드파티(Third Party) 플러그인이 대신하게 되었습니다. 이로 인해 여러 웹브라우저별로 화면이 다르게 보이거나 특정 웹브라우저에서만 동작하는 웹 애플리케이션이 만들어지는 등 각종 호환성 문제가 발생하였습니다. 그 결과 개발자에게는 개발의 어려움을, 사용자에게는 웹 브라우저 선택 제한과 각종 플러그인의 설치라는 불편함을 안겨주었습니다.

이러한 문제점과 기능적인 한계를 안고 있던 기존 HTML은 HTML5에서 새롭게 추가된 요소와 다양한 API들을 통해 한 단계 발전된 웹 구현과 접근성 및 호환성 극대화를 목표로 삼게 됩니다.

HTML4.01, XHTML1.0과 HTML5의 차이점

HTML5는 HTML4.01, XHTML1.0과 동일한 마크업 언어입니다. 기존 HTML과 HTML5의 차이점은 새롭게 도입된 콘텐츠 모델이라는 개념과 구조 관련 요소가 추가되었다는 점을 들 수 있습니다. 또한 기존에 사용했던 요소 중에서 의미가 변한 요소도 있습니다. 이 부분은 앞으로 자세히 살펴보겠습니다.

콘텐츠 모델(Content Models)

기존 HTML 기반의 마크업에서는 일반적으로 인라인 요소(Inline Element)와 블록 요소(Block Level Element)로 구분하는 정도의 개념만 존재하였지만, HTML5에서는 좀 더 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화하였는데, 이를 HTML5의 콘텐츠 모델(Content Models)이라고 합니다.

특히 HTML5에 추가된 콘텐츠 모델이란, ‘어떤 요소에 어떤 콘텐츠를 포함해야 하는지’, ‘어떤 요소가 어떤 요소를 포함할 수 있는지’를 정의한 것을 말합니다. 이 콘텐츠 모델이라는 개념을 통해 자식 요소로 포함 할 수 있는 카테고리에 제한을 두었으며, 이와 반대로 자식 요소가 작성될 수 있는 카테고리에 제한을 두었습니다. 이런 HTML5의 콘텐츠 모델은 단순히 기존 HTML에서의 문법적인 변화만을 의미하는 것으로 그치지 않고 구조와 구성을 중시하는 마크업으로 진화했다는 점을 이해해야 할 것입니다.

HTML5의 카테고리(Category)에는 Sectioning Root, Metadata Content, Flow Content, Sectioning Content, Heading Content, Phrasing Content, Embedded Content, Interactive Content, Palpable Content, Script-supporting Elements, Transparent Content 등의 그룹이 있으며, 하나의 요소가 여러 그룹에 속해 있을 수도 있고, 그렇지 않을 수도 있습니다.

다음 그림은 HTML5의 콘텐츠 모델에서 각 카테고리 간의 관계를 나타낸 것입니다.

🌑섹셔닝 루트(Sectioning Root)

<blockquote>, <body>, <detail>, <fieldset>, <figure>, <td>

1

몇몇 요소는 섹셔닝 루트라는 그룹으로 구분합니다. 섹셔닝 루트에 속하는 요소는 section이나 article 요소와 같이 장이나 절과 같은 계층 구조로 구분되지 않고 독립적인 콘텐츠로 분리되기 때문에 아웃라인에 영향을 주지 않습니다.

🌑** 메타데이터 콘텐츠(Metadata Content)**

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

1

메타데이터는 문서의 정보를 포함하는 메타데이터, 스타일 표현을 위한 style 요소, 행동을 설정하는 script 요소들을 나타냅니다. 기본적인 웹 브라우저에 직접적으로 표시되지 않으며, 문서(document)와 문서 간의 관계를 설정합니다.

🌑플로우 콘텐츠(Flow Content)

<a>, <abbr>, <address>, <area>(<map> 요소의 자손인 경우), <article>, <aside>, 
<audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, 
<code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, 
<dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h2>, <h2>, 
<h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, 
<ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <meter>, 
<nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, 
<q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, 
<strong>, <style>(scoped 속성이 있는 경우) <sub>, <sup>, <svg>, <table>, 
<textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>

1
2
3
4
5
6
7
8
9
10

HTML5의 콘텐츠 모델 관계도에 표시한 것과 같이 메타데이터 콘텐츠 요소 중 일부를 제외하고 문서 본문에 해당하는 body 요소에 들어가는 대부분의 요소들이 플로우 콘텐츠 모델에 속하며, 이 중에서 area, link, meta, style 요소는 조건부로 플로우 콘텐츠가 됩니다.

🌑섹셔닝 콘텐츠(Sectioning Content)

<article>, <aside>, <nav>, <section>

1

섹셔닝 콘텐츠는 대부분 HTML5에서 새롭게 추가된 요소들이며, 제목과 그 내용을 포함한 범위를 지정하는 콘텐츠를 나타냅니다. 모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가집니다.

🌑헤딩 콘텐츠(Heading Content)

<h2>, <h2>, <h3>, <h4>, <h5>, <h6>

1

헤딩 콘텐츠는 섹션의 제목을 나타냅니다. 문서의 아웃라인을 고려하여 사용해야 합니다.

🌑프레이징 콘텐츠(Phrasing Content)

<a>, <abbr>, <area>(<map> 요소의 자손인 경우), <audio>, <b>, <bdi>, <bdo>, <br>, 
<button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, 
<embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, 
<map>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, 
<q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, 
 <sub>, <sup>, <svg>, <textarea>, <time>, <u>, <var>, <video>, <wbr>

1
2
3
4
5
6

프레이징 콘텐츠는 문서의 텍스트를 나타내며, 그 텍스트를 문단 내부 레벨로 마크업하는 요소들입니다. 프레이징 콘텐츠가 모여 문단을 구성합니다. a 요소와 같은 일부 요소들은 콘텐츠로 다른 요소를 포함하지 않는다는 전제하에 조건부로 프레이징 콘텐츠가 되기도 합니다. 프레이징 콘텐츠로 분류되는 요소의 대부분은 플로우 콘텐츠 전체를 포함할 수 없으며, 프레이징 콘텐츠로 분류된 요소만을 포함할 수 있습니다. 또한 프레이징 콘텐츠는 텍스트 이외에 임베디드 콘텐츠를 포함할 수 있습니다.

🌑임베디드 콘텐츠(Embedded Content)

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

1

임베디드는 ‘포함된’이라는 뜻을 가지고 있으며, 문서 안에 외부 자원(‘외부 리소스’라고 불리기도 함) 또는 HTML이 아닌 다른 언어로 표현되는 콘텐츠를 말합니다. 외부 자원에는 이미지, 동영상, 플러그인, 아이프레임 콘텐츠 등이 있고, 다른 언어로 된 콘텐츠에는 수학 공식을 표현하는 MathML과 SVG 등이 있습니다.

🌑인터랙티브 콘텐츠(Interactive Content)

<a>, <audio>(controls 속성이 있는 경우),<button>, <details>, <embed>, <iframe>, 
<img>(usemap 속성이 있는 경우), <input>(type 속성이 hidden이 아닌 경우), <keygen>, 
<label>, <object>(usemap 속성이 있는 경우), <select>, <textarea>, 
<video>(controls 속성이 있는 경우)

1
2
3
4

인터랙티브 콘텐츠는 사용자가 어떤 기능을 조작할 수 있는 (상호 작용) 콘텐츠를 말합니다. 예를 들면, 회원가입 정보를 입력한 후 [확인] 버튼을 누른다거나, 문서에 포함된 동영상을 재생한다거나, 링크를 클릭하는 것 등을 의미합니다. audio, img, input, object, video 요소는 이러한 특성을 바탕으로 조건부 인터랙티브 콘텐츠가 됩니다.

🌑팰퍼블 콘텐츠(Palpable Content)

<a>, <abbr>, <address>, <article>, <aside>, <audio>(controls 속성이 있는 경우), 
<base-img>, <bdi>, <bdo>, <blockquote>, <button>, <canvas>, <cite>, <code>, 
<data>, <details>, <dfn>, <div>, <embed>, <form>, <fieldset>, <figure>, 
<dl>(dl 요소의 자식 요소로 하나 이상의 이름과 값으로 구성되어 있는 경우), <em>, <footer>, 
<h2>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <i>, <iframe>, <img>, 
<input>(hidden 속성 값이 아닌 경우), <ins>, <kbd>, <keygen>, <label>, <main>, 
<map>, <mark>, <math>, <menu>(toolbar 속성이 있는 경우), <meter>, <nav>, <object>, 
<ol>(자식 요소로 하나 이상의 li 요소를 포함한 경우), <output>, <p>, <pre>, <progress>,
<q>, <ruby>, <s>, <samp>, <section>, <select>, <small>, <span>, <strong>, 
<sub>, <sup>, <svg>, <table>, <textarea>, <time>, <u>, <var>, <video>, <span>,
<ul>(자식 요소로 하나 이상의 li 요소를 포함한 경우)

1
2
3
4
5
6
7
8
9
10
11

팰퍼블 콘텐츠는 기존 콘텐츠 모델에 새롭게 추가된 개념으로 구체적으로 보여지고 이해할 수 있는 콘텐츠 요소를 말하며, 최소한 하나 이상의 요소가 존재해야 합니다. 이때 해당 요소는 숨김 상태여서는 안됩니다.

🌑스크립트 지원 요소(Script-supporting Elements)

스크립트 지원 요소는 요소 자체가 어떤 정보를 표현하지는 않지만 사용자에 대한 기능 등에 해당하는 스크립트를 지원하는 데 사용됩니다.

🌑트랜스 패어런트 콘텐츠(Transparent Content)

<table>, <audio>, <canvas>, <del>, <ins>, <map>, <noscript>, <object>, <video>

1

모든 요소는 콘텐츠 모델을 가지지만, 앞에서 설명한 카테고리에 속하지 않은 경우도 있습니다. 이러한 요소들을 ‘트랜스 패어런트(Transparent)’라고 합니다. 트랜스페어런트 콘텐츠는 투명하다는 의미가 아니라 트랜스 패어런트 콘텐츠 요소와 그 안에 담긴 콘텐츠를 바꾸어 마크업해도 HTML5 문법에 오류가 없다는 것을 의미합니다.

아웃라인 알고리즘(Outline Algorithm)

HTML5에서는 정보 구조를 명확히 할 수 있도록 ‘아웃라인 알고리즘’(Outline Algorithm)이라는 개념이 도입되었습니다. 아웃라인 알고리즘은 웹 페이지의 정보 구조를 판별할 수 있는 개념으로, 책의 목차와 비슷합니다.

HTML 5에서 추가된 많은 요소들은 대부분 아웃라인 알고리즘과 관련이 있습니다. 그중에서도 직접적으로 아웃라인을 구성하는 요소에는 헤딩 콘텐츠, 섹셔닝 콘텐츠 그리고 섹셔닝 루트 요소 등이 있습니다.

HTML5의 아웃라인 구성은 HTML5 Outliner 웹 사이트에서 확인할 수 있습니다.

다음의 예제를 통해 아웃라인 알고리즘을 알아보겠습니다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="utf-8">
  <title>div 요소를 사용한 문서의 아웃라인</title>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <div class="branding">
        <h2>HTML5</h2>
      </div>
      <div class="gnb">
        <h2>메인 메뉴</h2>
        <ul>
          <li><a href="#">콘텐츠 모델</a></li>
          <li><a href="#">아웃라인 알고리즘</a></li>
        </ul>
      </div>
    </div>
    <div id="main">
      <div class="section">
        <h2>콘텐츠 모델 이란?</h2>
        <p>어떤 요소에 어떤 콘텐츠를 포함해야 하는지 또 어떤 요소가 어떤 요소를 포함할 수 
         있는지를 정의한 것을 말합니다.</p>
      </div>
      <div class="section">
        <h2>콘텐츠 모델의 분류</h2>
        <div class"article">
          <h2>메타데이터 콘텐츠</h2>
          <p>Metadata 콘텐츠는 다른 콘텐츠의 표현과 행동을 설정하거나 문서와 문서의 
           관계를 설정할 때 사용합니다.</p>
        </div>
        <div class="article">
          <h2>플로우 콘텐츠</h2>
          <p>Flow 콘텐츠는 웹 페이지상에 직접 표시되지 않는 일부 메타데이터를 
           제외하고 거의 모든 요소들이 이 그룹에 속합니다.</p>
        </div>
      </div>
    </div>
    <div id="footer">
      <p>Copyright &copy; webCafe</p>
    </div>
  </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

먼저 기존 HTML4.01나 XHTML1.0에서 사용되던 div 요소만으로 콘텐츠를 그룹핑하여 의미를 부여했을 경우의 아웃라인을 살펴보겠습니다.

1. HTML5
2. 메인 메뉴
3. 콘텐츠 모델 이란?
4. 콘텐츠 모델의 분류
5. 메타데이터 콘텐츠
6. 플로우 콘텐츠

이번에는 header, nav, section, article 등과 같이 아웃라인에 영향을 미치는 섹셔닝 요소를 사용하여 콘텐츠를 구성한 후, 아웃라인을 확인해보겠습니다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
 <meta charset="utf-8">
 <title>섹셔닝 요소를 사용한 문서의 아웃라인</title>
</head>
<body>
 <div id="wrapper">
  <header id="header">
   <div class="branding">
    <h2>HTML5</h2>
   </div>
   <nav class="gnb">
    <h2>메인 메뉴</h2>
    <ul>
     <li><a href="#">콘텐츠 모델</a></li>
     <li><a href="#">아웃라인 알고리즘</a></li>
    </ul>
   </nav>
  </header>
  <div id="main">
   <section class="section">
    <h2>콘텐츠 모델 이란?</h2>
    <p>어떤 요소에 어떤 콘텐츠를 포함해야 하는지 또 어떤 요소가 어떤 요소를 포함할 수 
    있는지를 정의한 것을 말합니다.</p>
   </section>
   <section class="section">
    <h2>콘텐츠 모델의 분류</h2>
    <article class"article">
     <h2>메타데이터 콘텐츠</h2>
     <p>Metadata 콘텐츠는 다른 콘텐츠의 표현과 행동을 설정하거나 문서와 문서의 
     관계를 설정할 때 사용합니다.</p>
    </article>
    <article class="article">
     <h2>플로우 콘텐츠</h2>
     <p>Flow 콘텐츠는 웹 페이지상에 직접 표시되지 않는 일부 메타데이터를 
     제외하고 거의 모든 요소들이 이 그룹에 속합니다.</p>
    </article>
   </section>
  </div>
  <footer id="footer">
   <p>Copyright &copy; webCafe</p>
  </footer>
 </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

HTML5 Outliner 사이트에서 확인한 아웃라인 구성 결과를 살펴보면, 제목을 같은 h2 요소로 마크업 했지만 해당 제목 요소의 구성이 포함된 섹셔닝 요소에 따라 달라진 것을 확인할 수 있습니다.

1. HTML5
   1. 메인 메뉴
   2. 콘텐츠 모델 이란?
   3. 콘텐츠 모델의 분류
      1. 메타데이터 콘텐츠
      2. 플로우 콘텐츠

section이나 article 등의 요소로 콘텐츠를 구분하지 않고 div 요소만을 사용했을 경우, 제목인 h2 요소는 모두 같은 계층으로 구성되어 있는 것을 확인할 수 있습니다. 이처럼 HTML5에 추가된 섹셔닝 요소들은 제목 관련 요소와 함께 아웃라인을 구성하는 중요한 요소로 사용됩니다.

다양한 API의 추가

HTML5의 커다란 변화 중 하나로는 다양한 API(Application Programming Interface)의 추가를 들 수 있습니다. API란, 프로그램을 개발할 때 필요한 기본 기능을 의미합니다. 새로운 프로그램을 만들 때 사용하는 프로그래밍 언어(C 언어, Java, JavaScript 등) 차원에서 제공되거나 프로그램이 구동되는 환경을 의미하는 플랫폼에서 만들어져 제공되며 프로그램 개발자는 API를 활용하여 실제 필요로 하는 기능을 완성할 수 있습니다.

HTML5에서는 자바스크립트(JavaScript) 기술을 좀 더 편리하게 이용할 수 있도록 다양한 API를 지원하고 있습니다. HTML5에 추가된 API는 다음과 같습니다.

📌오프라인 웹 구현을 위한 API

오프라인에서 동작할 수 있는 웹 기능을 구현하기 위한 API로, Web Strorage, Web SQL Database, IndexedDB, Application Cache 등의 API가 추가되었습니다.

• Web Storage : 브라우저에 데이터를 저장하기 위한 공간으로, 쿠키와 비교했을 때 크기 제한과 유효 기간이 없고, 데이터가 서버로 전송되지 않으며, JavaScript 객체를 저장할 수 있다는 장점을 가지고 있습니다.
• Web SQL Database/Indexed Database : Web SQL Database와 Indexed Database API는 클라이언트(웹 브라우저)에서 관리되는 데이터베이스를 제어할 수 있는 API로 구성되어 있습니다.
• Application Cache : Application Cache는 웹 애플리케이션을 오프라인에서 사용하는 데 필요한 리소스(HTML, CSS, JS, 이미지 등)를 클라이언트 쪽에 캐시하기 위한 기능으로, 이를 활용하면 리소스가 로컬에 캐시된 상태에서 웹브라우저가 네트워크에 접속하지 않고 캐시된 리소스를 이용할 수 있습니다.

📌실시간 커뮤니케이션 API

• Web Workers : Web Workers는 메인 스레드(UI)와 독립적인 백그라운드 프로세스로 처리되는 스크립트를 말하며, 이를 활용하면 웹브라우저 내에서 자바스크립트로 멀티스레드 프로그램을 구현할 수 있습니다.
• Web Socket : Web Socket은 웹 브라우저와 서버 간 양방향 전이중 통신(Full Duplex)을 구현한 Web Socket 프로토콜을 이용할 수 있는 API 입니다.
• Notifications : Notifications API는 운영 체제에 독립적인 플랫폼 수준의 알림 메시지를 보여주는 API 입니다.

📌파일/하드웨어 접근 API

웹브라우저에서 로컬 저장 장치 간 파일을 주고받을 수 있는 API와 웹 브라우저가 설치된 단말기의 하드웨어에 접근할 수 있는 API 입니다.

• File API(Desktop Drag-In, Desktop Drag-Out) : File API를 이용하면 로컬 파일 시스템과 웹 브라우저 간에 파일을 주고받을 수 있습니다.
• Geolocation : Geolocation은 웹 브라우저가 설치되어 있는 단말기(데스크톱, 스마트폰 등)의 GPS 장치를 구동하여 현재 위치 정보를 받아오는 기능을 정의한 API 입니다.
• Device Orientation : Device Orientation은 단말기의 센서를 이용하여 현재 방향과 기울기가 같은 정보를 구할 수 있는 API 입니다.
• Speech Input : Speech Input은 단말기의 마이크로폰을 이용하여 음성을 입력받은 후 이를 문자로 바꿔주는 새로운 입력 방식입니다.

📌GUI를 위한 API

• Drag & Drop : HTML4.01에서는 Drag & Drop을 구현하기 위해 직접 자바스크립트로 개발하거나 UI 관련 자바스크립트 라이브러리를 이용해야 했지만, HTML5에서는 Drag & Drop API를 이용하여 쉽게 구현할 수 있습니다.

HTML5의 서식

HTML5는 HTML4.01이나 XHTML1.0 문법을 모두 허용하기 때문에 기존에 사용하던 마크업 문법을 그대로 사용할 수 있습니다. 가령 HTML4.01에서 종료 태그의 생략을 허용했던 방식이나 XHTML1.0에서 빈 요소 선언 시 <요소명 /> 형식으로 기술했던 방식 모두를 허용합니다. 이는 하위 호환성을 위한 정책으로, 과거 HTML4.01로 제작된 문서가 문법적인 느슨함으로 인해 발생했던 문제가 되풀이될 수 있기때문에 좀 더 엄격한 규칙을 정하고 마크업 문서를 작성하는 것이 바람직할 것입니다.

다음은 HTML5 문서에서 사용할 수 있는 서식을 정리한 것입니다.

📌종료 태그의 처리

HTML5는 종료 태그를 생략할 수도 있습니다. 그러나 모든 요소가 종료 태그를 생략해도 되는 것은 아니기 때문에 종료 태그가 생략할 수 있는 요소를 사전에 확인해야 합니다. 그러나 HTML5에서 종료 태그를 생략하는 것이 가능하다고 하더라도 기존 XHTML1.0의 규칙처럼 시작과 종료 태그를 정확히 명시하여 정형식(Well-Formed) 구조로 마크업할 것을 권장합니다.

📌대소문자의 사용

HTML5는 시작 및 종료 태그는 물론 속성에 대문자 또는 소문자를 사용할 수도 있습니다. 그러나 기존 XHTML1.0 규칙처럼 소문자를 사용할 것을 권장합니다.

📌빈 요소(Empty Element)

HTML에서 meta, link, img, br, input 등 종료 태그를 가지고 있지 않은 요소를 ‘빈 요소(empty element)’라고 하는데, 기존 HTML4.01에서는 <img> 형식으로, XHTML1.0에서는 <img /> 형식으로 선언해야 하며, HTML5에서는 두 가지 방식 모두 허용하고 있습니다.

📌속성(attribute)과 값(Value)

논리 속성의 경우 속성값을 지정 또는 생략할 수 있습니다.

속성 값은 인용 부호를 생략하거나 홀따옴표와 겹따옴표 등으로 구분할 수도 있습니다.

📌잘못된 중첩 사용 불가능

시작 태그와 종료 태그의 중첩에 문제가 발생하지 않도록 해야 합니다.

📌속성의 중복 사용 불가능

시작 태그에 동일한 속성을 중복하여 선언할 수 없습니다.

📌문서형 정의(DOCTYPE)

HTML4.01이나 XHTML1.0에서는 HTML 문서의 첫줄에 문서형 선언을 기술했습니다. 이러한 문서형 선언은 해당 HTML 문서의 버전과 문서 타입을 명시했지만, HTML5에서는 문서의 버전 및 문서 타입이 생략된, 간소화된 형식을 가집니다. 그 이유는 기존 HTML 문서형 선언의 목적과 달리 모든 웹브라우저에서 표준 모드(Standards Mode)로 렌더링될 수 있도록 하는 역할 만을 담당하기 때문입니다.

다음은 HTML4.01과 XHTML1.0 그리고 HTML5의 문서형 선언을 비교한 것입니다.

HTML4.01

- Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
- Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

1
2
3
4
5
6
7
8
9

XHTML1.0

- Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

1
2
3
4
5
6
7
8
9

HTML5

📌유효성 검사(Markup Validation)

W3C에서 제공하는 Markup Validation Service는 기존 HTML4.01이나 XHTML1.0 문서에서 유효성검사를 할 때와 마찬가지로 HTML5 문서의 유효성 여부를 검사할 수 있습니다. 이때 HTML5 문서의 유효성 검사는 기존 HTML 문서 형식과 달리 콘텐츠 모델에 따라 카테고리별로 포함할 수 없는 요소를 사용 했는지의 여부까지 함께 확인할 수 있습니다.

기존 HTML에서 사용했던 방법과 동일하게 유효성 검사를 실행한 후, 오류가 발생한 부분을 수정해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>HTML5 validation Error</title>
</head>
<body>
 <strong>
  <a href="http://validator.w3.org/">
   <section>W3C Markup Validation</section>
  </a>
 </strong>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

W3C Markup Validation Service에서 "Validate by File Upload" 항목을 선택하여 validation_error.html 문서의 유효성 검사를 실행하도록 합니다.

유효성 검사 실행 결과 다음과 같이 콘텐츠 모델에 오류가 발생했음을 알 수 있습니다.

오류의 원인은 프레이징 콘텐츠인 strong 요소의 자손으로 섹셔닝 콘텐츠인 section 요소가 포함되어 있기 때문입니다.

오류가 발생한 부분을 다음과 같이 수정하여 다시 한 번 유효성 검사를 진행합니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>HTML5 validation Error</title>
</head>
<body>
 <section>
  <a href="http://validator.w3.org/">
   <strong>W3C Markup Validation</strong>
  </a>
 </section>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

수정한 파일의 유효성 검사를 진행하면 콘텐츠 모델 부분에서 발생했던 오류가 해결되어 유효성 검사를 통과했다는 결과를 볼 수 있습니다.

HTML 문서의 기본 구조

모든 HTML 문서는 기본적으로 다음과 같은 구조를 갖습니다.

<!DOCTYPE html>
<!-- HTML 문서의 시작 -->
<html lang="ko-KR">
<!-- head 요소의 시작 -->
<head>
 <!-- 문자 인코딩 선언 -->
 <meta charset="utf-8">
 <!-- title 요소의 시작 -->
 <title>문서 제목</title>
 <!-- title 요소의 종료 -->
</head>
<!-- head 요소의 종료 -->
<!-- body 요소의 시작 -->
<body>
 본문
</body>
<!-- body 요소의 종료 -->
</html>
<!-- HTML 문서의 종료 -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

📌DTD 선언

웹 페이지를 제작할 때 사용할 문서형 정의를 선언합니다. 마크업 문서를 작성할 때는 반드시 문서의 첫머리에 문서형 정의(DTD ; Document Type Definition)를 선언해야 합니다. HTML4.01이나 XHTML1.0의 경우 각각 세 가지의 문서형 정의가 있으며 이런 문서형 정의의 종류에 따라 특정 요소의 사용이 제한되거나 규칙이 다르게 적용되며, 웹브라우저에서 문서가 렌더링되는 기준이 됩니다. 간혹 마크업 문서에 문서형 정의를 생략하는 경우가 있는데, 이것은 웹브라우저가 표준 모드가 아니라 호환 모드(quirks mode)로 렌더링되어 크로스 브라우징 환경에서 각각의 문서가 다르게 표현되는 원인이 되기도 합니다.

HTML5의 경우 HTML4.01이나 XHTML1.0과 다르게 DTD 선언은 표준 모드로 렌더링 되도록 하기 위한 역할만 담당합니다.

📌<html> ~ </html>

모든 웹 페이지의 콘텐츠는 <html> 태그와 </html> 태그 안에 선언해야 하며, <html> ~ </html>태그는 웹 페이지의 시작과 종료를 의미합니다. 이때 시작 태그인 <html>에 lang 속성을 사용하여 기본 언어를 지정할 수 있습니다.

기본 언어 명시는 한국어, 영어, 중국어 또는 독일어 등의 인간이 사용하는 언어를 HTML 문서에 선언하여 (X)HTML을 해석할 수 있는 소프트웨어들이 올바르게 동작하도록 하는 것을 의미합니다. 영문 단어의 경우에는 영어 또는 프랑스어, 스페인어로 접근하면 읽는 방식이 달라지므로 스크린리더가 어떤 언어로 읽을 것인지를 선택할 수 있도록 도와줍니다. 특히 검색엔진의 경우 사용자 언어와 일치하는 검색 결과를 제시할 수 있기 때문에 좀 더 원하는 정보에 근접해서 검색할 수 있습니다.

용어 설명

호환 모드(Quirks Mode)

호환 모드는 웹브라우저가 점점 표준에 맞게 개선되면서 이전의 오래된 웹 페이지들을 정상적으로 보여 주기 위해 최신 버전의 브라우저에서 제공하는 모드를 말합니다. 다시 말해서 호환 모드(quirks mode)는 웹 페이지의 하위 호환성을 유지하기 위해 W3C나 IETF의 표준을 엄격히 준수하는 표준 모드(Standards Mode)를 대신하여 사용되는 웹브라우저의 기술을 말합니다. 이 모드에서는 같은 코드라도 웹브라우저마다 서로 다르게 해석하기 때문에 전혀 다른 결과물을 보여 주기도 합니다,

렌더링(Rendering)

서버로부터 넘겨받은 HTML 코드는 웹 브라우저에서 읽어온 후 화면에 시각적으로 표시하게 되는데, 이 과정을‘렌더링’이라고 합니다.

📌<head> ~ </head>

HTML 문서는 머리 부분과 본문 부분으로 나눌 수 있는데, 머리 영역의 시작은 <head> 태그로, 종료는 </head> 태그로 선언합니다. 그리고 <head> 태그 안에는 <meta> 태그를 사용하여 문서의 일반적인 정보와 문자 인코딩을 명시할 수 있습니다. 또한 <title> 태그로 문서의 제목을 지정할 수 있습니다. 이때 <title> 태그에 명시 된 문서 제목은 기본적으로 북마크(즐겨찾기) 시 북마크 이름으로 사용됩니다.

📌<body> ~ </body>
body 요소는 HTML 문서의 본문 부분에 해당하며, 웹브라우저 화면에 나타나는 모든 콘텐츠는 <body> 태그와 </body> 태그 사이에 선언해야 합니다.