웹 페이지의 영역을 나눠주는 <div> 태그와 시맨틱 태그
우리가 웹 페이지에서 볼 수 있는 요소들은 <body> 태그 안에 작성됩니다. 하지만 그냥 작성된 것이 아닌 각각의 역할에 따라 레이아웃이 구분돼서 작성되어야 사이트를 보다 구조화할 수 있습니다.
예를 들어, 네이버를 크게 나눠보면 헤더(header), 메인(main), 사이드바(sidebar), 여기엔 나와있지 않지만 스크롤을 내려 확인할 수 있는 푸터(footer) 영역 등으로 이루어져 있고, 그 안에서 쪼개지는 다양한 레이아웃이 있습니다.
이렇게 관련 있는 콘텐츠마다 영역을 나눠주기 위해 <div>와 시맨틱 태그를 사용하는데, 각 태그들에 대해 알아보는 시간을 가져보도록 하겠습니다.
<div>
- "division"의 약어로, 웹 페이지 콘텐츠의 레이아웃을 나눠주는 역할
- 태그 자체에 특별한 의미는 없지만, role 속성을 사용해 어떤 역할을 하는지 명시할 수 있다.
See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.
시멘틱 태그가 나오기 이전에 사용한 태그입니다. 하지만 <div> 태그 자체에는 어떤 역할을 하는지 알려주지 않기 때문에 class와 id 속성, 또는 role 속성 등을 사용해 역할을 명시했습니다.
시맨틱 태그
- "sementic"(의미의, 의미론적인)과 "tag"가 합쳐진 말로 포함된 콘텐츠의 목적을 정의해주는 태그
- <div> 태그와 마찬가지로 레이아웃을 나누는 역할을 하지만, 태그의 의미 만으로 역할을 알 수 있다.
- 웹 브라우저가 HTML 문서를 보다 쉽게 이해할 수 있게끔 도와줘 웹 접근성을 향상 시켜준다.
- 검색 엔진이 크롤링을 효율적으로 할 수 있게 도와줘 검색 엔진 최적화(SEO)에 도움을 준다.
- 코드의 가독성 향상으로 유지보수에 도움을 준다.
아래는 자주 사용되는 시맨틱 태그들입니다.
| 태그 명 | 역할 |
| <header> | 웹 사이트의 머리 영역 |
| <nav> | 웹 문서에서 다른 위치로 이동시키거나, 다른 웹 문서로 이동시키는 링크를 만드는 영역 |
| <main> | 웹 문서의 핵심 내용 영역 |
| <article> | 개별 콘텐츠 영역 |
| <section> | 제목에 따라 구분되는 여러 콘텐츠들을 묶는 영역. 이영역은 재배포를 못하는 콘텐츠로 인식됨 |
| <aside> | 사이드바 영역 |
| <footer> | 사이트 정보나 저작권 정보, 연락처 등을 표시하는 영역 |
이 외에도 다양한 시맨틱 태그들이 있습니다. 웹 페이지를 만들 때, 먼저 목적을 가지는 영역을 시맨틱 태그로 나눈 다음, 단순히 레이아웃을 나누거나 스타일 적용을 위한 경우는 <div> 태그를 사용해 보다 구조화된 웹 페이지를 만들 수 있습니다.