HTML 문서 구조화를 위한 시맨틱 태그 [Semantic Tag]

출처 : 학교 강의자료

 

시맨틱 태그

 

1. <header>

머리말

 

2. <nav>

하이퍼링크 집합 / 목차

 

3. <section>

본문 / 장

 

4. <article>

본문과 연관 있는 독립적 영역

 

5. <aside>

본문과 벗어난 노트나 팁

 

6. <footer>

꼬리말

 

 

위치나 색, 모양 등이 자동으로 결정되는 것이 아니기 때문에

CSS3를 이용해 직접 지정 해줘야한다.

 

 

 

시맨틱 블록 태그

 

1. <figure>

그림(사진,차트,삽화,소스코드 등)으로 블록화

 

2. <details>

상세정보

 

3. <summary>

details의 제목 표현

 

 

 

시맨틱 인라인 태그

 

1. <mark>

중요한 텍스트

 

2. <time>

시간임을 표시

 

3. <meter>

범위나 퍼센트의 데이터 량 표시

 

4. <progress>

작업 진행정도