1. div, span
- 아무런 의미가 없다
- 다른 적절한 요소가 없을때 마지막으로 선택할 수 있는 요소
<div>요소를 대체할 만한 요소들- h*, p, ul, ol, li, dl, d t, dd, blockquote, pre, address, …
- article, aside, nav, section, hgroup, header, footer, main, figure, figcaption, details, summary, dialog, datalist
<span>요소를 대체할 만한 요소들- a, em/strong, label, q, sub/sup, ins/del, code, dfn, abbr, cite, kbd, ruby, samp, var, small, b, u, i, s
- data, time, mark, output, meter, progress
2. Sectioning
- article, aside, nav, section
- hx, hgroup, header, footer : Sectioning 요소는 아니지만 함께 쓰이는 요소
[1] header, footer
<header>: 도입부, 헤딩, 헤딩 그룹, 목차, 검색, 로고<footer>: 저자, 저작권, 연락처, 관련 문서- 의미 범위 : Sectioning Root(body) 또는 Sectioning Content
- 반드시 필요한 요소는 아니지만 이런 의미일 때
<div>대신 사용하길 권장한다.
[2] section, article
<section>: 제목이 있는 주제별 콘텐츠 그룹 또는 응용 프로그램 영역<article>: 섹션 요소 중 독집적으로 배포 가능한 완결형 콘텐츠- 뉴스 기사, 블로그 본문, 사용자의 댓글 등
- 용법
- h1 ~ h6 요소를 포함하는 것을 강력하게 권장한다.
- header, footer 요소를 사용하는 것은 선택 사항이다.
- 중첩을 허용한다.
[3] nav
현재 사이트 또는 현재 페이지 일부를 링크하고 있는 주요 탐색 섹션이다.
- 사이트 또는 페이지의 주요 탐색 경로에 해당하지 않는 빵부스러기 링크, 풋터의 약관, 저작권 고지 같은 링크는 nav 요소로 적절하지 않다.
- 용법
- h1 ~ h6 요소를 포함하는 것을 강력하게 권장한다.
[4] aside
페이지의 주된 내용과 관련이 약해서 구분할 필요가 있는 섹션이다.
- 부수적인 콘텐츠, 관련 기사, 광고 등의 내용을 포함할 수 있다.
- 용법
- h1 ~ h6 요소를 포함하는 것을 강력하게 권장한다.
3. main
문서의 핵심 주제 또는 애플리케이션의 핵심 기능과 직접 관련 있는 콘텐츠 영역을 의미한다.
- 페이지마다 반복되지 않는 고유한 컨텐츠를 포함해야 한다.
- global nav bar, footer, aside는 적절하지 않다. - Sectioning Content가 아니므로 hx, header, footer 요소의 범위와 관련 없다.
- 하나의 페이지 안에서 하나의 main 요소만 표시할 수 있고 Sectioning 관련 요소(article, aside, nav, section, header, footer)의 자식이 될 수 없다.
- body, div 요소를 제외한 다른 요소의 자식이 될 수 없다.
4. dialog
사용자와 상호 작용하는 응용프로그램(대화상자)을 의미한다.
open속성을 추가하면 대화 상자가 활성화되고 사용자가 대화 상자를 통해 상호 작용할 수 있다.- 보통 입력 양식과 콘트롤을 포함하고 있으며 닫기 기능을 제공한다.
- 키보드 초점이
dialog요소 내부에서 순환하도록 처리해야 한다. (유의) - 팝업 같은거
5. figure, figcaption
문서의 주된 흐름을 위해 참조하는(부록으로 옮겨도 괜찮은) 독립적인 완결형 요소로서 이미지, 도표, 코드 등의 내용물과 설명(figcaption)을 포함한다.
<figure>
<img>
<figcaption>...</figcation>
</figure>- 선택적으로 처음 또는 마지막에
<figcaption>요소를 자식 요소로 포함할 수 있고 생략할 수 있다. <figure>안에서<figcaption>요소가 선언 된다면 한 번만 선언할 수 있다.
6. mark
독자의 주의를 끌기 위한 하이라이트
- 현재 독자의 행위나 관심에 따라 강조한 것
- 검색 결과 목록에서 사용자가 입력한 키워드
7. address
가까운 조상 <article> 또는 <body> 요소를 범위로하는 관련 연락처 정보
- 흔히
<footer>요소에 나타난다. <p>요소의 자식이 될 수 없다
8. ins, del
<ins>: 추가한 내용을 의미<del>: 삭제한 내용을 의미- 콘텐츠 모델이 투명해서 어떤 요소라도 포함할 수 있다.
- 여러 단락을 한꺼번에 포함하는 것은 부적절하다.
- ex) 쇼핑몰에서 정가, 할인가 표시할 때
9.progress
계산 또는 사용자 과업의 진척도를 의미한다.
- 원격 호스트의 응답을 기다려야 하는 경우도 있을 수 있기 때문에 진척도는 정확하지 않을 수 있다.
- 낡은 브라우저를 위해 value 값과 별도로 콘텐츠를 제공하는 것이 좋다.
10. b, i, s, u
과거에는 의미가 없는 요소였으나 현재 특별한 의미로 남아있는 요소들이다.
<b>: 강조할 의도가 없는 볼드 (<strong>요소를 고려)<i>: 현재 맥락과 다른 분위기 (<em>요소를 고려)<s>: 정확하지 않거나 관련 없는 (<del>요소를 고려)<u>: 오타, 중국 고유명사 등의 표기 (<ins>요소를 고려)
