의미있는 마크업이란 무엇일까?

<div>, <span>과 같은 요소는 특정한 의미를 나타내지 않는다. MDN은 <span>을 다음과 같이 기술한다.

 

HTML <span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.

 

<div> 또한 마찬가지로 통용 컨테이너로서 별다른 의미를 갖고 있지 않다. 이러한 태그들은 목적 또는 의도에 국한되지 않고 사용하기 편리하다는 장점이 있다. 하지만 코딩을 배우다 보면 의미있는 마크업을 해야 한다는 말을 자주 들었을 것이다. 왜 그럴까?

 

예를 들어, <h1>은 '최상위 제목'이라는 의미가 담긴 태그 요소이다. 대신에 <span>을 사용한다면 그 요소가 어떤 목적을 갖고 있는지 파악하기 어려울 것이다.

 

또는 페이지의 상단에서 소개나 탐색 등에 도움을 주는 정보를 포함하는 <header>나, body의 주요 콘텐츠를 포함하는 <main>을 고려해 볼 수 있다. 단순히 <div>으로 감싸주는 것보다 더 많은 의미를 내포할 수 있다.

 

HTML도 결국 사용자에게 효과적으로 정보를 보여주기 위한 도구라는 점에서 각각의 태그가 정보의 성격을 갖는다면, 개발자 입장에서도 의미론적 구조를 파악하기 쉽고 유지보수에도 도움이 될 것이다.

 

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

MDN에서 다양한 의미를 갖는 태그 요소를 확인할 수 있다.

 

그 밖에도 잊지 말아야 할 중요한 이점이 있다. 검색 엔진은 자료를 수집하면서 페이지의 순위를 매긴다. 이 때 검색엔진은 의미론적 마크업을 주요한 키워드로 간주하기 때문에, 검색 결과의 상위에 노출되기 위해서 의미 있는 마크업 작성은 매우 중요하다. 이는 실제로 검색 엔진 최적화(SEO) 방법 중 하나이다.