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

시맨틱 태그 link

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

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

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

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

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

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

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

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

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

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