1. Syntax
먼저 간단한 HTML 5 예제를 보자.
<!DOCTYPE HTML><html>
<head>
<meta charset="UTF-8">
<title>HTML 5 예제</title>
</head> <body>
<!-- 아시다시피 여기서부터 Body Contents 가 들어가겠죠? -->
<p>안녕하시렵니까? HTML 5?</p>
</body>
</html>
위에서 부터 한번 쭈욱 훑어보면 알 수 있으리라...
1-1. DOCTYPE
먼저 DOCTYPE 을 볼 수 있다.
너무도? 간결하지 않은가?
HTML 5 문서라면 최상단에(Enter-개행문자 도 들어가면 안된다.) 반드시 넣어줘야한다. ^^
DOCTYPE 은 "HTML" 과 "XHTML" 두가지가 있다.
HTML 5 문서를 작성할 때 HTML 로 작성할지, XHTML 로 작성할지 첫부분에 선언해 준다는 것으로 HTML 문법을 따르도록 할 것인가? 아니면 XML 문법을 따르게 할 것인가 를 결정하는 것이라고 보면 되겠다.
참고로 HTML 5 가 따르는 HTML 문법을 "HTML5", HTML 5 가 따르는 XML문법을 "XHTML5" 라 부른다.
위 문서는 "탁" 보면 "착" 알수 있듯이.
HTML5 문법을 따르도록 작성할 것이라는 것을 알 수 있다.
1-2. Encoding
그 다음 보이는 것이 Charset. 바로 Encoding 에 대한 사항이다.
기존 HTML 문서에서 볼 수 있는
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
와는 다르게
<meta charset="UTF-8">
무척이나 간단해진 것을 알 수 있을 것이다.
1-3. SVG, MathML
그리고 아래 글상자와 같이 HTML 문서안에 SVG 나 MathML 을 사용할 수 있다.
<!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
(참고 : http://www.w3.org/TR/2010/WD-html5-diff-20100304/)
흠... 그리고...
Tag 이름은 XHTML Type으로 작성하든 HTML Type 으로 작성하던간에 대소문자를 가리지 않는다는 점...
이 정도면... 될 것 같은데... 또 필요한 사항이 있으면 추후에... ^^;
2. Language
오호~~ 이제 본격적으로 HTML 4 와 HTML 5 간의 특징들을 살펴보겠다.
새로 만들어진 Element와 Attribute, 변경된 Element 와 Attribute, 없어져 버린 Element 와 Attribute 등으로 나눠서 알아보자.
2-1. 새롭게 추가된 Element
이번에 추가된 Element 에는 특히나 Sementic 요소들이 많이 추가가 되었다.
아래 표는 이번에 추가된 Sementic Element 들이다.
Element
설명
Header 문서의 Header 를 나타낼 때 사용한다.
Footer 문서의 Footer 를 나타낼 때 사용한다.
Nav 문서내에 Navigation 요소가 있을 때 사용한다.
Section 문서의 영역을 구성하며, 문서 구조를 구성하는 H1~H6 와 함께 사용한다.
Article 뉴스기사나 블로그 article 과 같은 독립된 Contents 를 표시할 때 사용한다.
Aside 주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할때 사용한다.
Hgroup 각 Section 의 Header 를 나타낼때 사용한다.
Figure 그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할때 사용한다.
Figcaption 캡션에 사용한다.
직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면
아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)
'홈페이지제작 > HTML' 카테고리의 다른 글
| HTML5 텍스트 태그 (<strong>~</strong>, <b>~</b>, <em>~</em>, <i>~</i>) (0) | 2017.11.11 |
|---|---|
| HTML5 텍스트 태그 (<pre>~</pre> 외 기타 텍스트 관련 태그들) (0) | 2017.11.11 |
| [HTML5] HTML5 목록을 만드는 태그 (<ul>~</ul>, <li>~</li>, <dl>~</dl> (0) | 2017.11.03 |
| [HTML5 ] 텍스트 태그 (<pre>~</pre> 외 기타 텍스트 관련 태그들) (0) | 2017.11.03 |
| HTML5 텍스트 /<p>~</p>, <br>에 관해서 (0) | 2017.10.30 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.