Html5 시맨틱태그

문서 유형 <DOCTYPE>
<!DOCTYPE html PUBLIC “-//IETF//DTD HTML 2.0//EN”>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>

<!DOCTYPE html PUBLIC “-// W3C//DTD HTML 4.01 Final//EN”
http://www.w3g.org/TR/html4/strict.dtd>

http://www.w3g.org/TR/html4/loose.dtd>

http://www.w3g.org/TR/html4/frameset.dtd>

문서 유형 <DOCTYPE>
<!DOCTYPE html PUBLIC “-//IETF//DTD HTML 2.0//EN”>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 3.2
Final//EN”>

<!DOCTYPE html>
<!DOCTYPE html PUBLIC “-// W3C//DTD HTML 4.01
Final//EN” http://www.w3g.org/TR/html4/strict.dtd>

Final//EN” http://www.w3g.org/TR/html4/loose.dtd>

Final//EN” http://www.w3g.org/TR/html4/frameset.dtd>

언어 선언

<html lang=“ko”>

en,
영어 fr 프랑스어
en-us, en-gb

zh-tw 중국어(타이완)
ja 일본어
z h-c n 중국어

http://msdn.microsoft.com/en-us/library/ms533052(VS.85).aspx

언어와 캐릭터셋

<meta charset=“utf-8”>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>간단한 문서 만들기</title>
</head>

<body>
<p>HTML4를 이용한 문서</p>
</body>
</html>

<!DOCTYPE html>
<html lang=“ko”>
<head>
<meta charset=“utf-8”>
<title> 간단한 문서 만들기 </title>
</head>

<body>
<p> HTML5를 이용한 문서</p>
</body>
</html>

HTML5 시맨틱 태그

8

HTML 5 시맨틱 태그

WHAT? 태그 이름만 보고도 역할을 짐작할 수 있는 태그

<body>
<div id=“top1”>
<h1> walking in the air</h1>
</div>
<div id=“top2”>
<ul>
<li>올렛길이란</li>
<li>올렛길의 유래</li>
...
</ul>
</div>
<div id=“olle">
<img src="top1.png">
제주의 바람을 느끼고..
</div>
<div id=“bottom">
이 문서는 HTML 4.0을 기준으로…
</div>

</body>
</html>


<body>
<header>
<h1> walking in the air</h1>
</header>
<nav>
<ul>
<li>올렛길이란</li>
<li>올렛길의 유래</li>
...
</ul>
</nav>
<section>
<article>
<img src="top1.png">
제주의 바람을 느끼고..
</article>
</section>
<footer>
이 문서는 HTML 5를 기준으로...
</footer>
</body>

HTML5의 새로운 태그
header : 헤더 부분으로, 사이트 소개나 내비게이션 등 표시
footer : 푸터 부분 표시. 사이트 제작자나 저작권 정보 등을 나타낼 때 주로 사용
nav : 사이트 안의 주요 메뉴 표시.
menu : 사이트의 메뉴 표시
section : 일반적인 문서나 애플리케이션 영역 표시.
article : 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠 표시.
aside : 문서의 주요 부분을 표시하고 남는 사이드 바 콘텐츠 표시.
hgroup : 머리말 표시.

<header>
<h1>..</h1>
<h3>
<h3>..</h3>
<h1> <nav> <nav>..</nav>
</header>
<section> <aside>
<h2> <section>
<h2>
<article> <h3> <h2>..</h2>
<h3> <article>
<h3>..</3>
<article> …
<h3>
</article>
<article>
<h3> <article> …
</section>

<article> <aside>
<h3>
<h2>..</h2>
<h3>..</h3>
</aside>
http://www.seosara.com
<footer>
<h3>..</h3>
</footer>
13 Do it! HTML5+CSS3


WHAT? 태그 이름만 보고도 역할을 짐작할 수 있는 태그

WHY? 검색 엔진에서 쉽게 웹 문서 내용 검색

웹 보조 기구에서 웹 문서를 정확하게 판독

어떤 장치에서나 똑같이 문서 해석


<header>

특정 부분의 머리말(header)
<header>는 어디에든 사용할 수 있다
<img>를 함께 사용할 수도 있고 (사이트 로고)
<form>을 함께 사용할 수도 있다 (검색 창 등)


<nav>

내비게이션 링크
<header> 안에 포함시킬 수도 있고,
<footer>나 <aside>에 포함시킬 수도 있다
문서 안에 여러 개의 <nav>를 사용할 수 있다.


<article>

웹 상의 실제 내용
블로그 포스트나 웹 사이트 내용, 코멘트 등
검색 로봇이 <article>을 발견하면 배포 가능한 콘텐츠
임을 쉽게 알 수 있다


<section>

콘텐츠 그룹을 묶은 것
여러 <article>을 하나의 <section>으로 묶을 수 있다
스타일을 적용하거나 스크립트를 사용하기 위해 콘텐
츠 중 일부를 묶고 싶다면 <div> 요소를 사용


<aside>

사이트 실제 내용의 왼쪽이나 오른쪽에 표시되는
기타 내용
본문을 표시하고 남는 내용
<nav>를 삽입하거나 <form>을 삽입한다


<footer>

웹 사이트 저작권 정보나 사이트 제작자 정보
다른 태그를 포함할 수도 있다


<figure>, <figcaption>

<figure> - 캡션을 붙이려는 대상 지정
다양한 요소를 <figure>로 묶을 수 있다
<figcaption> - 캡션을 붙인다
<figcaption>은 <figure> 안에서만 사용할 수 있다

<figure>
<img src="images/fall1.jpg" alt="산굼부리 물들다">
<img src="images/fall2.jpg" alt="바람 가득한 억새 바다">
<img src="images/fall3.jpg" alt="길 끝에는 무엇이 있을까">
<figcaption><b>산굼부리의 가을</b> - 단풍 든 담쟁이, 바람 가득한 억새 바
다, 그리고 억샛길</figcaption>
</figure>


<mark>

HTML4에서는 클래스 스타일을 이용
 클래스 스타일 이름을 기억했다가 필요한 부분에
<span> 요소나 <div> 요소
<mark> 요소는 CSS를 이용하여 강조할 부분의 배경
색이나 글자색을 지정

<head>
<style>
mark{background-color:#FFFFB3;font-
weight:bold;padding:1px}
</style>
</head>
<body>
<h1>Introduction</h1>
<p> <mark>"HTML5" </mark> has at various times been used
to refer...</p>
<p>This specification actually now defines the next generation
of HTML after <mark>HTML5</mark>. <mark>HTML5</mark>
reached Last Call at the WHATWG in October 2009, ...</p>


마이크로포맷

HTML은 그 안에서 특정 정보를 추출하기 적당하지 않다
(예, 전화번호 검색하면 텍스트로 검색됨)
마이크로포맷을 사용하면 각 정보에 의미 부여 가능

<div class="vcard">
<div>
<div class="org">이지스퍼블리싱</div>
<div>이지스퍼블리싱</div>
<div class="tel">02-332-1111</div>
<div>02-332-1111</div>
<div class="adr">마포구 서교동 375-13번
<div>마포구 서교동 375-13번지
지</div>
/div>
</div>
</div>


<time>
<time datetime="2010-06-10T13:00:00" pubdate>2010년 6월
10일 오후 1시</time>

브라우저에서 인식하는 시간 : 시간을 표시할 때는 yyyy-mm-dd 형
식을 따른다.
pubdate 속성 : 0 또는 1값을 가지므로 필요할 때만 삽입
브라우저 화면에 표시되는 시간 : 사용자가 알아보기 쉬운 방법으로
표시

<section id="page">
<header class="summary">
<h1>
<a title="One day JavaScript conference" class="url"
href="http://2009.full-frontal.org/">Full Frontal</a>
</h1>
<h2>자바스크립트 컨퍼런스
<time datetime="2009-11-20T09:00">2009년 11월 20
일</time>
</h2>
</header>
<section id="register">
<a href="http://2010.full-frontal.org/">2010년 컨퍼런
스 일정 보기</a>
</section>


<address>
웹 페이지에 대한 연락처 정보를 제공
웹 페이지 제작자의 이름이나 제작자의 웹 페이지,
피드백을 위한 이메일 주소, 주소, 전화번호 같은 정보들

<footer class="vcard">© 2008–2011
<address>
<a href="http://collectiveidea.com/" title="[i] Collective
Idea" rel="bookmark" class="url fn org">Collective Idea</a>.
Contact us at <a class="email"
href="mailto:hello@ideafoundry.info">hello@ideafoundry.info<
/a>.
</address> We look forward to seeing you!
</footer>

HTML5 태그를 사용하려면

header, nav, section, article, figure {
display:block;
}

HTML5의 새로운 태그
embed : 플러그인 컨텐츠 표시
progress : 시간이 걸리는 작업 과정 표시
meter : 측정값 표시
ruby, rt, rp : 루비 언어 표현
canvas : 동적인 비트맵 그래픽 표시
command : 사용자 실행 명령어 표시
details : 사용자 요청 후에 얻은 콘트롤이나 부가 정보 표시
output : 출력 결과 표시

HTML5의 변경 태그
a : href 없이 사용하면 ‘널 링크’로 사용.
address : 요소는 섹션 개념을 통해 새로운 영역 표시
b : 텍스트를 진하게 표시할 뿐만 아니라, 제품을 소개할 때
의 제품명, 문서 초록에서의 키워드처럼 특별하게 중요하
지는 않지만 진하게 표시하려고 할 때 사용.
hr : 단락 단위로 주제를 바꾸려고 할 때 사용.
i : 텍스트를 기울어지게 표시할 뿐만 아니라, 선박 이름, 머
리 속의 생각, 다른 언어에서 숙어, 기술적인 용어, 생물종
표시처럼 소리나 분위기를 대체하는 문구 등에 사용.

HTML5의 변경 태그
menu : 실제 문서 메뉴 정보를 제공하는 데 사용.
small : 세부 주석이나 법적 인쇄 문서에서 작은 인쇄
정보를 표시
strong : 단순히 진하게 표시하는 것보다 더 중요한 정
보를 표시

HTML5의 변경 속성

img의 border 속성 : 값이 "0"일 때만 사용하고 가급적
CSS 사용
script의 language 속성 : 값이"JavaScript" (대소문자 구
별)에만 사용하고 type 속성과 함께 쓰지 않고 생략할 수
있다.
a의 name 속성 : id로 바꾸어 쓰기를 권장

HTML5의 중단 태그
● basefont
● big
● center
● font
●s ● acronym : 혼란스럽기 때문에 제외. 축약어 abbr 사
● strike 용합니다.
● tt ● applet : 이미 object로 대체됨.
●u ● isindex : 이미 폼 양식을 통해 대체됨.
● dir : 이미 ul 요소를 통해 대체됨.
● frame ● noscript는 HTML 문법에서만 사용하고 XML 문법에
● frameset 서는 더 이상 사용하지 않음
● noframes


HTML5의 중단 태그

basefont big center font

s strike tt u

frame frameset noframe

acronym applet isindex dir

HTML5의 중단속성
align link vlink alink

text background bgcolor border

cellpadding cellspacing clear compact

frame frameborder height hspace

vspace marginheight marginwidth

noshade nowrap rules scrolling

size type valign width

Html5 시맨틱태그

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Html5 시맨틱태그

Ähnlich wie Html5 시맨틱태그 (20)

Mehr von 은심 강

Mehr von 은심 강 (8)

Html5 시맨틱태그