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

안녕하세요 PNcoding입니다 :)

 

오늘은 시맨틱 태그에 대하여 알아보도록 하겠습니다.

 

태그가 어떤 건지 또는 종류를 잘 모르시는 분은 HTML 구조 및 태그의 종류를 보고 오시면

더 도움이 되실 거예요 :)

 

https://pncoding.tistory.com/10

[HTML 기초] HTML 구조

 

https://pncoding.tistory.com/11

[HTML 기초] HTML 태그 종류 (1) - h 태그, p 태그, br 태그

 

---

 

 

시맨틱 태그(sementic tag)

보통 기본 레이어를 구성하기 위해 div 태그를 사용하여 class 또는 id 속성을 사용하여 

작성자의 스타일에 맞춰 이름을 작성하여 다른 사람이 코드를 보았을 때 

한눈에 어떤 부분인지, 어떤 역할을 하는 태그인지 이해하기 어려웠습니다.

 

시맨틱 태그는 HTML5에서 새로 추가된 태그로 말 그대로의 의미가 주어져 있는 태그로

태그를 사용 시 직관적으로 그 기능을 파악할 수 있게 만든 태그입니다.

 

 

---

 

 

시맨틱 태그 사용 시 이점

• 가독성 향상: class 및 id 속성을 사용하여 이름을 지정하는 게 아닌 정해진 태그명을 작성하여 다른 사람이 태그를 보았을 때 구조를 파악하기 쉬워 작업 및 유지보수에 좋습니다.
• 검색 엔진 최적화: seo(Search Engine Optimization)의 뜻으로 웹사이트의 정보를 검색 엔진이 정보를 빠르고 효율적이게 파악하여 검색 결과노출이 상향됩니다.
• 접근성 향상: 시작 장애가 있는 유저가 스크린 리더를 사용하여 보다 접근성이 높아집니다.

 

---

 

 

반응형

 

시맨틱 태그 종류

<header></header>

웹사이트의 제일 윗 구역에 표현하며 헤더 시맨틱 태그이며, 웹사이트의 로고 및 메뉴(내비게이션)를 작성할 때 부모 태그 역할을 합니다.

 

<nav><nav>

navigation의 약자로 웹사이트 메뉴를 구성할 때 사용합니다.

 

<main></main>

body 내부의 중요 내용 등 메인이 되는 내용을 작성합니다.

 

<section></section>

'구역'의 뜻으로 body내부의 각 구역을 나눌 때 사용합니다.

 

<article></article>

'기사'의 뜻으로 글이나 문단 등을 쓸 때 사용합니다.

 

<details></details>

내용중 강조 및 참조할 텍스트를 강조시킬 때 사용합니다.

 

<figure></figure>

이미지, 영상 등 독립적인 콘텐츠를 표현할 때 사용합니다.

 

<figcaption></figcaption>

figure 태그의 자식으로  부모 태그인 figure를 설명할 때 사용합니다.

 

<aside></aside>

문서의 좌측 또는 우측에 보여줄 콘텐츠를 작성할 때 사용합니다.

 

<mark></mark>

중요 단어에 형광펜으로 긋는 것처럼 표현되며 중요한 내용을 강조시킵니다.

 

<footer></footer>

웹사이트의 제일 밑에 표현되며 사이트맵, 주소, 전화번호, 카피라이트 등의 내용을 작성할 때 사용합니다.

 

 

 

 

---

 

 

 

태그 사용 예시

 

 

 

 

시맨틱 태그 사용 예시

 

 

 

---

 

 

 

여기까지 하여 시맨틱 태그에 대하여 알아보았습니다.

 

요즘에는 시맨틱 태그를 사용하여 웹사이트를 많이 제작합니다.

하지만 최신 브라우저에 적용되기 때문에 상황에 따라 오래된 브라우저에서도 웹사이트가 보이도록 만들어야 한다면 시맨틱태그를 사용하지 않는 것이 좋습니다 :)

(여러분들이 사용하는 웹브라우저에서는 다 적용되고 있으니 걱정하지 않으셔도 됩니다)