-
HTML - 시맨틱 태그는 뭐고, 왜 사용해야 할까 ?웹 브라우저 2023. 4. 5. 17:10
첫 웹 팀프로젝트를 할 때, 나는 컴포넌트를 만들 때 모든 요소를 다 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 를 나중에 보고 있는데, 미리 배웠으면 조금 더 짜임새있는 웹사이트를 만들 수 있지 않았을까 한다.
'웹 브라우저' 카테고리의 다른 글
브라우저가 이벤트를 처리하는 방법 (0) 2023.03.17 DOM 을 좀 더 깊게 공부하자 ! (0) 2023.03.07 브라우저의 렌더링 과정 (0) 2023.03.07 브라우저의 렌더링 과정에 대해 제대로 공부하자 (0) 2023.03.05