티스토리 뷰
HTML5로 코딩할 때는 HTML과 XHTML문법으로 나누어 코딩할 수 있다.
여기서는 HTML로 한다고 가정하고 문법을 기술한다.
- HTML5문서의 MIME타입
HTML 문법을 이용할 경우 이전버전과 마찬가지로 text/html의 MIME 타입으로 처리한다. 또한 HTML5문서를 저장할 때는 지금까지와 마찬가지로 .html이나 .htm을 사용하면 된다.
- HTML5문서의 DOCTYPE선언
간단한 DOCTYPE 선언 방법이다. 이 DOCTYPE을 생각하면 브라우저가 최신 렌더링 모드를 사용하지 않아 HTML5의 일부 기능이 작동하지 않는 사태가 발생할 가능성이 있다.(참고: HTML5&API 입문 written by 시라이시 슌페이)
HTML5은 이전버전과 마찬가지로 태그는 대소문자를 구분하지 않는다.
- 문자 인코딩 방법
하지만 위 두가지중 하나만 사용해야 한다.
- HTML문법 상세
HTML4까지의 HTML은 독자적인 문법을 갖지 못하고 SGML(Standard Generalized Markup Language)의 문법을 따르고 있다. 하지만 실제 웹페이지를 보면 문법을 따르지 않은 페이지를 흔히 볼 수 있는데, 브라우저에서는 에러 없이 잘 표현해 주고 있다.
HTML5에서는 현재 웹 브라우저의 처리 방식을 기초로 HTML의 문법을 정의한다.
위 태그는 종료태그를 기술하지 않고 XML처럼 '/>'를 이용하여 종료를 표현한다.
<br /> 나 <img src="picture.png" /> 처럼..
- HTML을 이용한 마크업
HTML은 마크업언어인데, HTML5에서는 head body html 등 생략가능한 태그가 많으므로 이전보다 간결하다. 하지만 직접 사용해 보면 구간이 애매해 개인적으로는 표기해주는 것이 낳은것 같다.
이것은 일반적인 형태이고,
이것은 생략가능한 태그 및 속성을 생략한 형태이다. style의 type은 기본이 "text/css"라 생략가능하고, input의 type도 기본이 "text"이기 때문에 생략가능하다.
여기서는 HTML로 한다고 가정하고 문법을 기술한다.
- HTML5문서의 MIME타입
HTML 문법을 이용할 경우 이전버전과 마찬가지로 text/html의 MIME 타입으로 처리한다. 또한 HTML5문서를 저장할 때는 지금까지와 마찬가지로 .html이나 .htm을 사용하면 된다.
- HTML5문서의 DOCTYPE선언
<!DOCTYPE html>
간단한 DOCTYPE 선언 방법이다. 이 DOCTYPE을 생각하면 브라우저가 최신 렌더링 모드를 사용하지 않아 HTML5의 일부 기능이 작동하지 않는 사태가 발생할 가능성이 있다.(참고: HTML5&API 입문 written by 시라이시 슌페이)
HTML5은 이전버전과 마찬가지로 태그는 대소문자를 구분하지 않는다.
- 문자 인코딩 방법
가장 간단한 방법은 meta요소의 charset 속성을 이용하는 것이다. <meta charset="utf-8"> 또한 지금처럼 Content-Type을 지정하여 문자 인코딩을 나타낼 수 있다. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
하지만 위 두가지중 하나만 사용해야 한다.
- HTML문법 상세
HTML4까지의 HTML은 독자적인 문법을 갖지 못하고 SGML(Standard Generalized Markup Language)의 문법을 따르고 있다. 하지만 실제 웹페이지를 보면 문법을 따르지 않은 페이지를 흔히 볼 수 있는데, 브라우저에서는 에러 없이 잘 표현해 주고 있다.
HTML5에서는 현재 웹 브라우저의 처리 방식을 기초로 HTML의 문법을 정의한다.
종료태그를 기술해서는 안되는 요소
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source
위 태그는 종료태그를 기술하지 않고 XML처럼 '/>'를 이용하여 종료를 표현한다.
<br /> 나 <img src="picture.png" /> 처럼..
상황에 따라 태그를 생략할 수 있는 요소
가장 흔한 구조인 html, head, body는 시작태그 및 종료태그 모두 생략할 수 있다.
또한 colgroup, tbody도 시작태그와 종료태그를 모두 생략할 수 있다.
종료태그만을 생략할 수 있는 태그는 li,dt, dd, p, rt, rp, optgroup, option, thead, tfoot, tr, td, th 등이 있다.
- HTML을 이용한 마크업
HTML은 마크업언어인데, HTML5에서는 head body html 등 생략가능한 태그가 많으므로 이전보다 간결하다. 하지만 직접 사용해 보면 구간이 애매해 개인적으로는 표기해주는 것이 낳은것 같다.
<!DOCTYPE html>
<html>
<head>
<title> :: 작업표시줄에 표시되는 내용 :: </title>
<meta charset="utf-8" />
<style type="text/css">h1 {font-size:2em;}</style>
</head>
<body>
<h1>스타일을 적용한 텍스트</h1>
<p>오잉?</p>
<input type="text" disabled>
</body>
</html>
이것은 일반적인 형태이고,
<!DOCTYPE html>
<title> :: 작업표시줄에 표시되는 내용 :: </title>
<meta charset="utf-8" />
<style>h1 {font-size:2em;}</style>
<h1>스타일을 적용한 텍스트</h1>
<p>오잉?</p>
<input disabled>
이것은 생략가능한 태그 및 속성을 생략한 형태이다. style의 type은 기본이 "text/css"라 생략가능하고, input의 type도 기본이 "text"이기 때문에 생략가능하다.
'Programming Languages > HTML' 카테고리의 다른 글
| iScroll 사용시 input, textarea등 컨트롤 입력 예외처리 (3) | 2012.03.31 |
|---|---|
| APM7 외부접속 설정 (2) | 2011.09.09 |
| HTML 모바일웹 사이즈 (1) | 2011.08.14 |
댓글
04-25 12:48
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday