HTML5 명세기준 (W3C에 있는 HTML5는 폐기됨)
- https://html.spec.whatwg.org/ (브라우저 제조사들의 연합) - Content model은 꼭 지켜져야하는 항목
웹표준 명세의 브라우저 구현 현황(호환성) 확인 (공식 표준이라도 제조사가 구현하지 않으면 의미 없음)
HTML학습 사이트
콘텐츠 카테고리
- https://developer.mozilla.org/ko/docs/Web/HTML/Content_categories
- https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content
HTML5부터는 블록 → Flow content, 인라인 → Phrasing Content 사용
아래는 whatwg에서 콘텐츠 카테고리에 대해 정의한 내용이다(display : block으로 렌더링됨)
- Metadata content
문서의 정보를 설명하고 다른 문서나 리소스와의 관계를 정의 (display : none으로 렌더링됨)
- Flow content :
문서의 주요 콘텐츠를 정의하기 위한 요소들의 모음. 문서의 구조와 의미를 나타내는 데 사용
(block, inline 모두 포함되어 있음)- a
- abbr
- address
- area (if it is a descendant of a map element)
- article
- aside
- audio
- b
- bdi
- bdo
- blockquote
- br
- button
- canvas
- cite
- code
- data
- datalist
- del
- details
- dfn
- dialog
- div
- dl
- em
- embed
- fieldset
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- header
- hgroup
- hr
- i
- iframe
- img
- input
- ins
- kbd
- label
- link (if it is allowed in the body)
- main (if it is a hierarchically correct main element)
- map
- mark
- MathML math
- menu
- meta (if the itemprop attribute is present)
- meter
- nav
- noscript
- object
- ol
- output
- p
- picture
- pre
- progress
- q
- ruby
- s
- samp
- script
- search
- section
- select
- slot
- small
- span
- strong
- sub
- sup
- SVG svg
- table
- template
- textarea
- time
- u
- ul
- var
- video
- wbr
- autonomous custom elements
- text
- Sectioning content :
문서의 콘텐츠를 논리적으로 그룹화하고 목차를 만들 때 사용 (display : block으로 렌더링됨) - Heading content :
제목 요소를 포함하는 카테고리 (일반적으로 Sectioning content 내에서 사용) - Phrasing content :
일반적인 인라인 요소 (display : inline, inline-block 혹은 none으로 렌더링됨)- a
- abbr
- area (if it is a descendant of a map element)
- audio
- b
- bdi
- bdo
- br
- button
- canvas
- cite
- code
- data
- datalist
- del
- dfn
- em
- embed
- i
- iframe
- img
- input
- ins
- kbd
- label
- link (if it is allowed in the body)
- map
- mark
- MathML math
- meta (if the itemprop attribute is present)
- meter
- noscript
- object
- output
- picture
- progress
- q
- ruby
- s
- samp
- script
- select
- slot
- small
- span
- strong
- sub
- sup
- SVG svg
- template
- textarea
- time
- u
- var
- video
- wbr
- autonomous custom elements
- text
- Embedded content :
페이지에 다른 리소스를 포함시키는 데 사용되는 요소(이미지, 비디오, 오디오 및 기타 문서 등)
(display : inline, inline-block 으로 렌더링됨)
- Interactive content :
사용자와 상호작용을 위한 요소. 키보드나 마우스로 조작 가능 (display : inline, inline-block 으로 렌더링됨) - Palpable content :
사용자가 화면에서 직접적으로 인지할 수 있는 콘텐츠(비어있지않는, hidden이없는)- a
- abbr
- address
- article
- aside
- audio (if the controls attribute is present)
- b
- bdi
- bdo
- blockquote
- button
- canvas
- cite
- code
- data
- del
- details
- dfn
- div
- dl (if the element's children include at least one name-value group)
- em
- embed
- fieldset
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- header
- hgroup
- i
- iframe
- img
- input (if the type attribute is not in the state)
- ins
- kbd
- label
- main
- map
- mark
- MathML math
- menu (if the element's children include at least one li element)
- meter
- nav
- object
- ol (if the element's children include at least one li element)
- output
- p
- picture
- pre
- progress
- q
- ruby
- s
- samp
- search
- section
- select
- small
- span
- strong
- sub
- sup
- SVG svg
- table
- textarea
- time
- u
- ul (if the element's children include at least one li element)
- var
- video
- autonomous custom elements
- text that is not inter-element whitespace
- Script-supporting elements :
스크립트를 지원하는 요소들의 집합(웹페이지에서 자바스크립트 코드 실행 등) - Transparent content models (투명 콘텐츠 모델)
문서에서 제거되도 문서가 유효하게 보여져야함- a, ins, del, object, video, audio, map, noscript, canvas..
더보기- a태그에 href 속성이 없어도 유효하다
- HTML5에서 a태그 안에 block요소 담을 수 있다
- p안에 a = 가능 / a안에 p 가능 / p 안에 a 안에 div 는 불가