문법
HTML 5 언어는 이미 잘 알려진 HTML 4와 XHTML1 문법과 호환 됩니다만 HTML내 난해한 SGML 문법과는 호환되지 않습니다. 문서는
text/htmlMIME 형식을 사용하게 됩니다.HTML 5는 구현을 용이하기 위해 오류 처리를 비롯하여 세부적인 파싱 규칙을 정의 합니다. 사용자 에이전트는
text/htmlMIME 형식을 가진 문서를 파싱 할때는 이러한 규칙을 따르게 됩니다. 아래에 HTML 문법과 함께 처리하는 간단한 예제가 있습니다.<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>예제 문서</title>
</head>
<body>
<p>예제 단락</p>
</body>
</html>HTML 5에 사용된 다른 문법은 바로 XML 입니다. XHTML1 문서 및 구현과 같은 문법을 사용할 수 있습니다. 이 문법을 사용하는 문서는 XML MIME 형식을 사용하고
http://www.w3.org/1999/xhtml네임 스페이스를 이용하고 XML 명세에 따라야 합니다. [XML]아래 예제는 HTML 5에서 XML 문법을 사용할 때의 예제 입니다. 아래 문서는
application/xhtml+xml나application/xml같은 XML MIME 형식을 따르고 있습니다.<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>예제 문서</title>
</head>
<body>
<p>예제 단락</p>
</body>
DOCTYPE
HTML 5 문법은 웹 브라우저가 표준 모드로 문서를 렌더링 할 수 있도록 문서 처음에
DOCTYPE을 지정해야 합니다.DOCTYPE은 특별한 목적이 없이 XML을 위한 옵션입니다. XML MIME 형식 문서는 관계 없이 항상 표준 모드로 동작합니다. [DOCTYPE]기본
DOCTYPE선언 방식은<!DOCTYPE html>이며 대소문자 구별을 하지 않습니다. 초기 HTML 버전에서의DOCTYPE은 HTML이 SGML의 일부라서 새로운 DTD를 참조해야 되었기 때문에 필요했지만 지금은 더 이상 그럴 필요가 없습니다. HTML 5는 HTML 문법을 사용하는 문서를 표준 모드로 동작하기 위해DOCTYPE을 이리 저리 바꿀 필요가 없습니다. 웹 브라우저는 단순히<!DOCTYPE html>만 있으면 표준 모드로 동작 합니다.
문자인코딩
HTML 5 저작자들은 문자 인코딩에 관한 아래 세 가지 부분 중 하나에 설정하여야 합니다.
- 전송 단계에서 HTTP 헤더에
Content-Type표시.- 문서 앞부분에 특수 유니코드 BOM 문자를 표시. 이 문자는 인코딩 방법에 대한 정보를 제공해 줍니다.
- 파일 초기 512 바이트 크기 내에
meta요소 내charset속성에 표시. UTF-8 방식을 이용하면<meta charset="UTF-8">와 같이 표기 하며 기존의 사용 방식인<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">에서 변경하는 게 좋습니다.XML 문법을 작성하는 저작자들은 XML 명세에 따라 문자 인코딩 설정을 하여야 합니다.
HTML5 추가 요소
- HTML 5 differences from HTML 4아래 요소들은 구조적 마크업을 위해 추가된 요소들입니다:
section은 태그는 일반적인 문서 및 어플리케이션 영역을 표시할 때 사용합니다. 문서 구조를 가르키는h1-h6와 함께 사용할 수 있습니다.article은 뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 합니다.aside는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용합니다.header은 문서 내 머리말 부분을 표시할 때 사용합니다.footer는 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있습니다.nav는 문서 내 네비게이션 요소들을 표시하기 위한 영역입니다.dialog는 대화 기능을 표시할 때 사용할 수 있습니다.<dialog>
<dt> 안녕하세요?
<dd> 네 오랜만입니다. 건강하시죠.
<dt> 물론입니다. 당신은?
<dd> 저도 좋습니다.
</dialog>figure는 그림이나 비디오 같은 임베딩 컨텐츠와 함께 캡션을 할때 사용 합니다.<figure>
<video src=ogg>…</video>
<legend>캡션 예제</legend>
</figure>또 다른 몇 가지 요소들을 추가하였습니다.
audio와video는 멀티미디어 컨텐츠를 표시하는 데 사용합니다. 둘다 어플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공 합니다. 다중source요소는 다른 형식의 다중 스트림을 제공하게 되는 경우 이들 요소들과 함께 사용할 수 있습니다.embed는 플러그인 컨텐츠를 표시할 때 사용합니다.m는 별도로 표시한 컨텐츠를 표시하는데 사용합니다.meter는 디스크 사용량 같은 측정값을 표시하는 데 사용합니다.time은 날짜나 시간을 표시하는 데 사용합니다.canvas는 그래프나 게임 같은 동적인 비트맵 그래픽을 표시하는 데 사용합니다.command는 사용자가 실행할 수 있는 명령어를 표시하는 데 사용합니다.datagrid는 트리 목록이나 표 데이터를 좀 더 동적으로 표현하는 데 사용합니다. (역자 주. 목록형 구조로 테이블 보다 쉽게 구조를 이해할 수 있습니다.)details은 사용자의 요청에 따라 얻은 콘트롤이나 부가 정보를 표시하는 데 사용합니다.input을 위한list속성과datalist는 유용한 콤보 박스를 만드는 데 사용합니다.<input list=browsers>
<datalist id=browsers>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>event-source는 서버가 보낸 이벤트를 파악하는 데 사용합니다.output은 자바 스크립트로 수행된 결과값을 표시하는 데 사용합니다.progress은 다운로드 같은 작업 진척도나 진행 정도를 표시하는 데 사용합니다.
input요소에는 아래와 같은 좀 더 세부적인type속성 들을 추가 합니다.
datetimedatetime-localdatemonthweektimenumberrangeurl새로운 형식들은 웹 서버에 기 정의된 유효 형식을 전달해 줄 수 있도록 사용자 에이전트가 일정에서 날짜 선택 시 달력을 표시해 주기 위해 만든 것입니다. 또는 주소록에 이메일 주소를 입력할 때 유효성을 체크 해 줌으로서 불필요한 자바 스크립트 유효성 확인 절차를 줄여 주어 사용자들이 빠르게 기능을 사용할 수 있도록 도와 줍니다.
