[HTML] 시맨틱(Semantic) 태그

 

※ 시맨틱 태그 등장배경 ※

    웹페이지의 구조를 잡기위해 div태그가 많이 사용되는데 무수히 많은 div 태그가 사용되어 id로 식별해줘야한다.

    하지만 그것에도 한계가 있고.... 구분하기가 많이 힘들기 때문에 시맨틱태그라는 것을 써준다.

    시맨택태그 -> 똑같이 div역할을 하긴 하지만 영역의 의미가 부가된 태그

 

html5에 적용되었으며, 앞으로 점차 사용 점유율이 늘어날 것으로 보인다

 

시맨틱(Semantic) 태그란?

<div>태그의 용도를 그대로 가져오면서 상세 카테고리별로 컴퓨터가 인지할 수 있게 목적별로 나눠 준 태그

 

종류

<header>

 웹 문서에서 머리말 영역을 나타낼 때 사용

        (제목, 제목 설명 등을 나타내는 요소 포함)

        body 안에 여러번 사용 가능

 

 

<nav>

navigation, 탐색 링크 정의

웹 문서나 문서 내 다른 부분으로 이동하는 부분을 나타내고자 할 때 사용

 

<aside>

웹 문서의 광고 같이 부가적인 정보를 구분하기 위해 사용

 

<section>

비슷한 그룹이나 문서를 묶기 위해 사용

 

 

<article>

기사들, 블로그 게시물, 포럼 게시물들 등 각종 정보글들을 분류하는 태그

 

 

 

<footer>

문서나 section의 바닥글을 정의

웹 문서의 저자정보, 저작권 정보, 이용 조건 등을 나타내기 위해 사용