Programming/HTML CSS
HTML5에 들어서 몇가지 시멘틱(Semantic) 태그(tag)가 등장했는데 이들 태그는 해당 영역이 웹페이지에서 어떠한 역활을 수행하는지를 알려주는 역활을 합니다.
<header>
 <h1>제목</h1>
</header>
<section>
 <article>
  <p>내용~~~~</p>
 </article>
 <article>
  <h1>다른 내용~~~</h1>
  <p>~~~~~~~</p>
 </article>
</section>
▶ 몇가지 시멘틱 태그를 사용한 예제

실제 위 내용을 웹브라우저(Web Browser)에서 살펴보면 시멘틱 태그를 사용하든 안하든 보여지는건 같다는것을 알 수 있습니다.

시멘틱 태그는 사용자에게 보여주기 위해서라기 보다는 태그가 사용된 각 영역이 정확히 어떠한 역활을 하고 있는지를 알려주기위한 용도입니다.

이렇게 하면 검색엔진등에서 웹페이지의 데이터를 수집할때 좀도 효휼적으로 동작하는것이 가능해 지겠죠. 뿐만 아니라 문서의 각영역을 구분하기 위한 다른 용도로도 사용될 수 있을 것입니다.

아래는 대략적인 html5의 시멘틱 태그입니다.

 aside  문서의 사이드 부분
 article  실제적인 내용
 header  문서의 헤더
 nav  문서의 탐색 부분
 footer  문서의 하단 부분
 section  특정 내용의 article 그룹

0 0