웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았다. 그러다보니 어느 한 부분을 수정하려면 전부 뜯어고쳐야 할 때도 있었다. 하지만 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다.
웹 사이트가 특정 운영체제나 브라우저에 종속적이라면 그 외 환경에서는 정상적으로 사용이 불가능한 문제점이 발생한다. 하지만 웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있다.
웹 표준에 맞춰 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다. 적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루고 있기 때문이다. 홍보를 위한 비용을 들이지 않아도 검색의 효율성을 높일 수 있게 되는 것이다.
브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹에 접근할 수 있는 환경은 매우 다양하다. 또한 웹을 사용하는 사람들도 다양하다. 이 모든 환경과 사용자에 맞춰서 웹 페이지를 개발하는 일은 쉽지 않다. 하지만 웹 표준에 맞춰 개발하는 것 만으로도 이러한 문제를 해결할 수 있다.
semantic : 의미의, 의미가 있는 이라는 뜻의 영단어
HTML : 화면의 구조를 만드는 마크업 언어
<div>
와 <span>
으로 화면 구성하기<div>
와 <span>
두 가지 요소만 알아도 충분히 아래와 같이 화면 구조를 만들 수 있다. <div>
와 <span>
요소로 화면을 구성했을 때와 비교하면 각 요소의 이름을 보고 화면에서 어떤 역할을 하게 될지, 어떤 내용을 담을지 보다 더 명확하게 알 수 있다. 요소의 이름에 맞게 화면을 구성하면 <header>
는 헤더의 역할을 하고 <nav>
는 네비게이션 바 역할을 하게 될 것이다. 이처럼 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실한 의미를 가지고 있는 요소를 시맨틱 요소
라고 한다. 추가로 시맨틱 요소를 적절하게 사용해 구성한 HTML을 Semantic HTML
이라고 한다.개발자 간 소통
여러 명의 개발자가 웹 페이지를 개발하면서 <div>
와 <span>
로만 HTML 코드를 작성한다고 가정해 보자. 그렇다면 요소의 이름을 보고서는 각 요소가 어떤 기능을 하는지, 어떤 내용을 담는지 알 수 없기 때문에 주석을 작성해서 설명하거나 id
나 class
를 사용해 일일히 표기해야 할 것이다 또한 id
나 class
는 이름을 정할 때 어떤 식으로 지을 것인지 협의해서 정해야하며, 다른 개발자들에게 어떤 의미를 가지고 있는지 설명하는 시간도 추가적으로 필요하게 될 것이다. 이런 귀찮은 과정을 시맨틱한 요소를 사용하기만 해도 줄일 수 있으며, 적어도 각 요소의 기능을 정의하느라 쏟아야 하는 시간은 들지 않을 것이다.
검색 효율성
검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다. 검색 엔진은 <div>
와 <span>
만 사용한 문서를 모든 요소가 비슷한 중요도의 내용을 담고 있다고 판단하지만 시맨틱한 요소를 사용한 문서에서 더 중요한 내용의 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하게 된다. 웹 페이지를 검색 엔진에 더 자주 뜨게 만들고 싶을 때, 광고비 등의 추가 지출을 하지 않고 시맨틱 HTML을 잘 짜는 것만으로도 어느 정도 효과를 볼 수 있다.
웹 접근성
나이, 성별, 장애 여부, 사용 환경을 떠나 항상 동일한 수준의 정보를 제공해야 함을 의미한다. 시각 장애인의 경우, 웹 페이지에 접근할 때 음성으로 화면을 스크린리더를 이용하게 된다. 이때, HTML이 시맨틱 요소로 구성돼 있다면 화면의 구조에 대한 정보까지 추가로 전달해 줄 수 있어 콘텐츠 전달이 보다 정확해진다. 시맨틱 요소만 잘 사용해도 웹 접근성을 향상시킬 수 있다는 것이다.
요소 종류 | 설명 |
---|---|
<header> | 페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소 |
<nav> | 메뉴, 목차 등에 사용되는 요소 |
<aside> | 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소 |
<main> | 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소 |
<article> | 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소, 각각의 <article> 을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup> )을 포함하는 방법을 사용 |
<section> | 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용, 제목(<hgroup> )을 포함하는 경우가 많음 |
<hgroup> | 제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup> |
<footer> | 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소 |
<header>
<article>
, <main>
등 다른 요소의 머릿말 역할로도 사용할 수 있음 <nav>
<nav>
요소가 2개가 더 있다. <nav>
요소가 페이지 이동을 위한 링크를 담고 있다는 것을 알면 금방 찾을 수 있을 것이다!<aside>
<main>
<article>
<article>
을 식별할 수 있는 요소가 필요(hgroup
을 사용하는 경우가 많다.)<section>
hgroup
을 포함하는 경우가 많다.) <hgroup>
<h1>
부터 <h6>
까지 있으며, 숫자가 클수록 글자의 크기는 작아진다.<article>
요소의 제목으로는 <h1>
, <section>
요소의 제목으로는 <h2>
를 사용하고 있다.<hgroup>
요소의 숫자만 봐도 <article>
요소가 <section>
요소를 포함하는 관계임을 파악<footer>