HTML 의미론

개요

우리가 작성한 의도를 html로 정확하고 다채롭게 전달 할 수 있어야한다. 그러면 의미론은 무엇인가?

문제점

div, span의 경우 의미가 없는 태그이다. HTML 문서에 의미를 부여하는 태그들에 대한 이해가 필요하다.

목표

html5에 새로등장한 태그들을 익혀보자, 시맨틱태그들에 대해서 이해하고 활용하자

header footer

문서의 처음과 끝 부분을 담당하는 태그

• header: 도입부 헤딩 - 글로벌 네비게이션 바
• footer: 저자 저작권 연락처

section article

• section: 제목이 있는 주제별 콘텐츠 그룹 - 제목이 있고 컨텐츠가 있는 경우 사용
• article: 독립적으로 배포 가능한 완결형 콘텐츠: 뉴스기사, 블로그, 사용자의 댓글 -
  • 문서의 제목과 본문
  • sns의 게시물
  • 사용자의 댓글
• 문서의 제목으로 h1 ~ h6 사용하자

nav

• 현재 페이지 일부를 링크하고 있는 주요 탐색섹션

aside

• 부수적인 콘텐츠, 관련영역 꼭 옆에있는게 아니여도 됌

main

• 애플리케이션의 핵심 기능과 관련이 있는 콘텐츠, 페이지마다 반복되지 않는 내용을 포함한다.
• 헤더나 푸터, aside가 들어가면 안 된다.
• main은 최상위에 포함한다.

dialog

• 팝업(대화상자, 모달)을 사용하는 경우 dialog를 사용한다.

figure

• 이미지와 이미지 summary를 쓸 때 사요ㅕㅇ
• figcaption을 포함 하여 사용하기도 한다.

<figure>
    <figcaption>summary</figcaption>
</figure>

그 외

mark

• 독자의 주의를 끌기위한 태그
• 볼드체랑 노란색으로 하이라이팅해서 나타낸다.address
• 저작권 정보나 저자의 연락처에 사용한다.
• 사용자의 주소로 절대 사용하지 말 것
• p태그 안에 사용하지 말 것

ins , del

• ins는 추가한 내용 - 밑줄
• del은 삭제한 내용 - 중간줄
• 자식요소로 무엇이든 담을 수 있다. 투명한 태그

progress

• progress bar를 의미한다.
• css를 이용하여 프로그레스 바 개선이 가능하다.

b i s u (태그에 의미가 없는 강조용 으로 쓰인다)

• 의미가 없는 태그들
• 단 언제한번 사용해볼 법 할 수도?
• b - strong
• i - em
• s - del
• u - ins
• 오른쪽에 있는걸 먼저 사용하도록 하자

출처

• 패스트캠퍼스 더레드 강의 (The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명)
• https://developer.mozilla.org/ko/