👣 개요
인터넷 발전으로 인해 웹 페이지 마다의 일정한 규격 필요성이 대두되었다.
일정 규격 없이 무분별한 div 태그 사용은 웹문서에서 원하는 정보를 찾기 어렵게 만들었다.
이런 문제를 해결하기 위해 사이트마다의 공통적으로 사용되는 구조를 설계하기 위한 태그를 만들었고 이것을 Sementic Tag라고 한다.
이로서 대강의 사이트 구조를 파악할 수 있게 되었다.
👣 주요 태그 정리
<header>
머리글, 제목
<nav>
다른 페이지로의 이동을 위한 링크 공간
<aside>
양 옆 섹터.
<footer>
바닥글, 연락처 정보, 사이트 맵, 웹사이트를 하나로 묶고 SEO를 강화하는 데 도움이 되는 소셜 미디어 사이트에 대한 링크와 같은 추가 링크가 포함됨.
<main>
메인 내용을 담는 태그. 문서당 1개만 존재해야 함.
<article>
독립적인 글을 다루는 태그. 블로그 게시물, 뉴스 기사, 제품 리뷰 등등 독립적으로 존재할 수 있는 콘텐츠를 정의. 재사용이 가능하다는 특징이 중요하다.
<details>
사용자가 숨기거나 열어볼 수 있는 태그. 기본적으로 닫혀 있고 클릭하면 내용이 보이는 식으로 구현할 수 있다.
<figure>
일러스트레이션, 그래프, 사진, 코드 목록 등등의 콘텐츠.
<Section>
문서의 일부분, 조각들.
👣 시멘틱 태그 장점
구체적으로 Sementic Tag의 장점은 무엇이 있을까?
1. SE 최적화에 유리
검색 엔진이 웹 페이지를 더 쉽게 파악할 수 있게 한다.
2. 웹 접근성에 효율적
시각 장애인을 위한 웹 서핑 프로그램인 스크린 리더와 같은 환경에서 사용성을 향상시킨다.
3. 유지보수 용이성 향상
협업 과정 중 태그 이름만 보고도 어떤 영역인지 바로 확인 가능하다.