시맨틱 마크업, 왜 필요할까?

그냥 <div>태그로 다 쓰면 안돼요?

네 안돼요.

시맨틱 마크업이 무엇인지, 왜 필요한지 알아보자.

시맨틱 마크업

시맨틱(Semantic)이란 단어를 해석하면 의미론적인이란 뜻이고,
마크업은 HTML 태그로 문서를 작성하는 것을 말한다.

즉, 시맨틱 마크업은
의미에 맞는 HTML 태그를 사용해서 문서를 작성하는 것을 말한다.

의미를 가진 마크업? 어떻게 하는 건데?

HTML은 여러 종류의 태그가 있다.
여러 태그 중에서 내용에 맞는 태그를 선택하여 문서를 작성하면 된다.

예를 들어

• 문서 제일 상단에 오는 박스인 경우 : <header> 태그 사용
• 텍스트인 경우 : <span> 태그 사용
• 최상위 제목인 경우 : <h1> 태그 사용
• 순서 없는 목록인 경우 : <ul> 태그 사용
  등등..

무작정 <div> 태그를 사용하거나,
제목인데 <strong>, css size 변경으로 스타일링을 한다던지 등
문서의 의미를 해치는 태그를 사용하는 게 아니라 내용에 맞는 태그를 사용하자!

알겠어, 근데 시맨틱 마크업 지키면 좋은 게 뭐야?

검색엔진 최적화 (SEO)에 유리하다.

검색엔진에서 키워드를 검색해 보자.

검색엔진 따라 알고리즘이 따로 적용되어 있겠지만,
기본적으로 키워드가 제목에 들어가면 최상단에, 본문에만 들어갔다면 하위에 리스트 해서 보여준다.
제목에 키워드가 들어갈 경우 사용자가 찾고 있는 내용일 확률이 높기 때문에 가장 먼저 보여주는 것이다.

이렇게 검색엔진에서 제목과 내용을 구분해서 키워드를 찾을 때 HTML 태그를 사용하기 때문에 중요하다.

장애가 있는 사용자들이 의미를 쉽게 파악하게 해 준다.

시맨틱 마크업은 장애를 가진 사람들도 쉽게 웹 사이트를 이용할 수 있게 해 준다.
특히 시각 장애인은 웹 사이트를 귀로 듣는다.

시각장애인이 웹 문서를 읽는데 최상위 제목을 알고 싶다.
** 그런데 제목이 단순 span 태그로 되어있다면? **
웹 문서를 읽어주는 서비스에서도 h1 태그로 제목을 찾기 때문에
시각장애인은 제목이 뭔지 알기 어려울 것이다.

코드 가독성이 좋아진다.

실무에서도 코드를 이해할 때 의미 있는 태그를 사용할수록 쉽게 이해할 수 있다.

결론

시멘틱 마크업을 지켜서 작성하자!