시맨틱한 HTML 마크업 구조 설계, 어떻게 할까?

윤원진

이 발표는 HTML5 Outline을 설명하는 발표입니다

태그 ≒ 요소 = 엘리먼트

영어 썼다 한글 썼다 왔다 갔다 해도 이해해주세요

시맨틱이란?

<b>강조할 텍스트</b>

<strong>강조할 텍스트</strong>

Bold : 두꺼운

Strong : 강한

예를 들어,

표현을 기준으로 이름 지어진 태그들은 더 이상 사용하지 않습니다

<b> 굵은 글씨

<i> 이탤릭체

<big> 큰 글씨

<small> 작은 글씨

<blink> 깜빡임

<s> 가로줄

<tt> 타이프체

<u> 밑줄

<center> 중앙 정렬

<nobr> 줄바꿈 안함

<font> 글씨 모양

<marquee> 흐르는 글씨

컨텐츠가 가진 의미를 나타내는 태그들을 가능한 지켜 사용합니다

<strong> 강한 강조

<em> 강조

<p> 문단

<q> 짧은 인용

<cite> 작품 제목

<del> 삭제된 내용

<samp> 시스템 출력

<code> 개발 코드

<ins> 추가된 내용

<address> 주소

<blockquote> 인용문

<abbr> 약자표기

Heading과 웹 페이지의 정보구조

책의 목차는

책의 ‘정보구조’를 담고 있습니다

목차를 보면, 전체 내용이 어떻게

구성 되어있는지를

한 눈에 알 수 있습니다

웹 페이지에서는

헤딩이 목차와 같은 역할을 합니다.

헤딩들을 모아보면

웹 페이지의 내용이

어떤 흐름을 가지고 있는지 한 눈에

알 수 있습니다.

<h1>네이버</h1>

<h2>뉴스스탠드</h2>

<h3>구독목록</h3>

<h3>전체언론사</h3>

<h2>로그인</h2>

<h2>타임스퀘어</h2>

<h2>주제형캐스트</h2>

<h2>홈 유형 선택</h2>

<h2>네이버 설정</h2>

<h2>패밀리 사이트</h2>

헤딩이 잘못 제공되면

사용자에게 잘못된 정보구조를

전달하게 됩니다.

그렇기 때문에,

헤딩은 정보구조를 반영하여

올바른 순서로 작성되어야 합니다.

<h1>네이버</h1>

<h4>로그인</h4>

<h2>안내 팝업</h2>

<h4>확인</h4>

<h3>네이버 설정</h3>

<h2>패밀리 사이트</h2>

<h3>다음 페이지</h3>

…

만약 헤딩이 잘못 되었다면?

<img src=‘img/tiger.jpg’ alt=‘코끼리’>

https://www.flickr.com/photos/goingslo/8836416242/

잘못된 시맨틱 마크업은 사용자에게 혼란을 줍니다

호랑이! 코끼리

HTML5에서 변경된 목차 개념

새롭게 추가된 HTML5 시맨틱 태그들, 잘 사용하고 계신가요?

http://html5.creation.net/flow-element/html5-flow-element-detection.jpg

이 가이드를 잘 따라서 지키면 충분할까요?

섹셔닝 요소는 Outline을 만듭니다

섹셔닝 요소가 뭐지?

HTML5에는 ‘컨텐츠 모델’이 있습니다

HTML5 Contents Model

Metadata: 메타데이터

문서에 대한 다양한 정보들을 설정함

base, link, meta, noscript,

script, style, title

Flow: 플로우

Body내의 대부분의 요소는 플로우 컨텐츠로 분류됨

a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas,

cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form,

h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, 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

Heading: 머리말

각 섹션의 머리말을 정의함, 섹션 요소 안에 헤딩이 여러 개인 경우 Heading이 섹션을 만들게 됨

h1, h2, h3, h4, h5, h6,

hgroup

Sectioning: 구역

문서의 내용을 분류하는 구역을 생성

article, aside, nav,

section

Phrasing: 구문

문단의 구성요소 (구문이 모여 문단이 됨)

a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code,

data, date, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object,

output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea,

time, u, var, video, wbr

Embedded: 임베디드

다른자원(미디어, 문서, 그래픽 등)을 문서에 삽입

audio, canvas, embed, iframe,

img, math, object, svg,

video

Interactive: 상호작용

사용자와의 상호작용을 위한 요소들

a, audio, button, embed, iframe,

img, input, keygen, label, object, select, textarea, video

다시 본론으로 돌아와서…

섹셔닝 요소는 Outline을 만듭니다

HTML4 웹 페이지에서는

헤딩이 목차와 같은 역할을 합니다.

하지만, HTML5에서는

섹션이 만드는 구역과

헤딩이 조합하여 아웃라인을 만들고,

이 아웃라인이 목차의 역할을 합니다.

<h1>네이버</h1>

<h2>뉴스스탠드</h2>

<h3>구독목록</h3>

<h3>전체언론사</h3>

<h2>로그인</h2>

<h2>타임스퀘어</h2>

<h2>주제형캐스트</h2>

<h2>홈 유형 선택</h2>

<h2>네이버 설정</h2>

<h2>패밀리 사이트</h2>

Outline은 세가지 요소에 의해 결정됩니다

Outline 생성 원리 이해

Sectioning: 구역

문서의 내용을 분류하는 구역을 생성 header, footer는 섹셔닝 요소에 포함되지 않습니다

article, aside, nav,

section

섹션 요소는 구역을 만듭니다

섹션 요소는 구역을 만듭니다

Sectioning Roots

섹셔닝 루츠는 별개의 새로운 문서로 취급하기 때문에 그 하위에 있는 내용은 아웃라인에 포함시키지 않습니다

body, blockquote, details, fieldset,

figure, td

섹션 요소는 아웃라인을 만듭니다

섹션 요소는 아웃라인을 만듭니다

1. 섹션

1.섹션

2.섹션

1.섹션

3.섹션

섹션 요소는 아웃라인을 만듭니다

각 섹션이 가진 헤딩이 이름이 됩니다

1. 우리집

1.안방

2.거실

1.주방

3.창고

우리집

<h1>우리집</h1>

안방 창고 거실

주방

코드로 살펴 볼까요? #1

<h1>예제</h1>

<section>

<h2>멋진 섹션</h2>

</section>

<article>

<h2>아주 좋은 글</h2>

</article>

<section>

여긴 헤딩이 없어요

</section>

HTML 마크업 문서의 아웃라인

1. 예제

1. 멋진 섹션

2. 아주 좋은 글

3. Untitled Section

각 섹션요소는 헤딩에 의해 이름이 지어집니다. 이름이 없을 경우 Untitled Section(무제) 섹션이 됩니다.

코드로 살펴 볼까요? #2

<h1>책 팝니다</h1>

<section>

<h1>중고 책</h1>

<h2>HTML 공부하기</h2>

<h2>CSS 공부하기</h2>

<h2>연애, 할 수 있다!</h2>

</section>

HTML 마크업 문서의 아웃라인

1. 책 팝니다

1. 중고 책

1. HTML 공부하기

2. CSS 공부하기

3. 연애, 할 수 있다!

한 섹션 안에 헤딩이 여러 개일 때는, 헤딩이 섹션을 만듭니다.

첫번째 헤딩은 섹션의 헤딩이 되고… 나머지는 섹션을 만들어요.

<h1>책 팝니다</h1>

<section>

<h1>중고 책</h1>

<h2>HTML 공부하기</h2>

<h2>CSS 공부하기</h2>

<h2>연애, 할 수 있다!</h2>

</section>

HTML 마크업 문서의 아웃라인

1. 책 팝니다

1. 중고 책

1. HTML 공부하기

2. CSS 공부하기

3. 연애, 할 수 있다!

HTML5 문서에서는 새로운 섹션에서 h1 부터 다시 카운팅을 시작해도 됩니다

코드로 살펴 볼까요? #3

HTML 마크업 문서의 아웃라인

<section>

<h1>중고 책</h1>

<h2>HTML 공부하기</h2>

<h2>CSS 공부하기</h2>

<h2>연애, 할 수 있다!</h2>

</section>

<!-- <h1>헤딩이 없네?</h1> -->

<section>

<h1>중고 책</h1>

<h2>HTML 공부하기</h2>

<h2>CSS 공부하기</h2>

<h2>연애, 할 수 있다!</h2>

</section>

HTML 마크업 문서의 아웃라인

1. Untitled Section

1. 중고 책

1. HTML 공부하기

2. CSS 공부하기

3. 연애, 할 수 있다!

body는 섹셔닝 루츠이기 때문에 헤딩이 없으면 문서의 제목이 없는 무제 문서가 됩니다.

코드로 살펴 볼까요? #4

<h1>물건 팝니다</h1>

<h2>쓰던 물건</h2>

<article>

<h3>볼 펜</h3>

<p>아주 잘 나와요</p>

</article>

<article>

<h3>지갑</h3>

<p>중후한 멋이 있어요</p>

</article>

<article>

<h3>신발</h3>

<p>냄새 안나고 깨끗합니다</p>

</article>

HTML 마크업 문서의 아웃라인

<h1>물건 팝니다</h1>

<h2>쓰던 물건</h2>

<article>

<h3>볼 펜</h3>

<p>아주 잘 나와요</p>

</article>

<article>

<h3>지갑</h3>

<p>중후한 멋이 있어요</p>

</article>

<article>

<h3>신발</h3>

<p>냄새 안나고 깨끗합니다</p>

</article>

HTML 마크업 문서의 아웃라인

1. 물건 팝니다

1. 쓰던 물건

1. 볼 펜

2. 지갑

3. 신발

이런 아웃라인이 만들어 질까요?

<h1>물건 팝니다</h1>

<h2>쓰던 물건</h2>

<article>

<h3>볼 펜</h3>

<p>아주 잘 나와요</p>

</article>

<article>

<h3>지갑</h3>

<p>중후한 멋이 있어요</p>

</article>

<article>

<h3>신발</h3>

<p>냄새 안나고 깨끗합니다</p>

</article>

HTML 마크업 문서의 아웃라인

1. 물건 팝니다

1. 쓰던 물건

2. 볼 펜

3. 지갑

4. 신발

h2와 article이 형제가 되면서 같은 단계에 위치하는 아웃라인이 만들어집니다

h1은 body 섹션의 첫번째 헤딩이라서…

코드로 살펴 볼까요? #5

<h1>책 팝니다</h1>

<blockquote>

<h1>중고 책</h1>

<h2>HTML 공부하기</h2>

<h2>CSS 공부하기</h2>

<h2>연애, 할 수 있다!</h2>

</blockquote>

HTML 마크업 문서의 아웃라인

body, blockquote details, fieldset,

figure, td

섹셔닝 루츠

<h1>책 팝니다</h1>

<blockquote>

<h1>중고 책</h1>

<h2>HTML 공부하기</h2>

<h2>CSS 공부하기</h2>

<h2>연애, 할 수 있다!</h2>

</blockquote>

HTML 마크업 문서의 아웃라인

1. 책 팝니다

섹셔닝 루츠(body)안에 또 다른 섹셔닝 루츠가 있으면 그 안의 내용은 아웃라인에 포함시키지 않습니다.

없는셈 치자구요…

Outline 설계를 돕는 도구

HTML5 Outliner http://gsnedders.html5.org/outliner/

서울시 웹사이트 쇼핑몰 웹사이트

브라우저 확장 프로그램

내가 왜 Outline을 신경 써야 할까?