How to Read W3C HTML5 Specification

발표자 소개

안녕하세요. 멀더끙입니다.

現 콘텐츠연합플랫폼(주) 퍼블리셔

오늘의 주제

HTML5 스펙 문서 읽기!

※ 주의!

본 내용은 어디까지나 멀더끙 개인의 의견으로, W3C의 입장과는 다를 수 있습니다.
또한 마크업 개발자에게 필요한 일부만을 소개하므로, 명세의 모든 부분을 다루지 않습니다.

명세를 왜 읽어야 하나?

Because it's there. George Mallory
하지만 그건 영어란 말이다! (부들부들)

조금이라도 쉽게 접근해보자!

Step1. 전부 다 읽을 필요는 없다.

마크업에 필요한 참조는 Section 3 ~ 4 정도.

특정 element에 대한 참조는 Section 4에.

HTML5 명세 색인 스크린샷

"Add developer-view styles" 버튼

"Add developer-view styles" 버튼을 눌러보면 브라우저 개발자가 봐야 할 내용을 숨겨줌.

Add developer-view styles 버튼 클릭에 따른 화면 변화 그림

Step2. 정의 · 상세 설명 · 예제

요소 명세 스크린샷 - s 요소 전체

Step3. 다음 용어들은 기억해둡시다.

요소 정의 부분

  • Categories
  • Contexts in which this element can be used
  • Content model
  • Content attributes
  • Tag omission in text/html
Categories
요소가 속하는 카테고리.
각 요소에 대한 Content Model을 정의할 때 사용.
Contexts in which this element can be used
해당 요소가 사용될 수 있는 환경
Content model
자손 요소로 포함되어야 하는 콘텐트에 대한 설명
즉, 여기에 기재되지 않은 카테고리의 요소는 자손으로 올 수 없음을 의미
Content attributes
요소에 정의 될 수 있는 어트리뷰트 목록
Tag omission in text/html
text/html 문법 에서 시작/종료 태그의 생략 가능 여부에 대한 설명

요소 설명 부분

  • represent
  • user agent
represent
요소가 가지고 있는 고유한 의미.
semantic
user agent
(대부분) 웹 브라우저
s 요소 명세 스크린샷

Step4. 명세의 표기법을 알아두자.

W3C Section 1.7.2 표기법 캡쳐사진
정의, 예제, 노트 표기 예 - li 요소 명세
주의 표기 예 - title 속성 명세
인터페이스 사용법 설명 예 - img 요소 명세

Step5. 번역본에 의존하지 말자.

HTML5 명세 현재 버전의 번역본은 없다.

KISA에서 번역한 문서나 클리어보스에서 번역한 문서 : D 문서에 대한 번역

번역은 번역자에 따라 정확하지 않을 수 있다.

영문의 뉘앙스를 그대로 담기 어렵다

"~ 해야 한다"
must should
"인용"
pull quote ≠ quotation citation

번역은 원문과 함께 보는 것이 좋다

Step6. 예제 코드를 구분하여 볼 것.

잘못된 예에 대한 예제 코드

Step7. 구글 번역을 활용하자.

번역 할 때에는 영어 -> 일본어 -> 한글 순 으로 번역하면 좀 더 정확한 번역이 나온다

nav 요소에 대한 명세를 구글 번역기로 돌려본 결과 캡쳐 사진

The important thing is to read one!

훗! (의미심장한 웃음 이모티콘)
끝난 줄 알았지?

알아두어야 할 사실

HTML5 컨텐츠 모델

인라인 요소는 블럭 레벨 요소를 포함할 수 없다?

a 요소는 인라인 요소이지만 블럭 레벨 요소를 포함할 수 있다?

HTML4.01 컨텐츠 모델
block-level emelent,
inline(character-level) element
HTML5 컨텐츠 모델

metadata, flow, sectioning, heading, phrasing, embedded, interactive, palpable

script-supporting element,

transparent content model

phrasing 컨텐츠는 flow 컨텐츠를 포함할 수 없다.
content model에 해당하는 것만 포함할 수 있다.

a 요소는 투명 컨텐츠 모델이기 때문에 flow 컨텐츠를 포함할 수 있다.

시맨틱

HTML5의 시맨틱 요소는 header, footer, section 등 뿐이다?

i, b, u 등은 의미를 가지지 않는다?

HTML5 명세 내 아무런 의미를 가지지 않는 요소는 div, span 요소 뿐!

그 외 요소들은 용도와 의미가 어느 정도 정해져있다.

마치며...