마크업이란 웹 문서를 작성하기 위해 사용되는 언어로, 문서나 텍스트에 추가 정보나 지시 사항들을 추가하여 의미를 부여하는 것입니다. 가장 일반적인 마크업 언어는 HTML(Hypertext Markup Language)로 웹 브라우저에 문서의 구조와 의미를 알려주는 역할을 합니다. 이러한 마크업은 웹 문서를 작성할 때 주로 스타일과 레이아웃을 강조하는 방식으로 사용되었습니다. 이는 웹 페이지를 시각적으로 멋지게 표현하는 데 중점을 맞춘 것이었습니다. 예를 들어, <div>와 <span>과 같은 컨테이너 태그를 사용하여 웹 페이지의 레이아웃을 구성하고, CSS를 사용하여 스타일을 적용하는 방식이 일반적이었습니다. 하지만 이러한 마크업은 웹 페이지의 구조와 의미를 명확하게 전달하지 못하는 한계가 있고, 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게는 웹 페이지의 구조와 의미를 이해하고 접근하는 데에 어려움이 있었습니다.

이에 대한 방안으로 HTML5 버전부터 시맨틱 마크업이 등장하였습니다. 시맨틱 마크업은 단순 레이아웃 뿐만 아니라 웹 문서의 구조와 의미를 더 명확하게 전달하기 위한 목적으로 만들어진 마크업 방식입니다. 예를 들어 <div> 대신 <header>, <nav>, <article>, <section>, <footer>와 같은 특정한 의미를 가진 시맨틱 태그를 사용하여 웹 페이지의 구조와 의미를 표현합니다. 시맨틱 마크업은 일반 마크업과 비교해 웹 페이지의 구조와 의미를 명확하게 전달하는 데에 초점을 둔다는 점에서 차이가 있습니다. 일반 마크업은 주로 스타일과 레이아웃에 중점을 두고 시각적인 효과를 강조하는 반면, 시맨틱 마크업은 웹 문서의 구조와 의미를 더 명확하게 설명할 수 있는 태그를 도입하여 웹 접근성과 검색 엔진 최적화를 개선합니다. 아래에서는 이러한 웹 접근성과 검색 엔진 최적화에 대해 간단히 살펴보겠습니다.

검색 엔진 최적화는 웹 페이지 내의 콘텐츠를 검색 엔진이 잘 이해할 수 있도록 구성하여 검색 결과의 상위에 노출될 수 있도록 하는 작업입니다. 이 과정에서 검색 엔진은 웹 페이지의 HTML 코드를 읽어들이고, 각 태그와 요소들을 파악하여 페이지의 구조를 이해합니다. 이를 통해 검색 엔진은 페이지의 주요 콘텐츠와 핵심 키워드를 인식하고, 사용자의 검색 쿼리와 일치하는 콘텐츠를 찾아 검색 결과에 노출시킵니다. 따라서 분명한 의미를 가진 시맨틱 태그를 사용하여 웹을 구성하는 것은 검색엔진이 웹 페이지를 이해하고 적절한 검색 결과에 페이지를 노출시키는 데에 중요한 역할을 합니다.

웹 표준과 웹 접근성은 서로 연관된 개념으로, 모든 사용자가 모든 환경에서 동일한 경험을 할 수 있도록 하는 것을 목표로 합니다. 웹 표준은 웹에서 사용되는 기술과 규약의 표준화된 집합으로 웹 사이트를 만들 때 상호 호환성과 일관성을 유지하기 위해 준수해야 하는 규칙과 권고사항들을 의미합니다. 웹 표준을 준수하는 것은 웹 페이지가 다양한 웹 브라우저에서 일관되게 표시되고 동작할 수 있도록 보장하는 역할을 합니다. 시맨틱 마크업은 이러한 웹 표준의 핵심 개념 중 하나로서 웹 페이지의 구조, 표현 방법, 동작, 접근성 등 다양한 측면에서 일관성을 유지하고 웹의 품질을 향상시킵니다. 웹 접근성은 시맨틱 마크업의 또 다른 중요한 측면으로, 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 하는 것입니다. 시맨틱 마크업은 태그가 가진 의미를 통해 개발자의 의도를 잘 나타내어 컴퓨터에게 더욱 명확한 정보를 전달하므로, 스크린 리더, 키보드 사용자, 시각적으로 장애가 있는 사용자 등 다양한 사용자가 웹 페이지를 이해하고 조작할 수 있게 도와줍니다. 따라서 시맨틱 마크업을 적극적으로 활용하는 것은 개발자와 사용자 모두에게 중요하다고 할 수 있습니다. 다음 장에서 시맨틱 마크업을 위한 태그들을 자세히 알아보겠습니다.