[ HTML | semantic tag ] 시맨틱 태그

HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위이다
HTML의 최신 버전인 HTML5에서는 시맨틱 웹이 중시되면서 여러 시맨틱 요소가 새롭게 만들어졌음

태그의 종류

div : 한 줄을 다 차지하는 공간을 잡아줌
span : 태그 안의 값의 크기만큼 공간을 잡아줌
img : 이미지를 넣어줌
a : 하이퍼 링크를 걸어줌
ul : 순서가 없는 리스트로 초기 설정 > li 와 짝지어 나옴

등등..

시맨틱 태그란?

이미 의미가 있는 요소 태그
예를 들어 h1태그를 사용하면 자동으로 글씨 크기를 키우고 강조해줌

시맨틱 태그를 사용하는 이유

1. 검색 엔진이 웹페이지들을 방문할 때 시맨틱 요소를 중요한 키워드로 고려하기 때문에 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다는 것
2. 여러 개발자가 함께 작업할 때 div 요소보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문. 같은 이유로 시멘틱 태그 안의 내용은 div요소보다 내용을 예측하기 쉽다

시맨틱 태그의 종류

article : 독립적이고 자체 포함된 콘텐츠
aside : 본문의 주요 부분을 표시하고 남은 부분을 설명. 사이드바나 광고창 부분에 주로 사용
footer : 페이지의 아랫부분에 위치, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용
header : 페이지의 윗부분에 위치. 사이트의 제목, 선택적으로 상단바나 검색창 등이 위치
nav : 내비게이션의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소
main : 문서의 주된 콘텐츠

웹디자인 기능사 시험에서는 div말고 시맨틱 태그를 사용해야하니까 기억해두자구용~^^*