[HTML] 시멘틱 태그 (Semantic Tag)

HTML 태그는 많은 종류를 가지고 있고 각각의 쓰임새가 존재한다.

 

HTML5 이전에는 html 코드는 문서 내용들을 화면에 보여 주는 역할만 했기 때문에

수많은 <div> 태그 위주로 작성되었다.

디자이너 / 개발 담당자는 그러한 문서 구조의 파악이 쉽지 않았으며,

시각 장애인용 화면 낭독기(Screen Reader)나 검색 엔진에서 웹 소스를 읽을 때 구별하기 쉽지 않다.

그래서 HTML5 표준안에서는 '각각의 의미를 지닌다'는 Semantic 태그가 등장하였다.

(Semantic Tag는 HTML 데이터 순수성 훼손하지 않는 것.)

<h1> &lt;h1&gt; 태그</h1>

단순히 큰 글자를 표시하기 위해 <h1> 태그를 사용하기 보다는

<div>, <p>, <span> 와 CSS를 통해서도 충분히 글자 크기를 조절할 수 있다.

 

HTML의 순수 데이터의 목적

- 검색 최적화

- 유지 보수

- 접근성

- 사용성

 

(실제 보이는 페이지의 디자인이 동일해도, 완전히 다른 마크업을 가질 수 있다.

마찬가지로 마크업이 동일해도 다른 디자인을 가질 수 있다. )

 

구성

<header>

회사의 로고나 제목 등을 표현하는 영역.

 

<footer>

페이지 혹은 본문 내용의 하단에 들어가는 영역

반드시 페이지 하단에만 들어가는 것이 아니라 내용이 끝나고 부가적인 정보를 제공하기도 한다.

ex) 제작자 연락처 정보, 날짜, 저작권 정보 등

 

<nav>

내비게이션 영역으로, 주로 링크들을 넣어서 구성합니다.

(내부에 Heading태그를 1개 이상 자식으로 가진다.)

 

<section>

콘텐츠 영역으로 주제별로 묶을 때 사용.

(보통 1개 이상의 Heading 태그를 자식으로 가진다.)

 

<article>

독립적인 콘텐츠 영역으로 뉴스 기사, 블로그 포스트, 사용자가 등록한 코멘트처럼 완결성을 가진다.

※ article 태그 안에 section 태그를 넣을 수도 있고 / section 태그 안에 article이 올 수도 있다.

 

<aside>

인용구나 다이어그램과 같은 보조적인 도구로 주요 콘텐츠가 아닌 광고성 내용이 들어갈 수도 있다.

 

HTML5의 Semantic 태그는 아직 모든 웹 브라우저에 적용되지 않는다.

https://caniuse.com/#index 에서 HTML5 태그와 CSS3 속성 등에 대한 지원정도를 확인할 수 있다.

 

[해당 사이트 화면 중 일부]