[HTML] 시맨틱 태그(semantic tag)

 

보통 영역을 나눌 때 <div>를 사용하여 id나 class를 주어 영역을 구분하지만, 협업 시엔 그 의미를 파악하기 어렵다.

그래서 직관적인 이름을 사용하여 해당 영역을 효율적으로 파악할 수 있도록 돕는 것이 시맨틱 태그(semantic tag)이다.

각 회사의 프로젝트 성향, 정책마다 달리 적용된다.

 

---

 

◽ 사용하는 이유

1. 검색엔진(SEO)의 최적화

2. 웹접근성: 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 용이하다.

3. 유지보수성: 개발자들이 한 눈에 알아보기가 쉽다.

 

 

◽ 종류

[레이아웃]

- header: 헤더 영역

- main: 문서의 주요 contents 영역

- footer: 푸터 영역

- section: contents 영역으로 반드시 제목(h1~h6)을 가짐

- article: contents 영역

- nav: 네비게이션 영역

- aside: 사이드바 영역

 

💡 Tip

적용순서는 main > section > article 순이다.

 

 

[그 외]

<em>: 기울임체

<strong>: <b>는 시각적인 강조라면, <strong>은 정말로 강조하고 싶을 때 사용한다.

<img>: 해당 이미지가 문서안에서 필요한 역할을 한다면 해당 태그를 사용한다. 이미지가 단지 시각적인 요소로 작용된다면 background-image 속성을 사용하는 것이 낫다.

 

 

 

◽ 예제

<section>
    <header></header>
    <!-- contents와 비슷 -->
    <article><article>
    <footer><footer>
</section>

 

 

 

출처 및 참조

시맨틱 태그(semantic tag) 사용 방법

Semantic Tag 와 헷갈리는 tag들 정리

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.