콘텐츠를 구분하는 태그

김동현·2021년 10월 10일

html5

HTML5

목록 보기

5/13

1. `<header> </header>`

문서의 헤더 영역을 설정하는 태그입니다. 헤더 영역은 소개나 탐색을 돕는 것의 그룹을 나타냅니다. 이것을 일부 제목 요소들을 포함하며 로고, 구획의 제목, 탐색 폼과 같은 것들을 포함합니다. 헤더는 페이지의 최상단 영역을 의미합니다(display: block;).
header 태그는 문서 전체나 Sectioning Elements, 혹은 구분된 영역의 도입부나 헤더를 나타내는 영역이라고 판단이된다면 해당 태그를 작성해줍니다.
header 태그 안에는 header, footer 태그를 자식 요소로 포함할 수 없습니다. 이는 footer 태그도 동일하게 적용됩니다.
address 태그 안에서도 header 태그를 자식 요소롤 포함할 수 없습니다.
header 태그에서 따로 작성하는 속성은 없습니다. 즉, 전역 속성을 사용합니다.

2. `<footer> </footer>`

문서의 푸터 영역을 설정하는 태그입니다. 보통 작성자, 저작권, 관련 문서 등을 포함합니다(display: block;).
footer는 사이트 가장 하단에 존재하는 영역을 의미합니다.
header 태그와 동일하게 header, footer 태그의 자식 요소를 포함할 수 없으며, address 태그 안에 자식 요소로도 작성할 수 없습니다.

header, footer 태그는 헤더 영역, 푸터 영역을 설정한다는 태그 자체 의미를 갖고 있습니다. 이 태그의 의미는 브라우저나 검색 엔진이 해석하여 사용자에게 보여줍니다. 특정 레이아웃을 설정할 때 그 레이아웃의 의미와 일치하는 태그가 존재한다면, 그 태그를 의미적으로 사용해주어야 합니다. 무의미하게 div 태그를 사용하여 레이아웃을 구성하는 방법은 좋지않습니다.

header, footer는 일종의 섹션을 구분하는, 구획을 나누는 태그입니다. 이 태그에는 기본적으로 제목(label)을 설정할 수 있는데 그런 제목을 정할 때 <h1>, <h2>, <h3>,,, <h6> 를 사용하여 제목을 삽입할 수 있습니다.

3. `<h1>, <h2>, <h3>, ... <h6>`

문서의 정보 계층을 구조화하는 태그입니다. 문서나 구분된 영역의 제목을 설정, 문서의 목차를 설정하는 태그입니다(display: block;).
6단계의 문서 제목을 구현합니다. 구획 단계는 <h1>이 가장 높고 <h6>가 가장 낮습니다. 해당 태그들은 책의 목차와 유사하게 생각하면 됩니다.
해당 태그에 작성하는 속성은 따로 없으며 전역 속성을 사용합니다.
해당 태그를 폰트의 크기로서 사용해서는 안됩니다. 단지 구조를 나타내는 용도로 사용해야 합니다. 글자 크기가 출력된다고 해서 어떤 표현을 하는 것을 HTML로 해서는 안됩니다. h1-6까지 글자 크기를 초기화(CSS의 font-size 속성)한 뒤 우리가 명확하게 지정한 후 사용해야 합니다.
즉, h1-6까지 태그가 화면에 글자 크기를 지정할 때 사용하는 태그가 아니고 의미론적으로 대주제부터 6단계 소주제로 구분할 때 사용합니다.
heading 태그를 작성할 때 어떤 레벨을 작성할지 고민하는 것보다는 제목에 해당하는 내용, 어떤 내용의 핵심이 되는 내용인 경우 heading 태그로 마크업을 하는 것이 중요합니다.
<h1>부터 시작하여 중간에 건너뛰어 작성하는 것은 좋지 않습니다. 브라우저나 검색 엔진에서 h1부터 순차적으로 제목을 찾아서 내려가는데 중간에 순서가 비어있다면 문제가 생길 수 있습니다. 되도록 순차적으로 사용하는 것을 지향합니다.
<h1>에 해당하는 제목은 중복하지 않고 한 번만 사용하는 것이 좋습니다. 전체 제목으로 <h1>을 작성하고, <h2>이후부터 중복하여 사용하는 것을 권장합니다.

Sectioning Elements

<section>, <article>, <nav>, <aside> 태그들을 Sectioning elements라고 부릅니다. 이 Sectioning ELements들은 단원을 여는 태그들이라고 생각을 하면 됩니다. 이 Sectioning elements에는 단원의 제목을 나타내는 heading 태그가 반드시 포함되어 있어야 합니다.

Sectioning Element들은 기본적으로 논리적으로 완결된 집합체를 나타내며 각 태그마다 부가적인 의미들을 갖고 있습니다.

그리고 Sectioning Elements들 안에 header와 footer 태그를 사용하여 조금 더 구조적으로 마크업할 수 있습니다.

4. `<main> </main>`

문서의 주요 콘텐츠를 사용하는 태그입니다(display: block;).
문서 내부에 핵심적인 콘텐츠를 지칭할 때 사용하는 태그입니다. 문서나 앱 <body>의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠는 핵심 주제나 애플리케이션의 핵심 기능에 대한 부연 또는 직접적으로 연관된 콘텐츠들로 이루어집니다.
다른 태그에 자식 요소로 포함되어 사용되는 것보다는 다른 요소를 포함하는 부모 요소로 사용하는 것이 일반적입니다.
main 태그는 body 태그의 하위 자식으로 사용하며, HTML 문서 내에 단 하나만 존재할 수 있습니다.

5. `<article> </article>`

독립적으로 구분되거나 재사용이 가능한 영역을 설정하는 태그입니다(매거진, 신문 기사, 블로그 글 등)(display: block;).
article 태그 안에스는 일반적으로 <h1-6>태그 중 하나를 작성하며, 작성 일지와 시간을 <time>태그의 datetime 속성으로 설정합니다.
section 태그 안에 article 태그를 자식 요소로 포함할 수 있고, 반대로 article 태그 안에 section 태그를 자식 요소로 포함할 수 있습니다.

<article class="December">
    <h1>해당 영역의 제목</h1>
        <article class="first-weekend">
    	    <h2>해당 영역의 제목</h2>
            <p>해당 영역의 내용</p>
        </article>
</article>

first-weekend 부분이 December부분 바깥에 존재하더라도 first-weekend 콘텐츠의 가치가 유지된다고 한다면 article 태그를 사용하는 것이 좋습니다(재사용성).

6. `<section> </section>`

문서의 일반적인 영역을 설정하는 태그입니다(display: block;).
sectioning element로 논리적으로 완결된 집합체를 묶을 때 div 대신 section 태그로 묶어줍니다.
앞에서 살펴본 article 태그의 핵심 키워드는 독립적이어야 하며, 재사용이 가능하다는 것입니다. article 태그를 전혀 다른 곳에 분리하더라도 그 콘텐츠가 유지되어 사용된다면 article 태그를 사용합니다.
section 태그 안에 article 태그를 자식 요소로 포함할 수 있고, 반대로 article 태그 안에 section 태그를 자식 요소로 포함할 수 있습니다.
section 태그도 영역을 설정할 때 사용하는데 일반적으로 이 영역에는 어떠한 의미를 갖고 있으며, heading 태그를 작성해주어야 합니다.
div 태그는 일반적으로 의미 없이 사용하지만 section 태그는 의미가 있다는 차이점이 존재합니다. 즉, section 태그와 div 태그를 비교하면 특정 영역을 설정하는 역할을 비슷하지만, section 태그는 의미를 갖는 영역을 설정한다는 차이점이 있습니다.

7. `<aside> </aside>`

문서의 별도 콘텐츠를 설정하는 태그입니다. 보통 광고나 기타 링크 등 사이드 바를 설정할 때 사용합니다. 핵심 콘텐츠와 관련없는 내용을 해당 태그 안에 작성합니다(display: block;).

8. `<nav> </nav>`

현재 페이지를 기준으로 다른 페이지 링크를 제공하는 영역을 설정하는 태그입니다. 보통 메뉴, 목차, 색인 등을 설정합니다(display: block;).
특정한 페이지에서 외부로 나가는 링크를 그룹화하여 연결할 때 nav라는 태그로 묶어줄 수 있습니다. 보통 메뉴를 묶을 때 사용합니다. 해당 태그에서 content가 많은 경우 <ul>, <ol>태그가 삽입되어 같이 사용할 수 있습니다.

9. `<address> </address>`

body, footer, article 등에서 연락처 정보(이메일, 전화번호, 실제 주소 등)를 제공하기 위해 포함하여 사용하는 태그입니다(display: block;).

10. `<figure> </figure>`

이미지, 비디오, 도표 등 독립적인 콘텐츠의 영역을 설정합니다(display: block;).
이미지, 비디오, 도표 뿐만 아니라 코드 조각이나 인용문, 시, 문단 등 독립적으로 의미를 갖는 콘텐츠의 영역을 표현할 수 있습니다.

11. `<figcaption> </figcaption>`

figure에 포함되어 있는 콘텐츠의 설명이나 제목을 표시하는 태그입니다(display: inline;).

<figure>
    <img src="경로" alt="대체 텍스트" />
    <figcaption>이미지에 대한 설명</figcaption>
</figure>

위 예제는 figure 태그를 통해 이미지(<img/>)와 설명(<figurecaption>)을 하나로 묶을 수 있습니다. 이를 통해 브라우저는 이미지와 설명이 서로 연관되어 있다고 해석할 수 있습니다.

12. `<div> </div>`

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정합니다(display: block;).
대표적으로 자바스크립트, CSS를 통해 div로 묶은 영역을 찾고, 그 영역을 자바스크립트나 CSS로 적용하기 위해 사용합니다.

김동현

Frontend Dev

이전 포스트

메타 데이터

다음 포스트

콘텐츠를 구분하는 태그

HTML5

1. `<header> </header>`

2. `<footer> </footer>`

3. `<h1>, <h2>, <h3>, ... <h6>`

Sectioning Elements

4. `<main> </main>`

5. `<article> </article>`

6. `<section> </section>`

7. `<aside> </aside>`

8. `<nav> </nav>`

9. `<address> </address>`

10. `<figure> </figure>`

11. `<figcaption> </figcaption>`

12. `<div> </div>`

메타 데이터

문자 콘텐츠

0개의 댓글

콘텐츠를 구분하는 태그

HTML5

1. <header> </header>

2. <footer> </footer>

3. <h1>, <h2>, <h3>, ... <h6>

Sectioning Elements

4. <main> </main>

5. <article> </article>

6. <section> </section>

7. <aside> </aside>

8. <nav> </nav>

9. <address> </address>

10. <figure> </figure>

11. <figcaption> </figcaption>

12. <div> </div>

메타 데이터

문자 콘텐츠

0개의 댓글

1. `<header> </header>`

2. `<footer> </footer>`

3. `<h1>, <h2>, <h3>, ... <h6>`

4. `<main> </main>`

5. `<article> </article>`

6. `<section> </section>`

7. `<aside> </aside>`

8. `<nav> </nav>`

9. `<address> </address>`

10. `<figure> </figure>`

11. `<figcaption> </figcaption>`

12. `<div> </div>`