[HTML] 시맨틱 태그가 뭔가요?

웹은 지속적으로 발전하며 그에 따라 웹 표준도 끊임없이 발전하고 있습니다. 그러한 발전의 일환으로 HTML5에서는 시맨틱 태그라는 새로운 개념이 도입되었습니다. 그렇다면, 시맨틱 태그가 등장한 배경은 무엇이었을까요? 그리고 이들 시맨틱 태그는 각각 어떤 의미를 가지고 있을까요?

시맨틱 태그의 등장

시맨틱(semantic)이란 '의미'를 뜻합니다. 즉, 시맨틱 태그는 웹 페이지의 구조를 명확하게 설명하는 역할을 합니다. 기존의 HTML에서는

, 등의 태그를 사용하여 웹 페이지를 구성했습니다. 아직까지도 많은 웹 페이지가 남발된

태그로 구성되어 있습니다. 하지만 이런 태그들은 구조적인 의미를 가지지 않아, 웹 페이지의 각 문단의 의미를 파악하기 어렵게 만들고, 유지보수성을 저하시킵니다. 그래서 HTML5에서는 이 문제를 해결하기 위해 시맨틱 태그를 도입했습니다. 대표적인 예시로

,

,

,

,

,

 등이 있으며, 이는 각각 특정한 의미를 나타낼 수 있습니다.

몇 가지 예시를 통해 각 태그의 의미를 알아볼까요?

article

이 태그는 문서의 독립적인 부분을 구성하는 섹션을 나타냅니다. 위젯이나 독립적인 아이템을 표현할 때 사용됩니다. 뉴스, 블로그, 포스트, 기사 등의 컨텐츠를 나타내는 데 주로 사용되며,

태그를 중첩할 경우 외부

요소와 연관된 내용을 표현합니다.

section

<section> 태그는 일반적인 문서 또는 프로그램의 섹션을 표현합니다. 보통 제목으로 시작하는 컨텐츠의 의미적 그룹을 나타낼 때 사용됩니다.

nav

<nav> 태그는 네비게이션 링크로 구성된 섹션을 나타냅니다. 다른 페이지 또는 동일 페이지의 다른 섹션으로 연결되는 링크를 포함합니다.

pre

태그는 preformatted text를 표현합니다. HTML에서는 줄 바꿈을 
를 이용해야 하지만,

태그 내부에서는 \r\n와 같은 문자로 줄 바꿈을 표현할 수 있습니다. 또한,

태그는 마크업의 한 칸 이상 공백 문자와 줄 바꿈 문자를 보존합니다. 따라서 두 칸 이상의 공백을 표현하고 싶다면

 태그를 사용해야 합니다. 근데, 사실 pre나 br 태그는 css로 컨트롤하기 어려우므로, 실무에서는 pre태그나 br을 사용하기보다는 div 태그 등을 이용해서 여백이나 엔터 표현을 컨트롤하는 게 일반적입니다.

## 시맨틱 태그의 필요성
시맨틱 태그는 웹 표준의 발전 중 하나로, 웹 페이지의 구조를 더 명확하게 표현하고, 웹 접근성을 향상시키며, 검색 엔진 최적화(SEO)에도 도움을 줄 수 있습니다. 웹은 끊임없이 발전하고 있는 만큼, 우리는 더 나은 웹 표준을 만들어 나가며 더 좋은 웹 경험을 제공받을 수 있게 됩니다. 또한 개발자 입장에서도 유지보수성을 더욱 높일 수 있는 좋은 장치라는 생각도 듭니다.