HTML5 )Semantic HTML 사용이유와 태그

왜 시멘틱 태그를 사용해야되는가?

일반적으로 웹 페이지의 레이아웃을 잡기위해 div 태그를 사용하여 id이름으로 해당 레이아웃에 정보를 담아

사용하였다, 그로인해 개발자 간 협업 과정에서 각기 다른 해석과 분석으로 커뮤니케이션의 불편함이 존재했다,

그래서 W3C에서는 HTML5부터 의미요소(Semantic Element) 태그를 정의하여 각기 다르게 정의한 id 값을 역할에 맞는 태그로 명명 하여 기존에 발생한 문제점을 계선 해주었다.

 

의미요소(Semantic)의 사용은 이러한 커뮤니케이션에서 발생하는 문제 뿐만아니라 검색 엔진 최적화(SEO)에도 영향을 미친다, SEO가 기능을 할때  Semantic한 문서는 검색엔진이 결과 도출이 정확하고 빠르게 되어 시스템 부분에 긍정적인 영향도 나타나게 된다.

 

 

 

HTML5 Semantic Tag

 

HTML5에서 새롭게 추가된 시멘틱 요소

 

 

의미 요소설명

<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav>	HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의함.
<main>	HTML 문서의 주요 콘텐츠(content)를 정의함.
<section>	HTML 문서에서 섹션(section) 부분을 정의함.
<article>	HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의함.
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
<figure>	HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의함.
<figcaption>	figure 요소를 위한 캡션을 정의함.
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.
<bdi>	기본 출력방향과는 다른 방향으로 출력되는 텍스트를 정의함.
<mark>	하이라이팅된 텍스트를 정의함.
<details>	사용자가 보거나 숨길 수 있는 추가적인 설명문을 정의함.
<summary>	details 요소에 나타날 내용을 정의함.
<dialog>	다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의함.
<menuitem>	사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 정의함.
<meter>	정해진 범위 내의 스칼라 치수를 정의함.
<progress>	작업에 대한 진행 정도를 정의함.
<ruby>	루비(ruby) 문자를 선언함.
<rt>	본문 위에 나타날 문자를 정의함.
<rp>	루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 정의함.
<time>	날짜와 시간을 정의함.
<wbr>	br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 정의함.

 

참고자료 : sambalim.tistory.com/104 , tcpschool.com/html/html5_element_semantic