HTML 기초 공부(3) - 시맨틱 요소

시맨틱 요소(Semantic elements)란 무엇인가?

Semantic

의미의, 의미론적인 을 뜻하는 단어다.

 

즉, 의미가 있는 요소. 요소 자체에 의미를 부여하여 콘텐츠의 의미를 명확하게 설명하는 요소를 말한다.

---

웹사이트의 블로그를 보면 흔히들 카테고리 등을 표시해주는 사이드 바나 제목을 표시해주는 공간이 있는 형태를 자주 봤을 것이다. 그리고 대다수의 블로그가 이러한 형식을 지킨다.

 

블로그를 탐색하려면 어찌되었든 간에 '글'이 있는 공간이 필요하고

그 글들을 찾을 '탐색기'가 있는 공간도 필요하고

'제목'을 넣을 공간도 필요하기 때문이다.

 

그렇다면 이렇게 다수가 비슷하게 사용하는 요소들을 고정된 약속을 통해서 좀 더 쉽고 명확하게 알 수 있으면 어떨까? 그런 역할을 하는 것이 시맨틱 요소이다.

 

과거에는 이러한 요소들 없이 <div> 요소로 모든 레이아웃을 구성했지만 시맨틱 요소가 등장한 이후로 각 영역의 의미를 명확하게 나타낼 수 있게 되었다.

 

대표적인 시멘틱 요소는 다음과 같다.

• <header>: 웹 페이지나 섹션의 머리말. 제목, 로고, 탐색 메뉴 등을 포함할 수 있다.
• <nav>: 탐색 메뉴를 나타낸다.
• <article>: 독립적인 콘텐츠를 나타낸다. 블로그 게시물, 뉴스 기사 등.
• <section>: 문서의 일반적인 섹션을 나타낸다. 주제별 콘텐츠를 그룹화하는 데 사용된다.
• <aside>: 주요 콘텐츠와 관련된 부가적인 콘텐츠를 나타낸다. 사이드바, 광고 등이 해당된다.
• <footer>: 웹 페이지나 섹션의 바닥글을 나타낸다. 저작권 정보, 연락처 정보 등을 포함할 수 있다.
• <main>: 문서의 주요 콘텐츠를 나타낸다.
• <figure>, <figcaption>: 이미지, 비디오 등 미디어 콘텐츠와 설명을 함께 묶어서 나타낸다.

---

그렇다면 비시맨틱 태그(Non-Semantic Tags)란 무엇인가?

앞서 시맨틱 태그에 대해 설명했듯이 시맨틱 태그란 일종의 역할이 정해진 태그를 말한다. 반대로 비 시맨틱 태그는 HTML 요소의 의미를 명확하게 정의하지 않는 태그를 의미한다.

이러한 태그는 주로 콘텐츠의 구조나 스타일을 표현하는 데 사용된다.

 

비시맨틱 태그 (Non-Semantic Tags)는 다음과 같다.

<div>

• 콘텐츠를 그룹화하는 일반적인 컨테이너이다.
• 레이아웃을 구성하거나 스타일을 적용하는 데 사용된다.
• 어떤 종류의 콘텐츠를 포함하는지 명확하게 나타내지 않는다.

<span>

• 인라인 콘텐츠를 그룹화하는 일반적인 컨테이너이다.
• 텍스트의 일부에 스타일을 적용하는 데 사용된다.
• 어떤 종류의 텍스트를 포함하는지 명확하게 나타내지 않는다.

<br>

• 줄 바꿈을 삽입한다.
• 콘텐츠의 의미와는 관계없이 단순히 줄을 바꾸는 역할을 한다.

<hr>

• 문단레벨 요소에서의 주제의 분리를 의미한다.
• 단순히 수평선을 표시하는 용도로 사용된다.

<b>

• 텍스트를 굵게 표시한다.
• 텍스트의 중요성을 나타내기보다는 단순히 시각적으로 굵게 표시한다.

<i>

• 텍스트를 기울임꼴로 표시한다.
• 텍스트의 강조를 나타내기보다는 단순히 시각적으로 기울임꼴로 표시한다.

---

시맨틱 요소 vs 비 시맨틱 요소

시맨틱 요소를 사용하여 각 공간의 역할을 명확히 구분한 웹 페이지와 단순히 div 요소로 레이아웃을 분리한 웹 페이지 중 어느 쪽이 구조를 더 쉽게 파악할 수 있는지는 명확할 것이다.

 

시맨틱 요소를 사용해서 웹 페이지의 레이아웃을 대략적으로 형상화 하면 아래와 같은 형태로 나타난다.

왼쪽은 시맨틱 요소, 오른쪽은 비 시맨틱 요소를 통해 레이아웃을 구성한 것이다.

<div>라는 태그를 사용해도 동일한 형태로 구성할 수 있지만 척 봤을 때 시맨틱 태그를 사용한 웹페이지가 한눈에 역할을 파악하기 쉽다.

---

물론 시맨틱 요소라고 해서 웹페이지 레이아웃의 형태가 완전히 고정된 것은 아니다. 예를 들어 nav의 경우 navigation의 약자로 탐색기 같은 역할을 하는데 header의 아래에 위치 할수도 있고 아예 footer쪽에 위치하게 할 수도 있다.

 

해당 요소들은 요소의 역할 등을 명확하게 표시하여 이용자의 편의성을 도모하기 위함이지 반드시 위치가 정해져 있는 것은 아니다.

 

section과 article 같은 것도 그러한데 section이 더 큰 요소같지만 section 안에 article이 포함될 수도 있고 반대로 article 안에 section이 포함 될 수도 있다.