[HTML] [5] 태그(4) - <header>, <article>, <section>, <div>, <navigation>
HTML의 태그들은 크게 2가지 부류의 태그들로 나눌 수 있다.
1. 블록 요소: <h1>, <p> 처럼 앞뒤에 줄바꿈이 들어가는 블록을 만드는 태그
2. 인라인 요소: <a>, <img> 처럼 텍스트의 일부로서 다뤄지는 태그
3. 그룹 태그: <article>, <section>, <div> 처럼 블록들의 그룹을 지정하는 태그
이 중 그룹 태그는 위의 설명처럼 블록 요소 태그들을 이용하여 여러 정보들을 그룹화하는 태그들을 의미한다. 그룹 태그는 내용을 직접 입력하는 태그가 아니라, 블록 요소들을 그룹화하여 CSS를 사용할 때 한번에 묶음 처리가 될 수 있도록 사용한다고 생각하면 쉽다.
1. <header>
일반적으로 페이지 상부에 로고, 페이지 제목, 메뉴 등을 감쌀때 사용하는 태그이다. <head> 태그와 엄연히 다른 태그이다. <head> 태그는 웹 화면에 보이지 않는 내용을 다루는데 주로 사용하는 반면, <header> 태그는 웹 페이지 상단에 정보를 보여주고 그것을 일반적인 내용과 비교하기 위해 사용한다.
하지만 CSS를 따로 주지 않으면, 그냥 태그를 사용한 것과 동일한 출력을 보여준다.
2. <nav>
상단의 메뉴바 등, 어떤 네비게이션 메뉴를 만드는 태그이다. <header>태그 내부에 포함되는 경우가 많다.
기본적으로 메인 메뉴가 아닌 부분에는 사용하지 않는다.
3. <article>
영어로 "기사"를 의미한다. HTML 문서 내에서도 해당 부분이 하나의 독립적인 내용이라고 판단될 때 사용한다.
4. <section>
어떤 의미를 가진 그룹을 감싸는 태그이다. <article>과 많이 혼동되는데, <article>과 다르게 해당 블록 요소만으로는 내용이 완성되지 않을 때 여러가지 블록들을 묶어주는 역할을 한다. 어떤 하나의 테마를 가진 여러개의 블록을 묶어준다고 생각하면 쉽다.
5. <main>
해당 페이지의 핵심이 되는 콘텐츠 전체를 감싸주는 태그이다. 내부에 <section>과 <article> 등을 넣어서 하나로 묶어준다.
6. <aside>
본문이 아닌 추가 정보를 감싸는 태그이다. 흔히 "사이드바" 라고 불리는 부분에서 이 태그를 사용한다. 블로그를 예로 들자면, 본문과는 관련없는 사용자 프로필, 사용자 소개 등이 이에 해당한다.
7. <footer>
페이지 하부에 있는 부분을 감싸는 태그이다. 주로 사이트맵, 저작권, SNS 링크 등의 정보를 감싸는데 사용한다.
8. <div>
어떠한 용도에 포함하지 않거나, 어디에 속하게 해야할 지 잘 모르겠는 경우에 사용한다. 사실 CSS, js를 사용하게 되면 이 태그를 가장 많이 쓰게 된다. 특별한 의미를 가지지 않는 태그이며, 일단 묶고 나중에 생각하려할 때 사용한다.
분명히 구분은 짓지만, 사실 모든 부분을 <div>로 감싸도 된다. 그룹 태그를 사용하는 목적은 개발 그 자체보다 HTML 문서를 다른 사람이 읽었을 때 쉽게 알 수 있도록 하기 위함인 것 같다.
어떤 태그인지 상관없이 하나로 모든 그룹을 다 만들어도 좋지만, 코드의 비용은 유지보수에서 가장 크게 발생하므로, 용도와 의미에 맞춰 적절한 그룹태그를 사용해야 한다고 생각된다.