[HTML]Semantic HTML가 뭐길래 중요한데?

Semantic HTML ?

시맨틱(Semantic) HTML을 직역하면 의미론적 HTML이 된다. 사실 무슨 말인지 잘 모르겠지만 의미론적이란 언어에서 단어와 구절의 의미를 아는 것을 뜻한다.

 HTML에서 semantic element는 해당 element의 의미를 브라우저와 개발자 모두에게 알려줄 수 있다.

Semantic elements ?

예를 들어, <div> 태그는 non-semantic 태그라고 할 수 있고, 

<table>, <article> 등의 태그는 semantic 태그라고 볼 수 있다.

 

일반적으로 <div> 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없다.

반면, <table>, <article> 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다.

<table> 태그 안에는 표가 들어갈 것이고,  <article> 태그 안에는 어떤 형태의 글이든 글이 들어갈 것이라는 것 정도는 유추할 수 있다.

 

태그만 봐도 내용의 성격을 유추할 수 있는 태그를 sematic tag이고 태그만 봐선 내용의 성격을 전혀 유추가 불가능한 태그를 non-semantic tag라고 할 수 있다. 

생기된 이유와 역사

<header>와 <footer> 모두 문서(전체 웹페이지 또는 특정 영역)의 부가정보를 표기하는 데 사용한다. <header>에 문서의 제목, 로고, 작성자, 작성일과 같은 메타 정보를 배치한다. 그리고 <footer>에는 회사 정보나 소유자의 소셜미디어 정보, 약관 등 문서와 관련이 적은 부가정보를 배치한다.

 

<div class="header"> 

<div id="footer">

 

HTML5 이전에는 이런 식으로 header와 footer를 구분할 때 따로 class나 id로 개발자가 지정하여 사용하였다.

하지만 문제는 개발자마다 사용하는 방식이 중구난방하고 정해진 기준이 없었다고 한다. 

<div class='head'> <div class='hd'> <div class='hdr'>등 여러 방식으로 개발자마다 지정하여 사용하였다고 말한다.

 

그리고 HTML5 이후부터는 따로 태그로 구분 지을 수 있게 나오면서 그동안 기준 없이 header와 footer를 지정하던 점을 개선시키게 되었다.

<header>

<footer>

검색엔진이 잘 알아볼 수 있다! (SEO, 검색엔진 최적화)

시맨틱 요소는 접근성 뿐 아니라 검색엔진 최적화(SEO: Search Engine Optimization)에도 영향을 준다.

관련 키워드로 검색했을 때 검색 결과 상위에 문서를 노출하려면 SEO 최적화는 필수다.

구글 같은 검색 사이트는 주기적으로 전 세계에 공개된 웹을 수집(Crawling)하고 분석(또는 색인: Indexing)한다.

 

검색엔진이 웹사이트를 방문하면 문서에 포함된 링크를 따라가며 관련 페이지를 모두 방문하고 수집한다.

수집된 문서는 구글 시스템에서 분석 과정을 거친다. 웹사이트에 사용된 태그와 단어의 빈도 등 검색엔진 자체 알고리즘에 따라 주요 키워드를 추출한다.

<div>와 <span>만 사용한 문서는 어떤 부분이 중요한 영역인지 구분이 어렵다. 문서의 제목에 해당하는 <title>, 본문 영역 표시 <main>, 글 제목 <h1> 등 주요 항목을 별도의 태그로 구분한 문서가 더 좋은 점수(실제 점수가 있는 건 아니다)를 획득한다.

즉, 검색 결과 상위에 노출된다. 물론, 검색엔진마다 알고리즘이 다르기 때문에 무엇이 정답이다 말할 수는 없다.

하지만, 상식적으로 생각해도 영역 구분이 확실한 문서가 그렇지 않은 문서보다 더 적절한 키워드를 추출할 것이라 예상할 수 있다. 우리가 웹문서를 의미에 맞게 구성해야 하는 이유다.

그래서 왜 사용해야 하는데?

기존에는 <div> 태그 안에 id나 class 속성으로 개발자별로 각자 이름을 지정하였기 때문에, 검색엔진이 html 파일을 분석할 때 정확하게 콘텐츠를 식별하기가 힘들었다.

HTML5에서는 정해진 시맨틱 태그를 사용하기로 규약을 정한 거라고 보면 될 것 같다.

 

요새 많이 느끼는 거지만 개발을 할 때 명확한 기준이 없다면 다른 개발자들과 협업이나 의사소통에 있어서 문제가 발생한다.

또한 점점 기하급수적으로 늘고 있는 웹사이트들 중 조금이라도 검색엔진에 노출되어 방문자를 끌어모으려면 이러한 세밀한 부분까지 신경 써야 하는 것은 필수이다.