HTML - 시맨틱 태그는 뭐고, 왜 사용해야 할까 ?

첫 웹 팀프로젝트를 할 때, 나는 컴포넌트를 만들 때 모든 요소를 다 div 로 만들었다.

html 태그에 뭐가 있는지 잘 모르기도 했고, 그렇게 만들어도 동작하고 보여지는 데에 아무 문제가 없었기 때문이다.

하지만 중간에 팀원에게 시맨틱 태그를 이용하라는 말을 들었고,

그 이유를 물어봤을 때 단순히 가시성이 좋기 때문이라는 대답이 돌아왔다.

그래서 div 대신에 시맨틱 태그를 쓰려고 해봤지만, 사실 잘 와닿지 않아서 대충 한 감이 있다.

 

하지만 프로젝트가 끝나고 혼자 HTML 과 CSS 를 공부하면서, 시맨틱 태그라는 것이 생각보다 중요하다는 것을 깨달았다.

개념은 어렵지 않기에, 간단히 시맨틱 태그를 왜 사용하는지에 대해 알아보고, 어떻게 사용하는 지 알아보자.

 

 

---

출처: Do it! HTML5 + CSS3 웹 표준의 정석 / 고경희 지음

 

 

시맨틱 태그란 ?

 

 

시맨틱 태그는 HTML5 부터 사용되도록 권장된 태그이다. 시맨틱(semantic) 이란 '의미가 통하는' 이라는 뜻.

크게 header, section, aside, footer 등이 있다.

 

시맨틱 태그를 하나도 안 쓰고 div 를 써도 우리가 보는 웹 페이지에는 아무런 차이가 없다.

그럼 왜 쓰는 걸까?

첫 번째로는, 시각장애인용 스크린 리더를 위해서다. 눈으로 웹 페이지를 볼 수 없는 사람들은, 모든 컴포넌트들이 div 로 되어있으면 내용을 파악하기가 힘들다. 반면 헤더와 사이드바, 컨텐츠를 태그로 구별해 놓으면 눈으로 웹 페이지를 볼 수 없는 상황에서도 페이지의 구조를 파악할 수 있다.

두 번째로는, 더 나아가서 위의 사실을 반대로 생각해 보면 된다. 웹 페이지를 읽는 사람들은 '눈으로 볼 수 있는' '사람' 뿐이다. 다시 말해, 두 조건 중 하나라도 충족되지 않는다면 웹 페이지를 분석할 때 시맨틱 태그들과 태그들의 어트리뷰트 (alt 등) 에 의존할 수 밖에 없다. 예를 들어 검색 엔진에서 웹 소스를 읽을 때와 같이, 컴퓨터가 웹 소스를 분석할 때는 모든 것을 div 태그로 처리한 HTML 문서는 정리되지 않은 쓰레기더미일 뿐이다.

마지막으로, 시맨틱 태그를 적극적으로 사용하면 소스코드를 직접 보는 개발자 입장에서도 소스를 해석하는 데 도움이 된다.

 

요약하자면, 웹 접근성을 위함이다. 시맨틱 태그를 사용하지 않는 것은, c 코드를 작성할 때 변수 이름을 a, b, c 와 같은 식으로 짓는 것과 비슷하다고 생각하면 된다.

 

 

---

 

시맨틱 태그 사용법

 

 

시맨틱 태그를 쓰는 것은 전혀 어렵지 않으며 간단하게 설명할 수 있다.

 

<header> 헤더
<nav> 네비게이션 바 (헤더 위에 있을수도 있고, position:fixed; 속성으로 상단에 고정할 수도 있음)
<section> 콘텐츠 영역			<aside> 사이드바
<article> 각 콘텐츠	<article> 각 콘텐츠	<article> 각 콘텐츠
<footer> 푸터

 

간단하게 위와 같이 사용하면 된다. 위의 태그들 (웹 페이지의 레이아웃을 구성하는) 말고 다른 태그들도 몇 가지 있다.

<iframe> : 외부 문서를 삽입할 때 사용하는 태그

<address> : 사이트 제작자 정보, 연락처 정보를 나타낼 때 사용하는 태그

 

그렇다면 <div> 태그는 언제 사용할까?

거의 wrapper 로 사용하게 된다. (스타일을 적용할 부분들을 묶을 때 사용)

혹은 각각의 영역 안에서 아주 작은 컴포넌트 단위를 나눌 때 사용할 수도 있겠다.

 

 

---

 

HTML 과 CSS 를 공부하고 있는데, 매우 쉬우면서도 웹 페이지를 만들 때 꼭 알아야 하는 기본적인 것들이 많다.

어쩌다 보니 타입스크립트와 리액트JS 를 먼저 배우고, HTML + CSS 를 나중에 보고 있는데, 미리 배웠으면 조금 더 짜임새있는 웹사이트를 만들 수 있지 않았을까 한다.