HTML 표준 명세 읽어보기

웹의 근간이 되는 HTML. 하지만 자바스크립트나 웹 프레임워크 공부에 밀려 그만큼 심도있게 공부하지는 못했던 것 같습니다. 웹개발 시 간과해서는 안되는 SEO, 웹 접근성 등을 위해서라도 HTML과 더 친해지려고 합니다.

 

HTML을 학습하기 위한 유용한 곳들

1. HTML 예제를 보면서 배우기

구글에 HTML 요소를 검색하면 가장 먼저 등장하는 곳으로 가장 유명한 곳들이 아닐까 합니다. 여러 예제를 확인할 수 있어 유용합니다.

https://www.w3schools.com/

W3Schools Free Online Web Tutorials

https://developer.mozilla.org/

MDN Web Docs

 

2. HTML 명세 확인하기

HTML 명세는 2019년 이래로 whatwg라는 브라우저 제조사 연합 커뮤니티에서 유지보수를 하고 있습니다. W3C HTML 명세는 폐기되었고 바로 여기가 living standard입니다.

https://html.spec.whatwg.org/

HTML Standard

 

3. HTML 브라우저 지원 현황 확인하기

HTML 요소가 표준 명세에서 정의돼 있는 표준이라고 하더라도 서비스하는 브라우저에서 지원하지 않는다면 소용이 없습니다. 크로스 브라우징을 위해서는 필수로 확인해줘야 합니다.

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

HTML 콘텐츠 카테고리

HTML 요소는 하나 이상의 콘텐츠 카테고리를 갖고 있습니다. 유사한 특성을 가진 HTML 요소들끼리 묶어놓은 것인데요. 이 카테고리를 이해하고 있어야 HTML 명세를 제대로 이해할 수 있습니다.

 

HTML 컨텐츠 분류 (출처: mozilla)

 

Flow

• body에 포함할 수 있는 모든 요소
• base, style, title 요소를 제외한 나머지 모든 요소

Metadata

• 문서의 표시나 동작을 설정
• 주로 문서의 헤드 안에 들어가는 요소
• base, link, meta, noscript, script, style, template, title
• display: none 렌더링

Heading

• 섹션의 타이틀을 정의함
• 섹셔닝 콘텐츠가 없이 사용하면 암시적인 섹션이 형성됨
• h1~h6, hgroup
• display: block 렌더링

Sectioning

• 문서의 개요를 형성
• 헤딩, 헤더, 푸터의 범위를 정의
• 각 섹셔닝 콘텐츠는 암시적인 개요를 형성
• 섹셔닝 콘텐츠와 헤딩 콘텐츠를 함께 사용하면 명시적인 개요를 형성
• article, aside, nav, section
• display: block 렌더링

Phrasing

• 구문 콘텐츠로 단락을 형성함
• a, abbr, area, audio, b, bdi, bdo, br, ...
• display: inline | inline-block | none 렌더링

Embedded

• 외부 자원을 참조하는 콘텐츠
• audio, canvas, embed, iframe, img, math, object, picture, svg, video
• display: inline | inline-block

Interactive

• 사용자와 상호작용할 수 있는 콘텐츠
• a, audio, button, details, embed, iframe, img, input, label, select, textarea, video
• display: inline | inline-block

Palpable

• 비어있지 않고 볼 수 콘텐츠
• a, abbr, address, article...

Transparent

• 부모의 콘텐츠 모델을 따름
• 이 요소가 없어져도 전체 문법 구조가 유효해야 함
• a, ins, del, video

 

HTML 명세 살펴보기

아래는 whatwg에서 제공하는 button 요소에 대한 설명입니다. 사실 여태껏 개발을 하면서 HTML 명세를 살펴본 적은 없습니다. 들어가서 살펴보니 HTML 요소의 맥락적인 정보를(가능한 부모, 자식 요소) 알려주는 것이 새롭습니다.

 

button element (출처: whatwg)

 

우선 Contexts는 가능한 부모 요소를 유추할 수 있게 해줍니다. 이 정보는 비규범적이라서(non-normative) 반드시 지켜야 하는 것이 아니라 대체적으로 그러하다 정도로 받아들이면 됩니다.

반면, Content model은 가능한 자식 요소 정보를 알려줍니다. 이 정보는 규범적이고(normative) 반드시 따라야 하는 정보입니다.

 

참조

Content categories