시맨틱 태그

시맨틱 태그란 브라우저나 개발자들에게 의미를 전달 할 수 있는 태그로서 문장 구조를 파악하는데 중요한 역할을 하는 태그를 의미한다.

일반적인 div 나 span 태그는 이름만으론 태그 내 어떤 내용이 있는지 알 수 없지만 시맨틱 태그를 사용하면 간략하게 이 태그가 어떤 의미를 지니고 있는지 알 수 있다.

 

시맨틱 태그는 위에 설명한 것처럼 태그의 내용을 유추할 수 있는 기능 외에 다른 기능들이 있다.

우선 검색 포털에서 시맨틱 태그는 검색 키워드로써 기능을 수행하여 검색에 용이하게 한다. 또 웹 접근성 측면에서 시작 장애인이 사용하는 스크린 리더기를 통해 웹 페이지의 구조를 알기 쉽게 한다.

 

 

<header>

- 머리말 영역으로 제목, 로고, 이름, 검색창, 사이트 메뉴 등을 포함한다.
- header의 위치에 따라 문서의 header가 될 수 있고 section의 header가 될 수 있다.

- 즉, 하나의 문서 안에 여러개 <header> 태그를 사용할 수 있다.

 

<nav>

- 네비게이션의 기능을 수행하여 일반적으로 메뉴로 사용되어 다른 영역, 사이트, 다른 문서로 이동시 사용된다.

 

 

<main>

- 문서의 주요 컨텐츠를 나타내며 사이드바, 탐색링크, 로고, 검색양식, 저작권 등 문서에 반복되는 컨텐츠에 포함시키지 않는다.
- 한페이지에 한번만 사용한다.

 

 

<section>

- 제목을 갖고 있으면서 문서 전체와 관련이 있는 컨텐츠 집합을 의미하며 공지사항, 포스트, 댓글에 사용한다.
- <article> 태그를 자식으로 둘 수 있고 섹션은 <header> 태그를 갖을 수 있다.

 

 

<article>

- 문서 본문과 무관한 독립적인 컨텐츠를 나타낼 때 사용하여 예를 들어 기사, 단독 포스트 등 이용된다.

- <section> 태그 내에 사용이 가능하다.

 

 

<aside>

- 사이드바라고 불리며 광고, 페이지와 무관한 내용 등으로 활용가능 하다.

 

 

<footer>

- 꼬리말 또는 바닥글을 의미한다.
- 일반적으로 회사소개, 약관, 저작권, 제작 정보등을 표시하는데 사용된다.

 

 

<div id="container">
    <header>
        ...
        <nav>...</nav>
    </header>
    <main id="content">
    	<acticle>...</acticle>
        ...
        <section>
            <header>...</header>
            <acticle>...</acticle>
            <acticle>...</acticle>
            ...
        </section>
        <section>
            <header>...</header>
            <acticle>...</acticle>
            ...
        </section>
    </main>
    <footer>
        <section>...</section>
    </footer>
</div>