[HTML] 시멘틱 태그

 

[HTML]

▶ 시멘틱태그(semantic): 의미론적 태그, 특정 태그에 의미를 부여하는 태그

- 웹 문서를 구조화한다

 

 

▶ 다양한 웹 페이지 구조

 

 

 

 

[시멘틱 태그]
<header> ~ </header>	머리말영역(페이지 제목, 페이지소개)
<nav> ~ </nav>	링크 등의 메뉴영역(페이지 목차)
<section> ~ </section>	웹 문서의 특정영역을 그룹화  (chapter, 문서의 장 혹은 절)
<main> ~ </main>	웹  문서에서 핵심이 되는 내용
<article> ~ </article>	개별 콘텐츠나 기사를 담는 영역
<aside> ~ </aside>	웹 문서에서 본문과 연관성이 적은 외부영역
<footer> ~ </footer>	꼬리말 영역(저자나, 저작권정보)

 

 

[시멘틱  블록 태그]
<figure> ~ </figure>	동영상, 사진 등 다양한 멀티미디어를 담는 영역
<detail> ~ </detail>	상세 정보를 담는 태그
<summary> ~ </summary>	<details>로 구성되는 블록의 제목 표현

 

[시멘틱  인라인 태그]
<mark> ~ </mark>	중요한 텍스트임을 표시
<time> ~ </time>	텍스트의 내용이 시간임을 표시
<meter> ~ </meter>	주어진 범위, %의 데이터 량 표시 (게이지(gauge))
<progress> ~ </progress>	작업의 진행 정도 표시

 

 

See the Pen Untitled by jin2304 (@jin2304) on CodePen.

 

 

 

참고문헌: HTML5 웹 프로그래밍 입문, 명품 HTML5 + CSS3 + Javascript 웹 프로그래밍