IT Tech./HTML5
HTML5 시작하기
이스비다
2012. 2. 2. 23:57
1. HTML5 란?
Hyper Text Markup Language의 약자로 인터프리터 방식의 마크업 언어입니다.
* 마크업 언어 : 태그(Tag) 등 메타데이터를 이용하여 기본데이터에 의미를 부여하고 구조를 정의하는 언어.
예) <title>마크업언어</title> <-- '마크업언어'라는 데이터가 'title' 임을 알려줌
HTML로 작성된 문서는 어느 정도 문법에 맞지 않게 작성을 하더라도 브라우저에서 출력을 해줍니다. 정확하게 작성하여야만 출력되는 XHTML과의 차이점인데, 조금 느슨한 점이 개발자 입장에서는 장점이 될테지만.. 반면, 문법상 오류가 있는 HTML 문서들이 널리 퍼지게 되는 원인이 되었습니다.
이런 단점 때문에 W3C에서 HTML4 이후로 개발을 중단하고 XHTML로 몰고 갔지만, 개발자 입장에서는 문법을 정확히 표현해야한다는 어려움이 있었고, 기존의 HTML4와 플러그인 등을 이용하여 충분히 원하는 웹페이지를 작성할 수 있다는 점으로 인해 XHTML은 널리 쓰이지 못했습니다.
그 후 W3C는 브라우저 개발사들이 만든 WHAT WG라는 단체에서 HTML을 발전시키려 만들던 명세를 일부 수용하여 HTML5 개발을 진행하게 되었습니다.
* HTML5의 등장배경
기존의 HTML4는 하이퍼텍스트 문서를 브라우저에 단순히 보여주는 수준에 지나지 않았습니다. 그런 이유로 개발이 중단된 HTML4는 웹의 발전을 따라가지 못했고, HTML4 의 부족한 부분을 Ajax, 플래시, ActiveX 등의 플러그인으로 메우게 됩니다. 이 점때문에 특정 브라우저에서만 동작하게 되는 등 호환성 문제가 발생하였습니다.
이런 문제들을 해결하기 위해 HTML5가 등장함으로써, 브라우저가 HTML5의 표준명세를 지원한다면 모든 브라우저에서 같은 기능을 구현(호환성 확보)할 수 있고, 데이터 저장, 위치정보 등 새로운 기능을 대폭 추가해 웹 어플리케이션 및 오프라인 어플리케이션으로도 만들 수 있게 되었습니다.
2. HTML5 제작 기본
* HTML5 제작 시 권고하는 방법은 아래와 같습니다.
(1) 문서형태 선언
- HTML4나 XHTML에도 있었던 내용으로 문서의 형태를 명시하는 부분입니다. 기존의 선언부보다 간결해진 것이 특징입니다.
(2) 자연어 명시
- 자연어란 사람이 통상적으로 쓰는 언어를 말합니다.
- 이 부분은 문서에 쓰여진 언어를 브라우저가 바르게 해석할 수 있도록 선언해주는 부분입니다.
- 언어 코드는 ko(한국어), en(영어), ja(일본어) 등으로 작성합니다. (다른 언어 코드는 http://www.w3.org 참조)
- 웹 접근성 측면에서 중요한 부분으로 HTML5에서 사용할 것을 권장하고 있습니다.
(3) 문자 인코딩 지정
- 문서의 문자 인코딩을 지정하는 부분으로, 마찬가지로 기존 선언부보다 간결해졌습니다.
- HTML5 에서는 utf-8 을 추천합니다.
(4) 본문 마크업
- 본격적으로 문서를 작성하는 부분입니다.
- html, head, body 등의 요소로 구성되어 있습니다.
(5) HTML Validation
- 작성한 HTML5 문서가 문법에 맞는지 검증하는 단계입니다.
- 기존엔 이 과정을 생략하는 경우가 많아 문법에 맞지 않는 문서가 다수 만들어졌고, 이런 문서가 특정 환경에서 오류를 발생시키기도 했습니다.
- 문법은 아래 사이트에서 검증할 수 있습니다.
- W3C 검증 사이트 : http://validator.w3.org/
- Validator.nu : http://html5.validator.nu/
* 다음 포스트 예정 : HTML5에 추가된 section, article 등의 구조 관련 요소.
Hyper Text Markup Language의 약자로 인터프리터 방식의 마크업 언어입니다.
* 마크업 언어 : 태그(Tag) 등 메타데이터를 이용하여 기본데이터에 의미를 부여하고 구조를 정의하는 언어.
예) <title>마크업언어</title> <-- '마크업언어'라는 데이터가 'title' 임을 알려줌
HTML로 작성된 문서는 어느 정도 문법에 맞지 않게 작성을 하더라도 브라우저에서 출력을 해줍니다. 정확하게 작성하여야만 출력되는 XHTML과의 차이점인데, 조금 느슨한 점이 개발자 입장에서는 장점이 될테지만.. 반면, 문법상 오류가 있는 HTML 문서들이 널리 퍼지게 되는 원인이 되었습니다.
이런 단점 때문에 W3C에서 HTML4 이후로 개발을 중단하고 XHTML로 몰고 갔지만, 개발자 입장에서는 문법을 정확히 표현해야한다는 어려움이 있었고, 기존의 HTML4와 플러그인 등을 이용하여 충분히 원하는 웹페이지를 작성할 수 있다는 점으로 인해 XHTML은 널리 쓰이지 못했습니다.
그 후 W3C는 브라우저 개발사들이 만든 WHAT WG라는 단체에서 HTML을 발전시키려 만들던 명세를 일부 수용하여 HTML5 개발을 진행하게 되었습니다.
* HTML5의 등장배경
기존의 HTML4는 하이퍼텍스트 문서를 브라우저에 단순히 보여주는 수준에 지나지 않았습니다. 그런 이유로 개발이 중단된 HTML4는 웹의 발전을 따라가지 못했고, HTML4 의 부족한 부분을 Ajax, 플래시, ActiveX 등의 플러그인으로 메우게 됩니다. 이 점때문에 특정 브라우저에서만 동작하게 되는 등 호환성 문제가 발생하였습니다.
이런 문제들을 해결하기 위해 HTML5가 등장함으로써, 브라우저가 HTML5의 표준명세를 지원한다면 모든 브라우저에서 같은 기능을 구현(호환성 확보)할 수 있고, 데이터 저장, 위치정보 등 새로운 기능을 대폭 추가해 웹 어플리케이션 및 오프라인 어플리케이션으로도 만들 수 있게 되었습니다.
2. HTML5 제작 기본
* HTML5 제작 시 권고하는 방법은 아래와 같습니다.
(1) 문서형태 선언
- HTML4나 XHTML에도 있었던 내용으로 문서의 형태를 명시하는 부분입니다. 기존의 선언부보다 간결해진 것이 특징입니다.
<!DOCTYPE html>
(2) 자연어 명시
- 자연어란 사람이 통상적으로 쓰는 언어를 말합니다.
- 이 부분은 문서에 쓰여진 언어를 브라우저가 바르게 해석할 수 있도록 선언해주는 부분입니다.
- 언어 코드는 ko(한국어), en(영어), ja(일본어) 등으로 작성합니다. (다른 언어 코드는 http://www.w3.org 참조)
- 웹 접근성 측면에서 중요한 부분으로 HTML5에서 사용할 것을 권장하고 있습니다.
<html lang="ko">
(3) 문자 인코딩 지정
- 문서의 문자 인코딩을 지정하는 부분으로, 마찬가지로 기존 선언부보다 간결해졌습니다.
- HTML5 에서는 utf-8 을 추천합니다.
<meta charset="utf-8">
(4) 본문 마크업
- 본격적으로 문서를 작성하는 부분입니다.
- html, head, body 등의 요소로 구성되어 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML5 시작하기</title>
</head>
<body>
<p>HTML5를 시작하세요</p>
</body>
</html>
(5) HTML Validation
- 작성한 HTML5 문서가 문법에 맞는지 검증하는 단계입니다.
- 기존엔 이 과정을 생략하는 경우가 많아 문법에 맞지 않는 문서가 다수 만들어졌고, 이런 문서가 특정 환경에서 오류를 발생시키기도 했습니다.
- 문법은 아래 사이트에서 검증할 수 있습니다.
- W3C 검증 사이트 : http://validator.w3.org/
- Validator.nu : http://html5.validator.nu/
* 다음 포스트 예정 : HTML5에 추가된 section, article 등의 구조 관련 요소.