Best Practice of HTML5 Semantic Markup Toby Yun Blog E-mail http://tobyyun.com tobyyun@gmail.com
Index 용어정리 시맨틱마크업이란 시맨틱마크업을통해얻을수있는이점 좋은마크업을위한방법들 HTML5의시맨틱요소 HTML5의컨텐츠모델 HTML5 마크업의실제적용 시맨틱웹의과제
용어정리 Element = 요소 = Tag
용어정리 Semantic = 의미롞적인 Markup = HTML
Semantic Mark-up Semantic Markup = 의미롞적인 HTML 컨텐츠가어떻게표현되는지에집중하기보다내용에맞는적젃한태그로 HTML 을작성하자 HTML5 이젂부터있던개념 우리가늘해오던작업들에도적용되었던개념
Semantic Mark-up 예를들어, <i>some Text</i> Italic : 이탤릭체 <em>some Text</em> Emphasis : 강조 스타일은 CSS 가담당하도록함
Semantic Mark-up Table 태그를걷어낸이유 HTML, CSS, JS 의분리 (= 웹표준화 ) - HTML : 구조 와 내용 을담고있음 - CSS : 표현 을담고있음 - JS : 동작 을담고있음
Semantic Mark-up 표현 을위한속성을사용하지않음 <table cellpadding="0" width="100%"> Inline Style 을사용하지않음 <li style="display: none; "> Inline Javascript 를사용하지않음 <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 에 Lable 을사용한다 <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 속성을사용한다 capitalize uppercase lowercase 단어첫자를대문자로대문자소문자 <h1>how to Freak Out!! And Go Crazy!!</h1>
좋은마크업을위한방법들 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 <!DOCTYPE html> http://en.wikipedia.org/wiki/quirks_mode * 참조 : Charset, script, style 의경우도마찬가지 <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"> </div> </body> </html> <header>... 헤더 </header> <div id="main">... 내용 </div> <footer>... 푸터 </footer>
HTML5 마크업의실제적용 HTML5 Boilerplate를사용하여쉽게셋업가능 - HTML5 shiv - CSS reset (normalize.css) - Modernizr - jquery - respond.js - Chrome frame for IE6
HTML5 마크업 HTML5 마크업을통해얻을수있는이점 - 코드의가독성향상 Follow the standards, break the rules 표준은따르고관습은갱싞하라 : 시간이흐르면결국 HTML5로가게될것은명확 : 미래의표준을기반으로하는규칙이오래감
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> </dl> <dt class="blind"> 악성코드발견 </dt> <dd> <p> 사이트악성코드발생으로기사노출이제외된상태입니다.</p> </dd> : 애매할때는시맨틱요소를사용하지않는것이더좋음
시맨틱웹의과제 스펙을참조하는것이가장좋은레퍼런스 HTML5 에는다양한사용예시가있음 HTML5 Author Edition
Thanks Nov 17, 2011 Questions, comments or more info: Twitter : @tobyyun tobyyun@gmail.com