HTML을 어떻게 공부해야 하는가

Flow content (플로우 콘텐츠)

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

Metadata content (메타 데이터 콘텐츠)

• 콘텐츠와 문서를 구조화하는 요소를 의미
• 다른 콘텐츠의 표시, 동작, 관계 등을 설정
• 일부 요소는 경우에 따라 플로우 콘텐츠 (link, meta, noscript, script, template)
• display: none

Heading content (헤딩 콘텐츠)

• 섹셔닝 콘텐츠의 헤더.
• 섹셔닝 콘텐츠가 없어도 헤딩 콘텐츠가 있으면 암시적으로 섹션(==문서의 개요)이 형성된다.
• display: block

Sectioning content (섹셔닝 콘텐츠)

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

Phrasing content (프레이징 콘텐츠)

• 구문 콘텐츠. 단락을 형성하는 콘텐츠.
• display: inline | inline-block | none
• none = link, meta, noscript, script, template

Embedded content (임베디드 콘텐츠)

• 모든 임베디드 콘텐츠는 구문 콘텐츠이다.
• 외부 자원을 지원하지 않는 겿우 대체 자원을 명시할 수 있다.
• display: inline | inline-block

Interactive content (인터렉티브 콘텐츠)

• 사용자와 상호작용할 수 있는 콘텐츠.
• 입력장치(키보드, 마우스)로 조작할 수 있다.
• display: inline | inline-block

Palpable content (팰퍼블 콘텐츠)

• 비어있지 않은, 볼 수 있는 콘텐츠.
• 클릭하거나 드래그하거나 영역 지정을 할 수 있음.
• hidden 속성이 없는

Script-supporting element (스크립트 지원 요소)

• 렌더링하지 않지만 사용자에게 기능을 제공
• script, templeate

Transparent content models (투명 콘텐츠 모델)

• 투명 콘텐츠 모델. 부모의 콘텐츠 모델을 따른다.
• 투명한 요소를 제거해도 부모와 자식 관계가 문법적으로 유효해야 한다.
  a, ins, del, object, video, audio, map, noscript, canvas

---

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님