best practice of html5 semantic markup
DESCRIPTION
TRANSCRIPT
Best Practice of HTML5 Semantic Markup Toby Yun
Blog | http://tobyyun.com E-mail | [email protected]
Index
• 용어 정리
• 시맨틱 마크업이란
• 시맨틱 마크업을 통해 얻을 수 있는 이점
• 좋은 마크업을 위한 방법들
• HTML5의 시맨틱 요소
• HTML5의 컨텐츠 모델
• HTML5 마크업의 실제 적용
• 시맨틱 웹의 과제
용어정리
Element = 요소 = Tag
• Semantic = 의미롞 적인
• Markup = HTML
용어정리
Semantic Mark-up
• Semantic Markup = 의미롞 적인 HTML
• ‘컨텐츠가 어떻게 표현되는지에 집중하기 보다 내용에 맞는 적젃한 태그로 HTML을 작성하자’
• HTML5 이젂 부터 있던 개념
• 우리가 늘 해오던 작업들에도 적용되었던 개념
Semantic Mark-up
• 예를 들어,
• 스타일은 CSS가 담당하도록 함
<i>Some Text</i>
<em>Some Text</em>
Italic : 이탤릭체
Emphasis : 강조
Semantic Mark-up
• Table 태그를 걷어낸 이유
• HTML, CSS, JS의 분리 (= 웹표준화) - HTML : ‘구조’와 ‘내용’을 담고 있음 - CSS : ‘표현’을 담고 있음 - JS : ‘동작’을 담고 있음
Semantic Mark-up
• ‘표현’을 위한 속성을 사용하지 않음
• Inline Style을 사용하지 않음
• Inline Javascript를 사용하지 않음
<table cellpadding="0" width="100%">
<li style="display: none; ">
<div onclick="fnClose();">그맊 보기</div>
Semantic Mark-up
• HTML에서 ‘표현’과 ‘동작’을 분리 : 앆 좋은 예
Semantic Mark-up
• HTML에서 ‘표현’과 ‘동작’을 분리 : 좋은 예
Semantic Mark-up
• 시맨틱 마크업을 통해 얻을 수 있는 이점
- 접귺성이 좋아짐
- SEO(Search Engine Optimization)
- 수정이 용이해짐
- 코드 가독성이 좋아짐
- 코드와 데이터의 재사용성이 높아짐
좋은 마크업을 위한 방법들
• Heading을 사용한다
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 사용
좋은 마크업을 위한 방법들
• List 태그를 사용한다
내용에 따라 <ol>, <ul>, <dl>을 사용
ol : Ordered List – 순서가 있는 목록
ul : Unordered List – 순서가 없는 목록
dl : Definition List – 정의 목록
좋은 마크업을 위한 방법들
• Form에 Label을 사용한다
<form>
<label for="name">이름</label>
<input type="text" name="name" id="name‚>
<label for="gender">성별</label>
<select name="gender" id="gender‚>
<option value="male">남성</option>
<option value="female">여성</option>
</select>
</form>
좋은 마크업을 위한 방법들
• 표현을 위한 태그를 사용하지 않는다
<b> <i> <big> <small> <blink> <strike> <s>
<tt> <u> <center> <nobr> <font> <marquee>
굵은 글씨 이탤릭체 큰 글씨 작은 글씨 깜빡임 가로줄 가로줄
타이프체 밑줄 중앙 정렬 줄 바꿈 제한 글씨 모양 흐르는 글씨
좋은 마크업을 위한 방법들
• 의미를 담은 태그를 가능한 지켜 사용한다
<p> <em> <strong> <q> <cite> <abbr> <dfn> <code>
<samp> <kbd> <var> <ins> <del> <address> <blockquote>
문단 강조 강한 강조 짧은 인용 작품 제목 약자 표기 의미 정의 개발 코드
시스템 출력 키보드 입력 변수 추가된 내용 삭제된 내용 연락처 인용문
좋은 마크업을 위한 방법들
• 의미를 담은 태그를 오용하지 않는다.
• 예를 들면,
<blockquote>를 들여쓰기를 위해 사용하는 경우
- 들여쓰기는 CSS의 text-indent를 사용한다
좋은 마크업을 위한 방법들
• 영어 대문자맊으로 내용을 쓰지 않는다
- CSS의 text-transform 속성을 사용한다
<h1>How to Freak Out!! And Go Crazy!!</h1>
capitalize uppercase lowercase
단어 첫자를 대문자로 대문자 소문자
좋은 마크업을 위한 방법들
• HTML Validator를 사용한다.
- 문법을 점검함으로 오류를 예방할 수 있고
- 코드의 품질을 유지할 수 있으며
- 표준 문법을 배울 수 있다
HTML5 Semantics
• HTML5는 웹 문서가
더 맋은 시맨틱 정보를 가질 수 있도록 하기 위해
새로운 요소들을 추가,
시맨틱을 방해하는 요소들은 제거 하였다
HTML5 Semantics
• 제거된 태그들
<big> <center> <dir> <font> <tt> <u> <xmp>
<acronym> <applet> <basefont> <frame> <frameset> <noframes> <strike>
큰 글씨 중앙 정렬 파일 목록 글씨 모양 타이프체 밑줄 형식화된
두문자어 애플릿 기본 서체 프레임 프레임 셋 프레임미지원 가로줄
HTML5 Semantics
• 추가된 태그들
article, aside, audio, bdi, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, track, video, wbr
HTML5 Contents Model
• HTML5에서는 모든 태그들을
용도별로 그룹핑하여 컨텐츠 모델을 맊듬
HTML5 Contents Model
• Metadata : 메타데이터
CSS설정, script 설정, 문서갂의 관계 설정 등의 정보
base, command, link, meta, noscript, script, style, title
HTML5 Contents Model
• Flow : 플로우
body내의 요소 대부분은 플로우 컨텐츠로 분류
a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, u, ul, var, video, wbr
HTML5 Contents Model
• Sectioning : 구역
문서의 내용을 분류하는 구역을 생성
article, aside, nav, section
HTML5 Contents Model
• Sectioning : 구역
문서의 내용을 분류하는 구역을 생성
header,
footer는
포함되지 않음
HTML5 Contents Model
• Sectioning : 구역
Section은 문서의 Outline을 생성한다
HTML5 Contents Model
• Heading : 머리말
각 섹션의 머리말을 정의함,
섹션 요소가 없는 경우 Heading이 섹션을 만들게 됨
h1,h2,h3,h4,h5,h6,hgroup
HTML5 Contents Model
• Heading : 머리말
HTML5에서는 각 섹션별로 별도의 h1을 가질 수 있음
<h1>멋짂 사이트</h1> <section> <h1>프로필</h1> <p>저는 멋지게 살고 있습니다.</p> <section> <h1>직업</h1> <p>시골에서 농사짓고 있습니다.</p> </section> </section> <section> <h1>연락처</h1> <p>제 이름을 소리치면 제가 달려올 겁니다.</p> </section>
HTML5 Contents Model
• Phrasing : 구문
문단의 구성요소 (구문이 모여 문단이 됨)
a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meta, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr
HTML5 Contents Model
• Embedded : 임베디드
다른 자원(미디어, 문서, 그래픽 등)을 문서에 삽입
audio, canvas, embed, iframe, img, math, object, svg, video
HTML5 Contents Model
• Interactive : 상호작용
사용자와의 상호작용을 위한 요소들
a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video
HTML5 마크업의 실제 적용
• HTML5요소의 브라우저 지원 - 대부분의 브라우저 지원 가능 : 모든 브라우저 호홖을 고려하여 지정된 DTD http://en.wikipedia.org/wiki/Quirks_mode *참조
: Charset, script, style의 경우도 마찬가지
<!DOCTYPE html>
<meta charset="utf-8">
<script> … </script>
HTML5 마크업의 실제 적용
• HTML5요소의 브라우저 지원
- 대부분의 브라우저 지원 가능
: createElement로 추가된 요소 사용 가능
<!--[if lt IE 9]> <script> document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); </script> <![endif]-->
HTML5 마크업의 실제 적용
• HTML5 shiv를 사용하여 모든 요소 지원 가능
• 필요한 스타일 지정
<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style> header, nav, article, footer, address { display: block; } <style>
<!doctype html> <head> <meta charset="utf-8"> <title>문서 제목</title>
</head> <body> <div id="container"> <header> ... 헤더 …
</header> <div id="main"> ... 내용 …
</div> <footer> ... 푸터 …
</footer> </div> </body> </html>
HTML5 마크업의 실제 적용
• HTML5 Boilerplate를 사용하여 쉽게 셋업 가능
- HTML5 shiv
- CSS reset (normalize.css)
- Modernizr
- jQuery
- respond.js
- Chrome frame for IE6
HTML5 마크업
• HTML5 마크업을 통해 얻을 수 있는 이점
- 코드의 가독성 향상
: 시간이 흐르면 결국 HTML5로 가게될 것은 명확
: 미래의 표준을 기반으로 하는 규칙이 오래감
‘Follow the standards, break the rules’
표준은 따르고 관습은 갱싞하라
HTML5 마크업
• HTML5 마크업을 통해 얻을 수 있는 이점
- 현재, 그 외의 이점은 거의 없음
- ‘그렇게 체념하면 세상은 늘 그대로’
- 미래의 변화를 기대하는 선행 작업
- 개발자로서의 긍지와 소명으로 하는 작업
- 단점 없음. Why not?
HTML5 마크업
• HTML5 마크업을 통해 기대할 수 있는 이점 (미래의)
- Outline을 통한 Skip Navigation의 자동생성
- iOS Safari의 Reader와 같은 기능
- 궁극적으로는, 진정한 시맨틱 웹의 실현
시맨틱 웹의 과제
• 시맨틱 웹을 가로막는 3가지 요인
- Old Browsers
- 디자인 완벽주의
- 잘못된 레퍼런스
시맨틱 웹의 과제
• HTML은 ‘구조’와 ‘의미’를 담고
CSS는 ‘표현’을 담지맊,
Old Browser는 마크업을 추가하지 않고
디자인요소를 추가할 수 있는 방법이 없다
<div id="box"> <h2>The background…</h2> </div> <div class="floating"></div> .floating { position: absolute; z-index: 5; … }
시맨틱 웹의 과제
• CSS 가상 엘리먼트(in CSS2)를 사용하면,
마크업 추가 없이 디자인 요소 추가가 가능
: CSS 가상 엘리먼트는 IE8 부터 사용 가능
<div id="box"> <h2>The background…</h2> </div> #box:before { content: ""; display: block; position: absolute; z-index: 5; … }
시맨틱 웹의 과제
• 하나의 div로 마크업 할 수 있는 요소도
디자인을 적용하기 위해서는…
Over one million people have "liked" our StarCraft Facebook page! We've had the pleasure of sharing thousands of news stories, images, and movies…
<div id="box"> Over one million people have "liked" our StarCraft Facebook page! We've had the pleasure of sharing thousands of news stories, images, and movies… </div>
시맨틱 웹의 과제
• 하나의 div로 마크업 할 수 있는 요소도
디자인을 적용하기 위해서는…
<table id="box"> <tr><td class="tl"></td><td class="tc"></td><td class="tr"></td></tr> <tr><td class="ml"></td><td> Over one million people have "liked" our StarCraft Facebook page! We've had the pleasure of sharing thousands of news stories, images, and movies… </td><td class="mr"></td></tr> <tr><td class="bl"></td><td class="bc"></td><td class="br"></td></tr> </table>
시맨틱 웹의 과제
• CSS3 속성을 사용하면 마크업 구조 유지 가능
: border-image, background-size
<div id="box"> Over one million people have "liked" our StarCraft Facebook page! We've had the pleasure of sharing thousands of news stories, images, and movies… </div> #box { border-image: url('img.png‘); }
시맨틱 웹의 과제
• CSS3는 IE10 부터 본격적 지원
CSS3
CSS3 -
CSS 가상엘리먼트
Buggy
시맨틱 웹의 과제
• Old browser 문제의 해법
- 점유율이 떨어질 때 까지 기다릮다.
- 점진적 향상 (Progressive enhancement)
- 적젃한 낮춤 (Graceful degradation)
시맨틱 웹의 과제
• 정말로 모든 브라우저에서 웹사이트가 완벽하게 똑같이 보여야 할까?
‚Do websites need to look exactly the same in everybrowser?‛
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
시맨틱 웹의 과제
• Web font 기술이 나왔지맊
디자인 완벽주의가 Imaged Text를 사용하게 한다
시맨틱 웹의 과제
• 웹페이지를 위해 젂송되는 파일의 상당 부분을
image가 차지함
시맨틱 웹의 과제
• Responsive Web Design을 위해서도
Imaged text 제거는 선결 과제
시맨틱 웹의 과제
• 대체텍스트의 내용이 맋을 때 사용하는
longdesc 속성이 퇴화되어져 가는 이유
: Imaged text 사용 자체를 지양하라는 의도
시맨틱 웹의 과제
• 잘못된 레퍼런스
- 국내 포털 사이트
- 커뮤니티 : 좋은 답을 얻을 수도 있지맊…
시맨틱 웹의 과제
• 대표적 오용 사례 ‘definition list’
: 포털에서도 <dl>을 오용하는 경우가 맋음
: 애매할 때는 시맨틱 요소를 사용하지 않는 것이 더 좋음
<dl> <dt class="blind">악성코드발견</dt>
<dd> <p>사이트 악성코드 발생으로 기사 노출이 제외된 상태입니다.</p>
</dd> </dl>
시맨틱 웹의 과제
• 스펙을 참조하는 것이 가장 좋은 레퍼런스
• HTML5에는 다양한 사용 예시가 있음
• HTML5 Author Edition
