> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/undefined-3/section-main.md).

# 섹션/메인 요소

> \<nav>

## 루트 섹션 요소&#x20;

루트 섹션(Root Section) 요소&#x20;

### \<bady>

문서에서 단 1번만 사용 가능하다.&#x20;

## 섹션 요소들&#x20;

* 섹션 요소는 일반적인 컨테이너 요소(`<span>`, `<div>` 등)가 아니다. 문서 개요에 명시적으로 나열되는 경우에만 섹션 요소가 적합하다는 규칙이 있다.&#x20;
* **모든 섹션 요소들은 그 안에 제목을 포함시켜야 한다.**

{% hint style="info" %}
**문서 개요에 명시적으로 나열되는 경우란?**&#x20;

예를들어 뉴스 섹션 안에 광고, 프로그램, 오늘의 뉴스 등 개요가 나열되는 경우를 이야기 한다. &#x20;
{% endhint %}

* header 요소는 일반적으로 섹션의 제목, 목차, 검색, 로고 등을 포함하는데 사용한다.
* footer 요소는 일반적으로 섹션의 저자, 링크, 저작권 정보 등을 포함하는데 사용한다.

  섹션과 헤딩

  * 헤딩(h1 \~ h6) 요소는 섹션의 제목에 해당된다.

### \<article>

문서, 페이지, 애플리케이션, 사이트 등에 포함된 독립적인 섹션을 말한다. 잡지, 신문, 논문, 에세이, 보고서, 블로그, 기타 소설 미디어 일 수 있다.&#x20;

* 일반적인 규칙은 `<article>` 요소의 내용이 문서 개요에 명시적으로 나열되는 경우에만 적합하다.&#x20;
* 각 `<article>` 요소는 일반적으로 요소 하위 항목으로 제목(h1\~h6 요소)을 포함시켜 식별해야 한다.&#x20;
  * `<article>`은 일반적으로 `<section>`, `<header>`, `<footer>`등의 자식요소로 마크업 되는 경우가 대부분이다.&#x20;

```markup
<aticle>
  <h2>기사 제목</h2>
  ...
</aticle>
```

{% hint style="info" %}
`<section>` 내부에 `<article>` 사용이 가능하고 \
`<article>` 내부에 `<section>` 요소 사용이 가능하다.&#x20;
{% endhint %}

### \<section>

* `<section>` 요소는 문서, 애플리케이션의 일반적인 섹션을 말한다. 대부분 주제별로 그룹화된 콘텐츠를 `<section>`으로 묶는다.&#x20;
* 웹 사이트의 `<section>`은 소개(introduction), 뉴스 항목(news item), 연락처 정보(contact information)를 위한 섹션으로 나눌 수 있다.

{% hint style="info" %}
콘텐츠가 사이트에 포함된 독립적인 섹션의 성향이 크다면 `<section>` 요소 대신 `<article>` 요소를 사용하는 것이 좋다.
{% endhint %}

{% hint style="danger" %}
`<section>` 요소를 **표현**을 목적으로 사용해서는 안된다.&#x20;
{% endhint %}

### \<aside>

웹 사이트의 사이드바에 해당되는 부 콘텐츠(메인 콘텐츠와 분리된) 섹션을 말한다.&#x20;

### \<nav>

다른 페이지로 이동하는 링크 또는 사이트 내 탐색 링크를 포함하는 섹션 요소이다.&#x20;

{% hint style="info" %}
내용을 쉽게 이해할 수 있도록 `<nav>` 요소 내부에는 비순차 목록(`<ul>`)을 사용한다. 사이트의 모든 링크를 `<nav>`에 포함하는 것은 아니며, 주로 사이트를 탐색하는 링크를 포함한다. 사이트 하단에 위치한 링크는 `<footer>` 요소만으로 충분하다.
{% endhint %}

#### 참고  <a href="#reference" id="reference"></a>

* [**nav 또는 ul을 사용해야 합니까?**](https://stackoverflow.com/questions/9600357/should-i-be-using-nav-or-ul)

## 섹션 내부에 사용 되는 요소들&#x20;

### \<header>

`<header>` 요소는 일반적으로 섹션의 제목, 목차, 검색, 로고 등을 포함하는데 사용한다.

* 일반적으로 `<header>`에 해당 페이지의 logo를 넣는다.&#x20;
  * logo는 페이지의 `h1`으로 설정할 수 있다.&#x20;
  * logo는 사용자 경험의 관점에서서 메인페이지로 이동할 수 있도록 설정하는 것이 좋다.&#x20;
  * 메인페이지로 가는 링크는 보통 `/`를 넣어준다.&#x20;

```markup
<header>
  <h1><a href="/">logo</a></h1>
</header>
```

### \<footer>

`<footer>` 요소는 일반적으로 섹션의 저자, 링크, 저작권 정보 등을 포함하는데 사용한다.

{% hint style="info" %}
`<header>`과 `<footer>` 요소를 섹션 요소 내부에 넣을 수도 있다. 만약 섹션 요소 안에 묶어줄 콘텐츠가 많다면 `<header>`과 `<footer>`을 이용해서 묶어주면 된다.&#x20;
{% endhint %}

```markup
<section>
  <header>
    <h2>제목</h2>
    <p>내용</p>
    <p>내용</p>
  </header>
</section>
```

## 메인 요소&#x20;

### \<main>

* 문서 또는 애플리케이션 `<body>` 요소의 메인 콘텐츠에 해당한다.&#x20;
* `<main>` 요소는 섹션 요소가 아니다.&#x20;
* `<main>` 요소 2개 이상 사용해도 상관 없지만  한 문서에서 보이는 `<main>` 요소는 2개 이상이면 안된다. 그렇기 때문에 사용 되지 않는 `<main>` 요소는 화면에서 감춤(hidden) 처리 해야한다.&#x20;

```markup
<main>...</main>
<main hidden>...</main>
<main hidden>...</main>
```

* `<article>`, `<section>`, `<aside>`, `<nav>` 요소는 main 요소를 자식으로 포함할 수 없다.&#x20;
* 반대로 `<main>` 요소는 섹션 요소들을 포함할 수 있다. `<main>` 내부에는 `<header>`, `<footer>` 요소를 직접적으로 포함하지 않는다.&#x20;

## 참고

* \<section> [일반 섹션 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/section) → MDN
* \<article> [독립 섹션 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/article) → MDN
* \<aside> [보조 섹션 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/aside) → MDN
* \<nav> [내비게이션 섹션 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/nav) → MDN
* \<main> [메인 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/main) → MDN
* [Sections](https://www.w3.org/TR/html5/sections.html#sections) → HTML 5.2 표준 기술 사양
* [the main element](https://www.w3.org/TR/html5/grouping-content.html#the-main-element) → HTML 5.2 표준 기술 사양
* [HTML 5 문서의 섹션과 아웃라인](https://developer.mozilla.org/ko/docs/Web/HTML/HTML5_%EB%AC%B8%EC%84%9C%EC%9D%98_%EC%84%B9%EC%85%98%EA%B3%BC_%EC%9C%A4%EA%B3%BD) → MDN