Semantic 태그 정리

웹사이트 구조를 구성하는 의미 있는 Semantic 태그에 대해 간단히 정리해보려 한다.

 

<header> : 웹 페이지의 제목이나 로고를 나타냅니다. 일반적으로 사이트 상단에 위치하며, 전체 페이지의 머릿말을 담고 있습니다.

<nav> : 메뉴 항목을 감싸기 위해 사용됩니다. 주로 네비게이션 메뉴의 링크들을 이 태그 내에 묶어 구분짓는 데 활용됩니다.

<main> : 웹 페이지의 주요 콘텐츠 영역을 정의합니다. 이 부분은 일반적으로 페이지의 가장 중요한 내용을 담고 있으며, 하나의 페이지에는 하나의 <main> 태그만 있어야 합니다.

    <article> : <main> 내에서 독립적으로 구분되는 콘텐츠 블록을 나타냅니다. 예를 들어, 뉴스 기사, 블로그 게시물, 포럼 게시물과 같은 독립된 컨텐츠를 <article> 태그로 둘러싸는 것이 좋습니다.

        <section> :  더 작은 섹션이나 주제 영역을 나타내기 위해 사용됩니다. <article> 내에서도 더 작은 섹션들을 구분하거나 페이지의 다른 부분에서 관련된 콘텐츠를 그룹화할 때 사용됩니다.

    <aside> : 주요 콘텐츠와 직접적인 연관이 없는 보조 콘텐츠를 정의합니다. 이 태그를 사용하여 사이드바, 광고, 사이드 메뉴, 관련 링크 등을 나타낼 수 있습니다.

<footer> : 웹 페이지의 하단 부분에 위치하며 부가 정보나 저작권 정보, 연락처 정보와 같은 부가적인 내용을 제공합니다.

 

이러한 시맨틱 태그를 사용하면 웹 페이지의 구조가 명확해지고, 웹 검색 엔진이 내용을 이해하는 데 도움을 주며, 웹 접근성을 향상시키는 데 도움이 됩니다. 이러한 태그를 적절하게 활용하여 웹 페이지를 설계하면 유지보수와 확장이 용이해집니다.