본문 바로가기

학습/HTML

[HTML]시맨틱 태그(Semantic Tag)

1. 메타 데이터란
데이터에 대한 데이터

2. 시맨틱 태그
특정 의미를 가진 태그
영역을 의미있게 나눌 때 사용한다.
div 태그와 기능은 완전히 같다.
작성하는 사람의 의도에 맞게 사용해야한다.
아주 엄격한 사용법이 있는것은 아니다.

header
도입부를 나타내는 태그

nav
사이트 안에서 이동하는 메뉴 영역

main (한페이지에서 한번 사용해야한다)
본문

footer
영역 아래쪽에서 정보를 담고 있는 태그

article
독립적이고 완전한 내용을 가지고 있는 태그(ex: 블로그 게시글, 댓글)

section 
주제에 맞게 영역을 나눌 때 사용하는 태그

figure
이미지와 이미지 설명


3. 시맨틱 태그의 장점
- 검색 엔진 최적화(Search Engine Optimization) SEO
헤드 태그에 메타 태그를 꼼꼼하게 작성하고 시맨틱 태그를 사용한다.
검색 서비스들은 메타데이터랑 시맨틱 태그로 평가를 내린다.

- 웹 접근성(Web Accessibility) A11y
인터넷 사용에 제한이 있는 사람을 위해 정보를 제공해주는 역할

- 개발자 관점
개발자가 시맨틱 태그를 읽고 이해하기 쉬워서 생산성을 높일 수 있다.

'학습 > HTML' 카테고리의 다른 글

[HTML]폼 태그  (0) 2023.10.18
[HTML]리스트, 테이블, 멀티미디어 태그  (0) 2023.10.18
[HTML]링크  (2) 2023.10.18
[HTML]HTML 기본 정리 - 1  (2) 2023.10.17