# 섹션/메인 요소

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/html/undefined-3/section-main.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
