HTML5 시맨틱 태그 (Sementic Tag) 정리

Sementic 이라는 단어의 사전적 정의를 살펴보면 '의미의, 의미론적인' 이라는 뜻이라고 한다. (흠 ..)

 

페이지를 만들 때 아무 생각 없이 div 떡칠을 하지 않기 위해서

시맨틱 태그에 대해 공부한 내용을 정리하려고 한다.

 

기존에 잘 사용하던 div를 두고 왜 시맨틱 태그를 사용할까? (div를 지금 사용하지 않는다는 건 아니다! 지금도 유용하게 사용된다)

 

몇 가지 이유가 있는데 그 중에 내가 공부한 내용만 몇 가지를 정리해보겠다. (좀 더 깊게 알고싶으신 분은 구글이나 다른 곳을 참조해보시면 좋을듯)

 

 

시맨틱 태그(Semantic Tag) 를 사용해야 하는 이유 

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

 

검색 엔진이 검색을 수행할 때 html 내에 있는 태그들을 분석한다.

이 때 그 태그들의 의미가 분명하다면 (예를 들면 header, section, article, footer 등)

검색 엔진 입장에서는 이게 데이터인지 아닌지 구분하기가 쉬워진다. 

 

유튜브 영상에서 본 바로는 한 페이지에 h1 태그가 하나씩은 반드시 들어가 있는게 좋다고 한다.

<h1> 태그는 헤드라인을 의미하고, 또 일반적으로 페이지의 내용 중 주제를 파악하기 위해 검색 엔진이 <h1>태그를 확인하기 때문이다.

 

 

2. 웹 접근성

 

웹 접근성은 장애인이나 노인 분들이 비장애인과 같이 웹 사이트에 접근하여 이해할 수 있도록 하는 것을 의미하는데

이 때 스크린 리더라는 프로그램을 사용하게 된다. 이 때 시맨틱 태그를 사용하는 것이 스크린 리더의 활용에 좋다고 한다.

 

 

3. 유지보수 & 코드 가독성

 

만약 모든 태그들이 div로 되어있다면 딱 봤을 때 이게 헤더인지 푸터인지.. 네비게이션인지 알아보기가 힘들다.

그냥 막 작성한 예시라 딱 이렇게만 봐서는 크게 차이가 안느껴질지 모르지만

실제로 코드가 더 길어지고 복잡해질수록 실제로 느껴지는 체감이 꽤 크다 ㅋㅋㅋ

그리고 스스로도 깔끔하게 작성한 느낌이 든다.

 

딱 봤을 때 특정 부분이 어떤 의미를 가진 부분인지 알아볼 수 있다면 유지보수 할 때도 편하고 코드를 읽을 때도 편한 것은 당연하다.

 

 

 

시맨틱 태그들을 모두 나열하지는 않고 많이 사용하는 몇 가지만 나열하려고 한다.

 

시맨틱 태그 목록

 

<header> 태그

- 주로 페이지 맨 위에 삽입. 사이트 전체의 제목 부분이 될 수도 있고, 본문의 제목 부분이 될 수도 있다.

-  form 태그를 사용한 검색 창을 넣거나 nav 태그를 사용해서 메뉴들을 넣기도 한다.

 

<nav> 태그

-  같은 사이트 안의 문서나 다른 사이트로 연결하는 링크를 나타낸다.

-  Footer에 있는 링크 모음 부분에도 사용된다.

 

<section> 태그

-  논리적으로 연관성이 있는 요소들을 분리할 때 사용한다.

-  주제별 컨텐츠를 묶을 때 사용

 

<article> 태그

-  웹 상의 실제 내용들.

-  article 태그 부분을 떼어내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠여야 한다.

-  한 페이지에 하나만 존재하는게 이상적

 

<aside> 태그

-  본문 내용 외에 주변에 표시되는 기타 내용들

-  필수 요소가 아니기 때문에 광고나 링크 모음 등 메인 내용에 영향을 미치지 않는 것들을 넣을 때 사용

 

<footer> 태그

- 사이트 제작자의 연락처 정보와 저작권 정보를 표시

 

<address> 태그

-  웹 페이지 또는 피드백을 위한 연락처 정보

-  웹 사이트와 관련된 우편 주소, 이메일 같은 것들. copyright도

 

 

그래서 대략적인 구조는 아래 사진과 같다.

(w3school에서 가져옴)

 

애매할 수 있는게 section 안에 article이 들어가야 하는건지

아니면 article 안에 sectino이 들어가야 하는건지 ..

 

그래서 찾아봤더니 w3school에서는 section 안에 article이 들어가는 경우도 있고

article 안에 section이 들어가는 경우도 있다고 한다.

 

이렇게 쓰시오! 라고 딱 정해져 있는게 아니라 상황에 따라 다르고 그냥 쓰기 나름인 것 같다.