시맨틱 태그

HTML5 이전에는 <div>와 <span>을 사용하고, 여기에 id 및 class 등을 통해 구역을 나누었습니다. 하지만 시대가 발전하면서, 브라우저 및 웹 크롤러 등이 이해할 수 있는 의미를 포함한 태그의 필요성이 대두되었습니다.

시맨틱 태그(Semantic Tag)는 태그 내에 포함된 컨텐츠의 목적을 정의하는 태그로, 태그에 의미를 부여함으로써 브라우저가 웹 사이트의 구조를 파악하기 쉽도록 도와줍니다.

시맨틱 태그의 장점

가독성 향상

시맨틱 태그를 통해 콘텐츠의 명확하고 일관된 흐름과 구조를 만들 수 있습니다. 또한, 제목과 키워드 등 콘텐츠에서 중요하고 관련성 높은 부분을 강조하기 수월해집니다.

접근성 향상

시맨틱 태그를 활용하면, 스크린 리더 등과 같은 보조 기기에 웹 사이트 탐색에 관한 유용한 정보를 제공할 수 있습니다.

이를 통해 신체적, 인지적 장애가 있는 사람들을 포함하여 모든 사용자가 웹 사이트에 무리 없이 접근할 수 있도록 지원할 수 있습니다.

검색 엔진 최적화(SEO) 향상

시맨틱 태그는 웹 사이트를 관련 키워드에 대해 최적화하는 데 도움이 됩니다. 이를 통해 검색 엔진에서 웹 사이트의 노출 순위를 높일 수 있습니다.

시맨틱 태그의 종류

<header>: 문서 또는 섹션의 머릿글을 나타내는 태그로, 문서의 상단에 위치합니다. 일반적으로 로고, 내비게이션, 제목 등이 포함됩니다.
<nav>: 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 나타내는 태그입니다.
<footer>: 문서 또는 섹션의 바닥글을 나타내는 태그로, 문서의 하단에 위치합니다. 일반적으로 연락처 정보, 사이트 맵 등의 링크가 포함됩니다.
<main>: 문서의 텍스트 본문이나 콘텐츠를 나타는 태그로, 문서에서 유일해야 합니다.
<section>: 문서의 부분을 의미하는 태그로, 주제별 콘텐츠 그룹을 정의합니다.
<article>: 독립적인 글을 다루는 데 사용하는 태그입니다. 뉴스 기사, 블로그 게시물, 쇼핑몰의 상품 리뷰 등이 포함됩니다.
<aside>: <main> 태그의 옆에 위치하는 콘텐츠를 담는 태그입니다. 주로 문서에서 사이드바를 놓기 위해 사용합니다.
<details>: 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그입니다. 기본적으로 닫은 상태이지만, 클릭하면 확장되어 내용이 보이게 됩니다.
<summary>: <details> 태그에서 항상 보이는 부분을 렌더링하는 태그입니다. <details> 태그의 첫 번째 하위 항목이어야 합니다.
<figure>: 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정하는 태그입니다.
<figcaption>: <figure> 요소에 대한 캡션을 정의함으로써 설명을 추가하는 태그입니다.

더 자세한 정보는 www.w3schools.com를 참조하세요.

참조