[HTML] 시맨틱 태그

시맨틱 태그

- 집을 지을 때에는 우선 방은 몇 개를 만들지, 거실, 주방, 화장실은 어디에 배치를 할 지 등 전체적인 구조를 정해야 함.

이처럼 웹 페이지를 만들 때도 HTML5의 시멘틱 태그를 이용하여 영역을 나누어서 기본 구조를 정하게 됨.

이렇게 하면 웹 문서의 머릿말과 본문인 콘텐츠, 그리고 꼬릿말의 영역이 구분이 되어 웹 브라우저가 웹 문서를 효율적으로 읽을 수 있게 됨.

-  또한 개발자들도 효율적으로 구분을 할 수 있어서 유지 보수에도 많은 도움이 됨
- 시멘틱(semantic) : 의미론적인의 뜻을 가지고 있음. 즉, 의미가 있는 태그라는 뜻
- HTML5에 도입된 시멘틱 태그는 개발자와 웹 브라우저에게 의미가 있는 태그를 제공함

 

시멘틱 태그의 태그 종류

1. header 태그

- 웹 브라우저의 상단에 존재하는 태그.
- 회사의 로고, 회원가입, 로그인 버튼들을 나타내는 태그.

2. footer 태그

- 웹 브라우저의 하단에 존재하는 태그.
- 일반적으로 저작권, 회사의 주소, 연락처, 약관 등에 대한 정보를 나타내는 태그.
                                    
3. article 태그

- 일반적으로 웹 문서의 본문에 해당하는 내용을 작성하는 태그.
    
4. section 태그

- 문서의 일반적인 영역을 설정하는 태그. article 태그 사용이 가능함.
                       
5. aside 태그

- 문서의 별도 컨텐츠 영역.  보통 광고나 기타 링크 등의 사이드 바를 설정하는 태그.
                                         
6. nav 태그 

- 다른 페이지 링크를 제공하는 영역.  보통 메뉴(Home, Content 등등) 설정시 사용함. 

 

 

참고 블로그

 

https://hianna.tistory.com/278

[HTML5] 시맨틱 태그(Semantic Tag)란?