HTML5 그리고 "loose", "strick"
어떤 HTML을 사용하느냐에 따라 무엇이 달라지는지, 그리고 HTML5으로의 전환은 진화 발전의 관점에서 이전의 관례를 어떻게 반영하는지를 보여주기 위해 “Hello World”라는 타이틀을 가진 웹 페이지를 빠르게 살펴보고 HTML5는 다양한 마크업 스타일을 선택할 수 있게 한다는 사실에 대해 알아봅니다.
또한 우리가 생각하는 마크업 스타일!! 즉, 더 엄격하지만 배우기 쉬운 XHTML과 진보적이고 풍부한 의미론적인 색깔을 가진 HTML5의 좋은 측면들만 병합시키는 일이 최선인지를 알아봅니다.
Strict DOCTYPE의 XHTML 1.0과 HTML4
첫번째 예제는 Strict DOCTYPE을 사용하는 XHTML 1.0 버전의 스타일로 유효한 것이며, XHTML을 사용하는 개발자들한텐 놀라울 것이 없을 것입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Hello World! XHTML 1 Strict</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>위 코드는 전형적이고 적합하며 완벽한게 유효한 페이지입니다.
그러면 HTML4 버전의 스타일은 어떠할까?
아래의 예제는 HTML4의 Strict DOCTYPE과 상당히 더 간단한 태그를 사용한 것외에는 위의 예제와 동일하며 유효합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Hello World! HTML 4 Strict</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>HTML5 DOCTYPE
지금까지 꽤 익숙한 것들을 살펴 보았습니다.
이제 HTML5을 사용한 예제를 살펴보도록 합니다.
아래 예제는 가장 간단하고 간소해진 형식의 HTML5버전으로 이것 역시 100% 유효합니다.
<!DOCTYPE HTML>
<meta charset=UTF-8>
<title>Hello World!</title>
<p>Hello World!<p>지금까지 XHTML 문법을 사용해 온 개발자들에겐 약간 낯설지도 모르겠습니다.
<html>의 오프닝과 클로징 태그가 없다? <head>와 <body>는? 따옴표로 감싸지 않은 속성이라?
이것은 HTML5가 XHTML1.0보다 덜 제한적인 문법을 가진 HTML4 loose 스타일의 특성들을 많이 상속받았기 때문입니다.
HTML5의 발전은 HTML4의 자유로운 문법 스타일과 XHTML의 엄격한 문법 스타일을 포함하여 보편적인 모든 문법의 변이를 허용하는 WHATWG의 실용적인 접근법에 의해 특성화 되었습니다.
그리고 HTML5가 이전에 존재해 왔던 것으로 부터 어떻게 진화 발전해 왔는지 알아 보기 위해서 아주 약간 간소화된 그러나 여전히 완벽하게 유효한 HTML4 페이지를 살펴 보도록 하겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Hello World! HTML 4.01 Strict</title>
<p>Hello World!<p>장황한 HTML 4 DOCTYPE과 더 길어진 meta charset의 속성외에는 위의 두 예제는 동일합니다.
둘 다 <html>의 오프닝과 클로징 태그, <head> 또는 <body>가 없습니다. 이유는 간단합니다.
현존하는 기존 컨텐츠 지원이라는 HTML 디자인 원칙을 이미 살펴 보았듯이 HTML5는 HTML 4와 XHTML 1 문법 모두 사용하여 웹 페이지를 마크업 할 수 있도록 허용하고 있습니다.
우리가 어떤 문법을 선호하든지 간에 HTML5는 이전에 존재해 왔던 것들을 수용하고 있는 것입니다.
만약 XHTML로 작업하고 있다면, 태그와 속성의 이름은 소문자로 표기하고 클로징 태그는 빠뜨리지 않으며 모든 속성에 값을 주고 또 그것들을 따옴표로 감쌀 것입니다.
그리고 어떤 개발자들은 이런 규칙들이 제한적이라고 판단할 것이고, 다른 이들은 수월한 마크업을 할 수 있게끔 하는 일관성에 감사하게 생각할 것입니다.
요약하건데, 각자의 선택에 따른 어떠한 문법으로도 HTML5 페이지를 마크업 하는 것은 가능합니다.
하지만 XHTML의 엄격한 문법 스타일을 유지하라고 많이들 권장하고 있습니다. 왜? 규칙은 도움이 되기 때문입니다.
이러한 규칙들은 모든 사람들에게 표준화된 문법을 따르도록 하면서 공동으로 작업할 수 있게끔 합니다.
그리고 왜 XHTML의 엄격한 문법을 고수해야 하는지에 대한 또 다른 이유가 있습니다.
예를 들어, 접근이 용이한 가장 모범적인 사례는 태그에 lang 속성을 사용하여 웹 문서에 사용된 언어를 명시하도록 요구합니다.
만약 명시하지 않을 경우 접근이 불가능하기 때문입니다.
이 점을 유념하여, XHTML의 모든 규칙과 문법을 수용하는 마지막 HTML5 페이지의 사례를 한번 살펴보도록 하겠습니다.
만약, XHTML의 엄격한 규칙과 문법을 사용하여 마크업 해 왔다면, 태그명을 소문자로 표기하고, 속성의 값들은 따옴표로 감싸며, 또 컨텐츠를 가지지 않는 태그(meta, link 등…)들은 반드시 닫아 주는 데 익숙할 것입니다.
위의 마지막 예제에서 보았듯이, HTML5는 무엇이든 허용합니다. 대문자로 표기한 태그명들도 문제없습니다. 따옴표로 감싸지 않은 속성값들 역시 유효합니다.
HTML5는 XHTML에서 익숙했던 관례들을 모두 가지고 XHTML문법을 사용하여 웹 페이지를 마크업을 할 수 있으며, XHTML과 HTML5라는 이 두 세계 모두에 능숙해 질 수 있습니다.
그럼 아래 예제를 살펴봅니다.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>위의 마크업은 100% 유효하며 XHTML 1의 엄격한 문법과 HTML5의 이점을 겸비하고 있습니다.
요컨대 두가지 방법 모두 유효하고 좋은 방법입니다.
'HTMLㆍ웹표준ㆍ 웹접근성' 카테고리의 다른 글
| UX 측면의 한국형 웹 콘텐츠 지침 (0) | 2016.01.05 |
|---|---|
| HTML5 요소 - header, hgroup, footer (0) | 2016.01.05 |
| 웹 접근성을 고려한 UI 컴포넌트 - 캐로셀(carousel) 편 (0) | 2015.11.25 |
| 웹 접근성 지침 (0) | 2015.11.24 |
| 모바일에서 넘버로 구성된 텍스트 컬러 나오지 않을때... 메타태그 코드 (0) | 2015.02.15 |
