시맨틱 태그가 더 널리 사용되게 하기 위해서는 시맨틱 태그에도 기본적인 CSS 스타일이 있어야 합니다.

시맨틱 태그 🔗

시맨틱 태그는 HTML 문서에 의미를 부여하는 태그입니다. ‘의미 있는’이라는 뜻의 영어 단어인 ‘시맨틱(semantic)’을 붙여 시맨틱 태그라고 부릅니다. 대표적으로 다음과 같은 태그가 있습니다:

  • <main>: 이 문서의 ‘주된 내용’라는 의미를 부여합니다. ‘주된’이라는 뜻의 ‘main’에서 따왔습니다.
  • <nav>: ‘메뉴’라는 의미를 부여합니다. 웹 페이지의 메뉴를 일컫는 말인 ‘navigation menu’에서 따왔습니다.

화면에 출력된 글자를 음성으로 읽어주는 시각장애인 용 도구인 스크린 리더, 그리고 웹 사이트를 읽어 기록하는 프로그램인 웹 크롤러는 시맨틱 태그를 특별한 방식으로 처리합니다. 이를테면 스크린 리더의 경우 <main>을 만났을 때 지금부터가 웹 사이트의 주된 내용임을 사용자에게 알려준다거나, 웹 크롤러라면 <nav> 안에 있는 내용이 메뉴임을 인식한다거나 하는 식으로 말입니다.

눈을 가진 다수에게도 의미가 있도록 🔗

스크린 리더나 웹 크롤러와는 달리, 시맨틱 태그는 사람의 으로 보기에 다른 일반 태그와 별다른 차이를 보이지 않습니다. <div>와 똑같습니다. 시맨틱 태그는 HTML 문서에 의미를 부여하는 태그인데도, 정작 눈으로 보았을 때 그 의미를 알 수가 없습니다.

<h1>은 글자를 크고 굵게 만들어 이것이 제목이라는 의미를 가짐을 으로 알 수 있습니다. <ul><li>는 앞에 굵은 동그라미를 그려 이것이 목록을 나타냄을 으로 알 수 있습니다. 그러나 시맨틱 태그는 이것이 불가능합니다.

모든 개발자가 스크린 리더를 사용하거나 웹 문서를 파싱해보는 것은 아닙니다. 스스로가 경험해보지 못한 경우를 고려하는 것은 어렵습니다. 그렇기에 우선 다수에게 의미가 있게 하고 그것이 소수에게도 의미를 가지게 하는 편이 더 낫습니다.

결론: 기본 CSS 스타일을 부여하자 🔗

시맨틱 태그에도 <h1>이나 <ul>, <li>처럼 기본 스타일을 부여합시다. 그래야 눈을 가진 사람들이 그 의미를 쉽게 이해할 수 있고, 따라서 더 널리 쓰일 수 있습니다.

기본 CSS 스타일이 모든 사이트에 적합하지 않더라도 괜찮습니다. 웹 사이트의 CSS를 통해 스타일을 수정하면 됩니다.