[HTML5] 3장 HTML5 소개 및 특징

HTML5는 최신의 마크업 언어이며, 새로운 기능과 기존 기능에 대한 개선사항, 그리고 스크립팅 기반 API를 포함하고 있습니다.

HTML5 특징

하위 호환성 : HTML5는 기존의 모든 문서 타입을 래핑한다(HTML4와 XHTML1.0 양쪽의 모든 유효한 요소들을 포함하고 있다).
간단한 문법 : 시멘틱 마크업을 위한 의미적 요소들이 강화되었으며, 생산성이 향상된 코딩을 지원하며, 문서의 크기가 작아졌다.
text/html MIME 타입을 사용하면서도 SVG 및 MathML을 인라인으로 활용할 수 있는 기능을 제공한다.
새로운 웹 폼 속성들을 이용하여 폼 검증과 디자인이 간소화 되었다.
오류를 쉽게 처리할 수 있게끔 몇 가지 기본 원칙을 바탕으로 설계돼 있다.
플러그인 없이도 비디오와 오디오를 비롯한 미디어 재생이 가능하다.
플러그인이 필요없는 스크립트 API를 20여종 이상이 지원하며, 주요 API는 아래와 같다.
- 2D 그래픽을 위한 캔버스 요소
- 문서 편집
- 드래그-앤-드롭
- 지오로케이션
- 로컬 오프라인 저장소
- 미디어 캡쳐
- 마이크로데이터

HTML5의 시작

기본 구조부터 시작해서 여러가지 태그들을 알아봅니다.

HTML5의 DOCTYPE (문서타입)

기존의 DOCTYPE은 SGML 기반이었기 때문에 DTD를 명시해야 했으나, HTML5에서는 브라우저가 표준모드로 작동되게 하는 역할만 하면 되기때문에 아주 간소화해 졌다.

<!DOCTYPE html>

사실!! DOCTYPE은 그다지 중요한 것이 아니다. HTML4.01의 DOCTYPE을 사용했다고 해도 HTML5등의 다른 표준태그가 섞여 있다고 해도 브라우저는 여전히 이들을 표시해 줄 것이다. 브라우저는 DOCTYPE을 지원하는 것이 아니라 기능을 지원하는 것이기 때문이다.

DOCTYPE 정의는 브라우저를 위해서가 아니라 유효성 검증을 위해 고안된 것이다. 브라우저가 DOCTYPE에 주목하는 유일한 시점은 'DOCTYPE 전환'을 수행할 때 뿐이다. 정확한 DOCTYPE 이 선언되어 있다면 표준모드(standards mode)로 작동할 것이고 DOCTYPE이 없다면 비표준모드(quirks mode)로 작동하게 된다.

자세히보기: [HTML] - 관용모드와 표준모드 - Quirks mode & Standard mode

휴먼 랭귀지

W3C 규격에 따르면 lang속성은 요소의 콘텐츠와 텍스트를 포함하고 있는 요소의 속성에 대한 기본 언어를 지정한다. 만약 영어로 페이지를 작성하는 게 아니라면, 정확하게 언어 코드를 지정하는 편이 좋다.

전체 언어 목록은 http://www.iana.org/assignments/language-subtag-registry를 참조하세요.

<html lang="ko">

문자 인코딩

마크업 문서의 문자 인코딩을 명시할때 사용한다.

<meta charset="UTF-8">

자세히보기: UTF와 EUC-KR

그 밖의 단순화

딱히 명시하지 않아도 브라우저는 스크립트가 웹에서 가장 인기있는 스크립트 언어인 자바스크립트로 작성되었을 것을 알기에 생략해도 된다(type="text/javascript").

<script src="file.js"></script>

css 파일링크 또한 type="text/css"를 매번 명시하지 않아도 된다.

<link rel="stylesheet" href="file.css">

아래는 위에서 배운 구조들을 종합한 것

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹페이지 제목</title>
<link rel="stylesheet" href="file.css">
<script src="file.js"></script>
</head>

<body>
</body>

</html>

사라진 태그

표현을 위해 필요했던 태그들이 대부분 사라졌다. <big>, <center>, <font>, <strike>등과 같이 CSS로 대체할 수 있는 태그들은 HTML5에서 제외되었고, <b>와 <i>는 의미가 재정의 되었다.

태그	설명
<acronym>	영문 축약형 사용시 예를 들어 NATO,NASA등 이는 로 대체되었다.
<applet>	임베디드 애플릿 사용시
<basefont>	글꼴의 형태 정의
<big>	글꼴의 크기 지정
<center>	텍스트 위치 중앙 정렬
<dir>	디렉토리 리스트
<font>	글꼴
<frame>	프레임
<frameset>	프레임 부속 태그
<noframe>	프레임 부속 태그
<strike>	글꼴 효과
<u>	글꼴 효과
<xmp>	pre 태그와 동일효과

재정의된 태그

몇몇의 태그들은 그 사용이 재정의됨으로써 새로운 생명력을 부여받았다.

<small>

small요소는 전면적으로 재정의 되었는데, 권리에 대한 정의, 절차에 대한 안내, 법적 제한 또는 copyright 내용이 들어있는 작은 글자 영역을 의미한다. 또 속성에 대한 설명이나 라이센스 충족에 대한 설명등으로 사용된다고 정의되었다.

<b>

별도로 추가적인 중요성을 부여하지 않으면서 다른 문장과 구별되는 문체를 갖는 텍스트에 이용된다. 예를 들어, 제품의 설명에서 제품의 이름에, 또는 전형적으로 볼드체를 사용해 표현하는 문구등에 사용한다.

<p>세상은 <b>코드</b>와 <b>암호</b>로 이루어져있지...
                    - <b>셜록 홈즈</b> 미니시리즈 - </p>

<strong>

강하게 강조해야 콘텐츠를 위한 것이지만 <em>과 다르게 문장의 의미를 바꾸지는 않는다.

<em>

문장 내용의 의미를 약간 바꾸는 식의 강조를 위해 사용된다.

<i>

더 이상 이탤릭체를 의미하지 않으며, 어떤 중요성이나 강조의 의미를 갖지 않는다. 주변의 문장과 다른 의미나 느낌을 표현하기 위해 사용한다. 진행중이었던 내용에서 약간 벗어난 분류학적 정의, 기술용어, 다른 언어에서 사용하는 관용적 표현, 생각, 배이름 등에 사용한다.

<dl>

개념을 확장해 관계형 리스트로 0개 이상의 명칭과 값의 집합으로 구성된다. 명칭과 값의 집합은 용어와 그에 대한 정의, 메타데이터 속성과 그 값, 또는 어떤 형태이든 명칭과 값으로 구성할 수 있는 내용이면 된다'라고 정의되어 있다.

<dl>
    <dt>웹 디자인</dt>
    <dd>HTML5/CSS3</dd>
    <dd>unclepapa</dd>
</dl>

<ol>

HTML4에서는 <ol>요소에 start 속성은 화면 표시를 위한 내용이라고 생각해 권장하지 않는 속성이였다. 다행히도 HTML5에서는 잘못된 결정을 다시 바로 잡았고 start 속성으로 원하는 항목부터 시작할 수 있게 되었다.

<ol start=5> <!-- 다섯번째 항목부터 -->

<ol reversed> <!-- 거꾸로 숫자를 센다 -->

<cite>

HTML4에서는 말한 사람을 표현할때도 사용할 수 있었다.

<cite>도마 안중근</cite>이 이야기했듯이

HTML5에서는 더 이상 위와 같이 사용할 수 없으며, 스펙에는 '사람의 이름은(사람이름과 작품제목이 같더라도) 작품의 제목이 될수 없다. 그러므로 이 요소는 사람의 이름에 사용할수 없다'고 정의되었다. 이로 인해, 기존 콘텐츠들이 HTML5에는 맞지 않게 되어 분란이 일어나고 있는 실정이다.

<address>

현재 노출된 글이나 문서의 작성자에 대한 연락처를 위한 것이지 단순한 물리적인 주소만을 표기하는 요소가 아니다. 연락처라 함은 이메일 주소일, 물리적인 주소등 여러가지가 될 수 있다. 이런 연락처 정보는 마이크로포맷, RDFa, 마이크로데이터등이 되게 마크업을 만들 수 있다. 기존과 다르게 <article>마다 각 주소를 가질수 있게 하나의 문서에 여러개의 연락처가 들어갈 수 있게 바뀌었다.

<hr>

이 요소는 미디어에 독립적이게 바뀌었고, 의미상으로는 '문단 레벨의 주제 구분'의 의미를 갖는다. 보통 브라우저에서 사이트를 노출할 때는 CSS를 사용해 숨기지만 섹셔닝 콘텐츠와 헤딩(<h1>~<h6>)으로 마크업을 하고 CSS 사용해 영역 구분을 하는 것이 좋다.

강화된 태그

<a>

이 요소는 항상 인라인 태그 였는데 이로 인해 제목이나 단락을 하이퍼링크로 바꾸고자 하는 경우에는 아래와 같이 여러 개의 <a>태그를 사용해야 했다.

<h1><a href="./index.html">logo</a></h1>
<p><a href="./index.html">사이트의 배너이다</a></p>

HTML5에서는 <a>태그안에 여러 태그를 넣을 수 있게 되었다.

<a href="./index.html">
    <h1>logo</h1>
    <p>사이트의 배너</p>
</a>

유일한 제약 상항은 <a>태그를 다른 <a>태그 안에 넣을 수 없다는 것이다.

HTML5 브랜드 정책

2011년 1월 18일, W3C는 HTML5의 시각적 브랜드 정책을 발표했다. 여기에는 최신 웹 애플리케이션과 웹사이트를 표현하기 위한 로고와 기술 클래스 아이콘 등이 포함되어 있다(로고, 아이콘 및 웹사이트는 모두 Creative Commons Attribution 3.0 Unported 라이선스가 적용되어 있다).

W3C는 HTML5 기술을 이용하여 개발된 웹사이트/애플리케이션이 이를 알릴 수 있도록 시각적 브랜드 정책을 사용할 것을 권하고 있다. HTML5 로고와 기술 클래스들을 뱃지로 만들어 추가할 수도 있고 직접 이미지들을 다운로드 받을 수도 있다.

브랜드 설명

각각의 로고가 설명하는 바를 간단히 소개한다.

로고 : HTML5 로고는 코드의 유효성이나 적합성을 암시하지는 않는다.
시맨틱 : 구조에 의미를 부여하는 시맨틱은 HTML5의 중심이다. RDF, 마이크로데이터 및 마이크로포맷과 더불어 풍부한 태그들은 프로그램은 물론 사용자에게 보다 유용하며, 데이터 중심의 웹을 제공할 수 있다.
오프라인과 저장소 : 웹 캐시를 비롯하여 로컬 저장소, 인덱스 DB 및 파일 API 명세 등 HTML5가 제공하는 API덕분에 웹 애플리케이션은 더 빨리 시작할 수 있으며, 심지어 인터넷 연결이 없는 곳에서도 동작할 수 있다.

기기에 대한 접근 : 웹 애플리케이션은 지오로케이션(Geolocation) API를 비롯하여 마이크나 카메라 같은 오디오 비디오 입력에 대한 접근은 물론 주소록, 이벤트 및 기울임 방향등 모바일 기기에 특화된 더 풍부한 기능과 경험을 제공할 수 있게 되었다.
연결성 : 보다 효율적인 연결성은 보다 실시간에 가까운 채팅, 더 빠른 게임 및 발전된 커뮤니케이션 등을 의미한다. 웹 소켓과 서버 측 이벤트를 통해 지금까지보다 훨씬 효율적으로 클라이언트와 서버 간 데이터 전달이 가능하다.
멀티미디어 : HTML5는 와 요소와 같은 요소들을 통해 HTML 문서 내에 손쉽게 미디어를 포함하는 방법을 제공함으로써, 플러그인이나 외부 플레이어에 의존하지 않고 미디어를 지원할 수 있는 기능을 내장하고 있다.

3D, 그래픽 및 효과 : SVG, 캔버스, WebGL 및 CSS3 3D 기능을 통해 브라우저에 직접 렌더링되는 놀라운 시각 효과를 사용자에게 제공할 수 있다.
성능과 통합 : 웹 작업자와 XMLHttpRequest2와 같은 다양한 기법과 기술을 이용하여 웹 애플리케이션과 동적 웹 콘텐츠가 더 빨리 동작하도록 만들 수 있어, 이로 인해 사용자가 기다리는 시간을 줄일 수 있다.
CSS3 : CSS3는 개발자가 의도한 구조나 성능에 영향을 주지 않으면서도 폭넓은 스타일링과 효과를 지원한다. 게다가 웹 공개 글꼴 형식(WOFF)을 통해 유연한 글꼴을 제공하며, 지금까지와는 차원이 다른 글꼴 제어를 가능하게 한다.

'웹코딩 > HTML' 카테고리의 다른 글

[HTML5] 4-2장 HTML5 기본 템플릿 (2)	2013.02.07
[HTML5] 4-1장 구조를 위한 태그 (3)	2013.02.07
[HTML5] 2장 XHTML과 HTML5의 차이점 (2)	2013.02.05
[HTML5] 1장 HTML5를 시작하기 전에... (0)	2013.02.04
관용모드와 표준모드 - Quirks mode & Standard mode (0)	2012.11.27

WEBDIR