[HTML5] 시맨틱 태그(Semantic Tag) <section> <article> 등

🏷️ HTML - 태그의 형태와 사용법

 

HTML5 이전의 HTML 버전에서는, <div>, <span>과 같은 일반적인 컨테이너 태그를 사용하여 레이아웃을 구성하였다.

기본적으로 컨테이너 태그를 쓰면서, 다음과 같이 id나 class 속성을 통해 구분하는 방식이었다.

<div id="header">제목<div>

 

 

🏷️ 한계

 

컨테이너 태그들은 단순히 콘텐츠를 구분하는 역할만 하고 그 자체로 어떤 의미를 가지지 않기 때문에,

웹페이지의 의미와 구조를 설명하는 데에는 적합하지 않다.

 

 

🏷️ HTML5 - 태그의 형태와 사용법

 

시맨틱 태그(semantic tag)가 등장했다.

시맨틱 태그는 그 자체로 의미를 가지며, 웹페이지의 구조와 콘텐츠를 더 명확하게 표현할 수 있도록 돕는다.

다음과 같이 태그로 직접 사용할 수 있다.

➡ <header> <article> <aside> <section> <nav>...

 

cf) 컨테이너 태그와 비교했을 때 화면상으로 나타나는 차이는 없다.

 

 

🏷️ 시맨틱 태그의 장점

 

검색 엔진이나 스크린 리더 등이 해당 영역이 어떤 영역이며 어떤 내용을 다루고 있는지 알 수 있게 된다.

즉, 전체적인 문서의 구조를 의도한 대로 받아들여 웹페이지의 의미를 이해하기 쉬워진다.

 

몇 가지 시맨틱 태그의 역할을 알아보자!

 

 

🏷️ <nav>

 

네비게이션 링크를 포함하는 부분을 나타낸다.

<nav>
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">소개</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</nav>

 

 

🏷️ <section>

 

주제별로 콘텐츠를 묶을 때 사용한다. (의미 있는 섹션을 정의하는 데 사용한다.)

주로 제목을 나타내는 hN 태그와 함께 사용한다.

<section id="home">
    <h2>홈 섹션</h2>
    <p>홈 페이지 내용</p>
</section>
<section id="about">
    <h2>소개 섹션</h2>
    <p>소개 내용</p>
</section>

 

 

🏷️ <article>

 

독립적으로 구분되거나 재사용 가능한 콘텐츠를 정의하는 데 사용한다.

<article>
    <h2>시맨틱 태그</h2>
    <p>시맨틱 태그가 뭘까요~?</p>
    <footer>
        <p>게시일: 2024년 4월 5일</p>
    </footer>
</article>

 

🏷️ <aside>

 

주요 콘텐츠와 직접적으로 연관되지 않은 부가적인 콘텐츠를 정의하는 데 사용한다.

 

 

🏷️ 결론

 

시맨틱 태그를 사용하면 웹페이지의 구조와 콘텐츠를 의미론적으로 정의하여 검색 엔진 최적화(SEO)와 웹 접근성을 향상시킬 수 있다.

 

 

 

cf)

스크린 리더: 시각 장애를 가진 사람들이 컴퓨터 화면을 읽을 수 있도록 도와주는 보조 기술. 화면의 내용을 음성으로 변환하여 사용자에게 전달

네비게이션 링크: 웹사이트나 앱에서 다른 페이지로 이동하거나 특정 섹션으로 스크롤하는 데 사용되는 링크

검색 엔진 최적화(SEO: Search Engine Optimization): 웹사이트를 검색 엔진에서 노출되기 좋도록 최적화하여 사용자들이 해당 사이트를 더 쉽게 발견하고 방문할 수 있도록 하는 프로세스