HTML 의미론

• div, span은 아무 의미가 없다.

sectioning

• hx, hgroup, header, footer → 섹셔닝은 아니지만 함께 쓰는 요소
• article, aside, nav, section → 섹셔닝 요소

header, footer

• 여러번 사용해도 됨

section, article

• section: 제목이 있는 주제별 콘텐츠 그룹
• article: 섹션 요소 중 독립적으로 배포 가능한 완결형 콘텐츠. 뉴스 기사, 블로그 본문, 사용자의 댓글 등.
• h1~6 요소 사용을 강력하게 권장, header / footer 요소 사용은 선택사항
• 중첩 허용 (section 안 section, article 안 article)

nav

• 현재 사이트 또는 현재 페이지 일부를 링크하고 있는 주요 탐색 섹션.
• 빵부스러기 링크, 약관, 저작권 고지 같은 링크는 적절하지 않음.
• h1~6 요소 사용을 강력하게 권장

aside

• 페이지의 주된 내용과 관련이 약해서 구분할 필요가 있는 섹션
• 부수적인 콘텐츠, 관련기사, 광고 등의 내용을 포함할 수 있다
• h1~6 요소 사용을 강력하게 권장

main

• 문서의 핵심 주제 또는 애플리케이션의 핵심 기능과 직접 관련있는 콘텐츠 영역을 의미.
• 페이지마다 반복되지 않는 내용을 포함하여야 한다.
• 섹셔닝 콘텐츠가 아니므로 h1~6, header, footer 요소의 범위와 관련없음.
• 하나의 페이지 안에서 하나의 main 요소만 표시 가능
• 섹셔닝 관련 요소의 자식이 될 수 없다.
• body, div 요소를 제외한 다른 요소의 자손이 될 수 없다.

dialog

• 사용자와 상호 작용하는 응용 프로그램(대화상자)을 의미
• 보통 입력 양식과 콘트롤을 포함하고 있으며 닫기 기능을 제공한다.
• 키보드 초점이 요소 내부에서 순환하도록 처리하여야 한다.

figure, figcation

• figcation을 사용하는 것이 적절하다.
• 단 한번 자손으로 인정

mark

• 독자의 주의를 끌기 위한 하이라이트.
• 현재 독자의 행위나 관심에 따라 강조한 것.
• 검색 결과 목록에서 사용자가 입력한 키워드.

address

• 가까운 조상 article 또는 body 요소를 범위로 하는 관련 연락처 정보.
• p 요소의 자손이 될 수 없음 (프레이징 요소가 아니므로)

ins, del

• ins: 추가한 내용을 의미
• del: 삭제한 내용을 의미
• 콘텐츠 모델이 투명해서 어떤 요소라도 포함할 수 있음
• 여러 단락을 한번에 포함하는 것은 부적절하다.

progress

• 계산 또는 사용자 과업의 진척도
• 원격 호스트의 응답을 기다려야 하는 경우도 있기 때문에 정확하지 않을 수 있다.
• 오래된 브라우저를 위해 value 값과 별도로 콘텐츠를 제공하는 것이 좋다.

b, i, s, u

• b: 강조할 의도가 없는 볼드. strong 요소 고려
• i: 현재 맥락과 다른 분위기. em 요소 고려
• s: 정확하지 않거나 관련 없는. del 요소 고려
• u: 오타, 중국 고유명사 등의 표기. ins 요소를 고려

---

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