우리가 검색을 했을 때 컴퓨터는 어떠한 원리로 검색에 관련된 정보를 내놓는것일까?
정보를 접했을 때 눈으로 내용을 훑고나서 내용 분류를 할수있는 인간과 달리 검색 엔진의 크롤링은 HTML 코드 만으로 그 의미를 인지하고 정보를 수집해야한다. 어떤 태그가 어떤 기능을 하는 지 크롤링은 분별할수 없기에 효율적으로 데이터를 추출하지 못한다.
따라서 이를 해결하고자 단순히 시각적인 형태로만 보는 것이 아닌 데이터의 구조를 ‘의미’와 ‘관련성’에 따라 개발자가 의도하여 요소의 의미를 담은 코드를 구축하였고 이를 시멘틱한 마크업이라고 한다.
특정한 태그에 의미를 부여해서 웹페이지를 만드는 것을 시멘틱 웹이라고 하고 시멘틱 태그가 의미를 가짐으로써 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다.
Writing semantic markup means understanding the hierarchy of your content and how both users and machines will read it.
시멘틱 구조를 고려한 마크업은 다음과 같다
<body>
<header>
<h1>헤더</h1>
</header>
<nav>
<ul>
<li><a href=”#”>Menu -1 </a></li>
<li><a href=”#”>Menu -2 </a></li>
<li><a href=”#”>Menu -3 </a></li>
</ul>
</nav>
<section>
<article>
<h1>제목1</h1>
<p>내용1</h1>
</article>
<article>
<h1>제목2</h1>
<p>내용2</p>
</article>
</section>
<footer>
<address>주소</address>
</footer>
</body>-시맨틱 태그 요소는 다음과 같다
<main>
<link>
<form>
<table>
<img>-non-semantic 요소 (시멘틱 의미를 가지지 않은 태그)
<div>
<span>
front-end developer. key= "consistency"