시맨틱 태그 소개: <header>, <nav>, <article>, <section>, <footer>

시맨틱 태그 소개: <header>, <nav>, <article>, <section>, <footer>

HTML5에서 도입된 시맨틱 태그들은 웹 페이지의 구조와 의미를 명확하게 전달하는 데 큰 역할을 합니다. 이번 글에서는 몇 가지 주요한 시맨틱 태그인 <header>, <nav>, <article>, <section>, <footer> 에 대해 자세히 알아보겠습니다.

에 대해 자세히 알아보겠습니다.

<header>

<header> 요소는 웹 페이지의 머리말을 정의하는 데 사용됩니다. 주로 사이트 로고, 제목, 메뉴 등과 같은 콘텐츠를 포함합니다. <header> 요소는 웹 페이지의 상단 영역을 의미적으로 그룹화하여 구조를 명확히합니다. 보통 웹 사이트의 상단에 위치하며, 웹 페이지의 식별 및 탐색에 중요한 역할을 합니다.

<nav>

<nav> 요소는 웹 페이지의 네비게이션 부분을 정의하는 데 사용됩니다. 일반적으로 주 메뉴, 사이드바 메뉴, 목차 등과 같은 네비게이션 요소를 포함합니다. <nav> 요소를 사용하면 사용자는 웹 페이지 내에서 중요한 링크 및 페이지 구조를 파악할 수 있습니다. 네비게이션 요소를 명확하게 정의하여 웹 사이트의 탐색을 향상시킬 수 있습니다.

<article>

<article> 요소는 독립적인 콘텐츠 영역을 정의하는 데 사용됩니다. 뉴스 기사, 블로그 글, 포럼 게시물 등과 같이 완전한 정보 조각을 표현합니다. <article> 요소는 자체적으로 완전한 콘텐츠로 이해될 수 있으며, 독립적으로 배포하거나 재사용할 수 있는 단위입니다. 웹 페이지 내에 여러 개의 <article> 요소가 포함될 수 있습니다.

<section>

<section> 요소는 웹 페이지의 일반적인 섹션을 정의하는 데 사용됩니다. 문서의 주제나 콘텐츠 그룹을 나타내는 데 활용됩니다. <section> 요소는 목차, 콘텐츠 영역, 독립적인 기능의 그룹 등을 포함할 수 있습니다. 일반적으로 <section> 요소는 웹 페이지의 구조를 조직화하고 의미적으로 그룹화하는 데 사용됩니다.

<footer>

<footer> 요소는 웹 페이지의 바닥글을 정의하는 데 사용됩니다. 저작권 정보, 연락처, 관련 링크 등과 같은 부가 정보를 포함할 수 있습니다. 웹 페이지의 하단 영역을 의미적으로 그룹화하여 구조를 명확히합니다. <footer> 요소는 웹 페이지의 마지막 부분에 위치하며, 보통 사이트 링크나 저작권 정보 등이 포함됩니다.

마무리

시맨틱 태그인 <header>, <nav>, <article>, <section>, <footer>는 웹 페이지의 구조를 의미적으로 명확하게 표현하기 위해 사용됩니다. 이러한 시맨틱 태그를 적절히 활용하여 웹 페이지를 구축하면 검색 엔진 최적화와 웹 접근성을 향상시킬 수 있습니다. 다음 글에서는 HTML의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!