[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>

8. <div>

어떠한 용도에 포함하지 않거나, 어디에 속하게 해야할 지 잘 모르겠는 경우에 사용한다. 사실 CSS, js를 사용하게 되면 이 태그를 가장 많이 쓰게 된다. 특별한 의미를 가지지 않는 태그이며, 일단 묶고 나중에 생각하려할 때 사용한다.

분명히 구분은 짓지만, 사실 모든 부분을 <div>로 감싸도 된다. 그룹 태그를 사용하는 목적은 개발 그 자체보다 HTML 문서를 다른 사람이 읽었을 때 쉽게 알 수 있도록 하기 위함인 것 같다.

어떤 태그인지 상관없이 하나로 모든 그룹을 다 만들어도 좋지만, 코드의 비용은 유지보수에서 가장 크게 발생하므로, 용도와 의미에 맞춰 적절한 그룹태그를 사용해야 한다고 생각된다.

저작자표시

'Language > HTML' 카테고리의 다른 글

[HTML] [6] 태그(5) - <br>, <blockquote>, <audio>, <video>, <span> (0)	2021.03.03
[HTML] [4] 태그(3) - 입력 양식 만들기 (0)	2021.03.03
[HTML] [3] 태그(2) - <ul>, <ol>, <li>, 주석 (0)	2021.03.03
[HTML] [2] 태그(1) - <h1>, <a>, <img>, <p> (0)	2021.03.03
[HTML] [1] html 파일의 골격 (0)	2021.03.03