본문 바로가기
Web/HTML과 CSS

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

by 까망 하르방 2021. 3. 4.
반응형

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 속성 등에 대한 지원정도를 확인할 수 있다.

 

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

 

 

반응형

'Web > HTML과 CSS' 카테고리의 다른 글

[HTML] Custom 데이터 속성  (0) 2021.03.04
[HTML] html 태그 사용시 주의사항  (0) 2021.03.04
[CSS] CSS 선언방법  (0) 2021.03.04
[HTML] 로렘 입숨 (Lorem Ipsum)  (0) 2021.03.04
[HTML] HTML이란?  (0) 2021.03.03

댓글