article
- 원론적으로 문서로부터 분리되어도 그 자체의 의미를 잃지 않고 제 기능을 하는 내용을 담음
- 자동으로 닫는 태그 X
- 시멘틱 o
- 실질적으로 뉴스 기사, 게시글 등을 담음
aside
- 문서의 주된 내용과 직접적 관련이 없는 내용을 담음
- 자동으로 닫는 태그 X
- 시멘틱 o
div(Divide)
- 단순히 구획을 나누는 플로우 컨텐츠 태그, 한줄 전체를 차지, 태그가 끝나면 반드시 줄넘김
- 자동으로 닫는 태그 X
- 시멘틱 X
footer
- 문서의 하단부 내용을 담음
- 필수는 아니지만, 존재하는 게 권장됨, 하나의 HTML 문서에 한개만 있어야 함
- 사이트의 사이트맵(Site Map), 저작권 표기, 제작자(회사, 단체 등)의 정보(연락처, 주소), 사업자 정보 등을 표기하기 위함
- 자동으로 닫는 태그 X
- 시멘틱 o
header
- 문서의 상단부 내용을 담음
- 필수는 아니지만, 존재하는 게 권장됨, 하나의 HTML 문서에 한개만 있어야 함
- 사이트의 로고, 메인 메뉴, 검색양식(<form>) 등을 담기 위해 사용, 규칙까진 아니고 관례
- 자동으로 닫는 태그 X
- 시멘틱 o
main
- 문서에서 주된 내용을 담음
- 필수는 아니지만, 존재하는 게 권장됨, 하나의 HTML 문서에 한개만 있어야 함
- 자동으로 닫는 태그 X
- 시멘틱 o
nav(Navigator)
- 서로 관련있는 링크, 기능들을 모아놓음
- 자동으로 닫는 태그 X
- 시멘틱 o
section
- 원론적으로 문서로부터 분리되면 그 자체의 의미를 잃고 제 기능을 못하는 내용을 담음
- 일반적으로 시멘틱이 있는 나머지 컨테이너 태그들(article, aside, footer, header, main, nav)중 사용할만한 것이 없을 때
- 자동으로 닫는 태그 X
- 시멘틱 o
span
- 단순히 구획을 나누기 위한 구문 컨텐츠 태그, 필요한 공간만큼만 차지, 태그가 끝나도 줄넘김 없음
- 자동으로 닫는 태그 X
- 시멘틱 X