[HTML/CSS] 시맨틱 태그 (Semantic Tag)

시맨틱 태그(Semantic Tag)의 사전적 정의는 "의미가 있는 태그"입니다. 의미가 있는 태그란 태그 이름으로부터 어떤 내용을 가지고 있는지 유추할 수 있는 태그입니다. 

<div>, <span> : 의미가 없는 태그 

<header>, <form>, <table> : 의미가 있는 태그 

 

▶ 시맨틱 태그의 장점

① 검색 엔진 최적화 (SEO : Search Engine Optimization)

검색 엔진은 여러 웹페이지들의 자료를 수집하고 웹페이즈를 색인화합니다. 이 때, 웹페이지는 시맨틱 태그를 이용함으로써 검색 엔진에게 더 많은 정보를 제공할 수 있습니다. 검색 엔진은 검색 키워드를 기준으로 검색 결과들의 순위를 조정할 때 더 많은 정보를 제공하는 웹페이지에 높은 우선 순위를 부여합니다. 우선 순위를 바탕으로 검색 결과가 정렬되기 때문에 시맨틱 태그를 적절히 잘 사용한 웹페이지는 상단에 노출됩니다.

 

② 웹 접근성

웹 접근성은 웹에 접근하는 것에 불편함을 겪는 사람들(노령자, 장애인)도 웹사이트의 모든 정보와 기능에 접근할 수 있도록 하는 것입니다. 웹 브라우징을 도와주는 보조 프로그램들은 웹페이지의 시맨틱 태그들을 통해서 웹페이지의 내용을 사용자들에게 더 정확히 전달할 수 있습니다. 높은 웹 접근성이 꼭 노령자나 장애인들에게만 도움이 되는 것만은 아닙니다. 컴퓨터와 핸드폰과는 다른 형식의 전자기기들(스마트워치, VR)등이 생겨나면서 기존의 방식과는 다르게 웹페이지에 접근해야 할 때 웹 접근성이 도움이 됩니다. 또한, 사고로 인해 일시적으로 불편함을 겪는 사람들, 환경의 제한(주변이 너무 밝거나 오디오를 사용하면 안되는 상황 등)이 존재하는 사람들도 모두 웹 접근성으로부터 도움을 받습니다.

 

③ 개발의 용이성

시맨틱 태그는 기본적으로 자신이 어떤 태그인지 이름으로 나타냅니다. 개발할 때 모든 태그를 div로 하여 클래스 이름만으로 구분 짓는 것보다 고유한 이름이 있는 태그들을 사용하는 것이 코드를 더 효율적으로 작성할 수 있고, 코드를 분석할 때도 무엇을 의도했는지 쉽게 파악할 수 있습니다. 

 

▶  주요 시맨틱 태그 종류

1. <header>

- 웹페이지를 소개할 때 사용되는 태그입니다. 주로 한 개 이상의 제목 태그(<h1> ~ <h6>), 로고, 작성자 정보를 담고 있습니다. 

<header>
    <h1>About Header Tag</h1>
    <p>written by 1235</p>
</header>

2. <nav>

- 현재 페이지 안에서나 다른 페이지로 이동할 수 있는 링크들의 집합을 정의하는 태그입니다. 모든 링크들을 <nav> 요소로 넣는 것보다는, 주요 링크들만 있는 것이 바람직합니다. 

<nav>
    <a href="./link1">Link 1</a>
    <a href="./link2">Link 2</a>
    <a href="./link3">Link 3</a>
</nav>

3. <section>

- 문서의 전체적인 내용과 관련이 있는 글 부분을 나타내는 태그입니다. 전체적인 흐름이 있기 때문에 다른 <section> 태그에 있는 내용과 연결이 되는 것이 좋습니다. 섹션에는 보통 내용과 함께 제목도 적어주는 것이 일반적입니다.

<section>
    <h3>HTML</h3>
    <p>HTML(Hyper Text Markup Language) is the standard markup language for Web pages.</p>
</section>
<section>
    <h3>History of HTML</h3>
    <p>First HTML was created by Tim Berners Lee at 1991.</p>
</section>

4. <article>

- <section> 태그와 비슷하게 글 부분을 나타내는 태그이지만, 문서와는 독립적인 내용을 담고 있다는 점에서 차이가 있습니다. 예시로는 게시물, 잡지 또는 신문 기사가 있습니다.

<article>
    <h3>Apple</h3>
    <p>Red, tasty fruit.</p>
</article>
<article>
    <h3>Banana</h3>
    <p>Yellow, tasty fruit.</p>
</article>

 

5. <aside>

- 주변 내용과 간접적으로 연결된 내용을 정의하는 태그입니다. 주로 사이드바로 사용됩니다.

 

6. <main>

- 문서의 주요 내용, 즉 본문을 가르키는 태그입니다. 한 페이지 안에 <main> 태그는 최대 1개만 존재해야 하고, 다른 <article>, <aside>, <header>, <nav>와 같은 태그의 내부에 존재해서는 안됩니다. 

 

7. <footer>

- 웹페이지의 마지막 부분에 사용되는 태그입니다. 주로 포함되는 내용에는 저작권 정보, 연락처, 사이트맵, 웹페이지 윗부분으로 연결되는 링크가 있습니다.