[HTML5] 4-2장 HTML5 기본 템플릿

HTML5의 템플릿은 이전에 비해 매우 간소화 되었습니다. 기존의 방식이 <div>에 의존하여 콘텐츠를 구조화 시켰다면 HTML5에서는 구조화를 위한 요소들이 등장하여 좀 더 시멘틱한 웹이 가능해졌습니다.

<!DOCTYPE html> <!-- 문서타입 -->
<html lang="ko"> <!-- 휴먼랭귀지 -->
<head>
<meta charset="utf-8"> <!-- 문자셋 -->
<title>웹페이지 제목</title>
</head>

<body>
    <header></header> <!-- 첫머리 -->
	<nav></nav> <!-- 메뉴 -->
	<article></article> <!-- 본문 -->
	<footer></footer> <!-- 끝머리 -->
</body>
</html>

문서타입을 결정하는 DOCTYPE은 매우 짧아지고, 더 이상 DTD주소를 포함하지 않으며 문자셋 또한 간결해졌다. 기존의 <div id="header">와 같이 구조화를 시키던 방식에서 <header>와 같이 짧은 태그만으로 구조화가 가능해졌다. 아래 그림과 같은 모양이다.

html5템플릿구조

HTML5에 추가된 문서 구조화 요소들로는 section, nav, aside, hgroup, header, footer, address가 있으며 구조화 태그들은 기본적으로 스타일을 지니고 있지 않다. 디자인은 CSS에서 담당해야 한다. 좀 더 내용이 추가된 템플릿을 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">    

<head>
<meta charset="utf-8">   
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>웹페이지 제목</title>

<meta name="description" content="웹페이지 소개">
<meta name="keywords" content="키워드입력, 키워드2, 키워드3">

<link rel="shortcut icon" href="파비콘 주소">
<link rel="stylesheet" media="screen" href="css 주소">
<script src="자바스크립트 주소"></script>
</head>

<body>
    <header>
        <h1>WebDir</h1>
        <nav>
            <h1>navigation</h1>
            <ul>
                <li>메뉴1</li>
                <li>메뉴2</li>
        </nav>
    </header>

    <article>
        <h1>콘텐츠 제목 </h1>
        <p> 콘텐츠 내용 </p>        
    </article>

    <aside>
        <section>
            <h1>트위터</h1>
            <blockquote>트위터내용</blockquote>
        </section>
    </aside>

    <footer>
        <small>&copy unclepapa / <address>unclepapa@mail.com</address></small> 
    </footer>

</body>
</html>

http-equiv="X-UA-Compatible"에 대한 설명은 아래 링크로 대신합니다.

[HTML/XHTML] - X-UA-Compatible

위 메타 태그를 간단히 설명하자면 IE에서만 해석되며 IE=edge는 최신 버전으로 렌더링하라는 것입니다.

name="viewport"는 스마트폰과 같은 다양한 플랫폼에서 보여지게 될 화면의 크기를 조정하는 태그입니다.

content의 속성값으로는 아래와 같습니다.

user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)
initial-scale=1.0 : 페이지 로딩시 확대비율
maximum-scale=1.0 : 최대확대비율
minimum-scale=1.0 : 최소축소비율
width=device-width : 플랫폼 가로 크기에 맞춤, 수치를 넣으면 그수치에 맞게 맞춰짐
target-densitydpi=medium-dpi : dpi([dots per inch])

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

[HTML5] 6-1장 새로운 태그 (0)	2013.02.09
[HTML5] 5장 문서 구조 (0)	2013.02.08
[HTML5] 4-1장 구조를 위한 태그 (3)	2013.02.07
[HTML5] 3장 HTML5 소개 및 특징 (6)	2013.02.06
[HTML5] 2장 XHTML과 HTML5의 차이점 (2)	2013.02.05

WEBDIR