recursal/MDN huggingface dataset:
<option>
========

**HTML `<option>` 요소**는 `<select>` (en-US), `<optgroup>`, `<datalist>` 요소의 항목을 정의합니다. 그러므로, `<option>`을 사용해 팝업 메뉴 등 목록에서 하나의 항목을 나타낼 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 텍스트. 이스케이프 처리한 문자(`&eacute;` 등)도 가능. |
| 태그 생략 | 
 여는 태그는 필수입니다. 바로 뒤따르는 요소가
 `<optgroup>`, 다른
 `<option>`이거나, 자신이 부모의 마지막 자식이라면 닫는
 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<select>` (en-US), `<optgroup>`,
 `<datalist>` 요소.
  |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLOptionElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`disabled`

지정한 경우 이 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다. `<option>`에 `disabled` 특성을 추가하지 않더라도, `<optgroup>` 등 조상 요소로 인해 비활성화될 수 있습니다.

`label`

옵션의 뜻을 나타내는 텍스트. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.

`selected`

지정한 경우 초기에 이 옵션을 선택한 상태로 설정합니다. `multiple` (en-US)를 지정하지 않은 `<select>` (en-US) 요소의 자손인 경우, 하나의 `<option>`만 `selected` 특성을 가질 수 있습니다.

`value`

양식 데이터를 구성할 때 사용할 값. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.

예제
--

`<select>` (en-US) 요소를 참고하세요.

명세
--

| Specification |
| --- |
| HTML Standard # the-option-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<section>: 일반 구획 요소
===================

**HTML `<section>` 요소**는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 `<section>`은 제목을 포함하지만, 항상 그런 것은 아닙니다.

시도해보기
-----

**참고:** 요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 `<article>` 요소가 더 좋은 선택일 수 있습니다.


|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구획 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소.단, `<section>` 요소는
 `<address>`의 자손이 될 수 없습니다.
  |
| 가능한 ARIA 역할 | `alert` (en-US), `alertdialog` (en-US),
 `application` (en-US), `banner` (en-US),
 `complementary` (en-US),
 `contentinfo` (en-US), `dialog` (en-US),
 `document` (en-US), `feed` (en-US),
 `log` (en-US), `main` (en-US),
 `marquee` (en-US), `navigation` (en-US),
 `search` (en-US), `status` (en-US),
 `tabpanel` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

* 각각의 `<section>`을 식별할 수단이 필요합니다. 주로 제목(`<h1>`-`<h6>`) 요소를 `<section>`의 자식으로 포함하는 방법을 사용합니다.
* 요소의 콘텐츠를 따로 구분해야 할 필요가 있으면 `<article>` 요소를 고려하세요.
* `<section>` 요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 `<div>` (en-US) 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 `<section>`이 좋은 선택입니다.
예제
--

### 이전


```html
<div>
  <h2>Heading</h2>
  <img>some image</img>
</div>
```

### 이후


```html
<section>
  <h2>Heading</h2>
  <img>some image</img>
</section>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-section-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* ARIA: Region role (en-US)
<address>
=========

**HTML `<address>` 요소**는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.

시도해보기
-----

`<address>` 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있습니다. 반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름입니다.

`<address>`는 다양한 맥락에서 사용할 수 있습니다. 사업체 연락 방법을 페이지 헤더에 배치할 때도 쓸 수 있고, `<article>` 내부에 배치해서 글의 작성자를 나타낼 수도 있습니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 플로우 콘텐츠. 단, 다음의 요소는 사용할 수 없습니다.다른
 `<address>`, 제목 콘텐츠
 (`<hgroup>`, `<h1>`,
 `<h2>`, `<h3>`,
 `<h4>`, `<h5>`,
 `<h6>`), 구획 콘텐츠
 (`<article>`, `<aside>`,
 `<section>`, `<nav>`),
 `<header>`, `<footer>` 요소.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. 단, `<address>` 요소 제외. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

* 기존 명세에서의 `<address>` 요소는 문서 작성자의 연락처만 나타내는 요소였습니다. 그러나 최신 명세에서 임의의 연락처를 포함할 수 있도록 수정됐습니다.
* 연락처 외의 정보(출판일 등)를 담아서는 안됩니다.
* 보통, 현재 구획에 `<footer>` 요소가 존재하면 `<address>`를 그 안에 배치할 수 있습니다.
예제
--

다음 예제는 `<address>`를 사용해 글 작성자의 연락처를 구별하는 모습을 보입니다.


```html
<address>
  You can contact author at
  <a href="http://www.somedomain.com/contact"> www.somedomain.com</a>.<br />
  If you see any bugs, please
  <a href="mailto:webmaster@somedomain.com"> contact webmaster</a>.<br />
  You may also want to visit us:<br />
  Mozilla Foundation<br />
  331 E Evelyn Ave<br />
  Mountain View, CA 94041<br />
  USA
</address>
```

### 결과

비록 겉보기는 `<i>`나 `<em>` 요소와 같지만, `<address>` 요소는 자체적인 의미를 갖고 있으므로 연락처 표기에는 `<address>`가 더 적합합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-address-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<hgroup>
========

**HTML `<hgroup>` 요소**는 문서 구획의 다단계 제목을 나타냅니다. 다수의 `<h1>-<h6>` 요소를 묶을 때 사용합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 제목 콘텐츠, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 
 하나 이상의 `<h1>`, `<h2>`,
 `<h3>`, `<h4>`,
 `<h5>`, `<h6>`.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 규칙 | `tab` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

**참고:** `<hgroup>` 요소는 W3C HTML5 명세에서 제거되었고, WHATWG판 HTML에만 남아있습니다. 그러나 대부분의 브라우저에서 부분적으로 구현 중이므로 사라지지는 않을 것으로 보입니다.
 다만, `<hgroup>` 요소의 주요 목적이 HTML 명세의 개요 알고리즘에서 제목의 표시 방법을 설정하기 위함이며, **어떠한 브라우저도 개요 알고리즘을 구현하지 않았음**을 고려할 때, `<hgroup>`의 의미는 이론적으로만 유효합니다.
 W3C HTML5 명세에서 `<hgroup>` 없이 부제, 보조 제목, 태그라인의 마크업 방법에 대한 조언을 제공하고 있습니다.


`<hgroup>` 요소는 문서 구획의 주 제목과 2차 제목을 연결해, 제목-부제목과 같은 "다단계 제목"을 만들 수 있습니다.

다른 말로 하면, `<hgroup>` 요소는 자신의 2차 `<h1>-<h6>`이 문서 개요에 자신의 구획을 생성하는 것을 방지합니다.

따라서 HTML 개요 알고리즘이 생성한 추상적 개요 내에서, `<hgroup>`은 논리적인 단일 제목을 형성하고, `<hgroup>`의 자식 제목 요소가 그 안에 하나로 포함됩니다.

예제
--


```html
<hgroup>
  <h1>주요 제목</h1>
  <h2>부제목</h2>
</hgroup>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-hgroup-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 구획 관련 다른 요소: `<body>`, `<article>`, `<section>`, `<aside>`, `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<nav>`, `<header>`, `<footer>`, `<address>`;
* HTML5 문서의 구획과 개요.
<rtc>: 루비 텍스트 콘테이너 요소
=====================

**HTML `<rtc>` 요소**는 `<rb>` 요소가 표시하는 문자의 의미에 대한 주석을 나타냅니다. `<rb>`는 발음(`<rt>`)과 의미(`<rtc>`) 둘 다 가질 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 구문 콘텐츠
 또는 `<rt>` 요소.
  |
| 태그 생략 | 
 바로 뒤따르는 요소가 `<rb>`,
 `<rt>`, 다른 `<rtc>` 요소거나,
 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<ruby>` 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

예제
--


```html
<div class="info">
  <ruby>
    <rbc>
      <rb>馬</rb><rt>마</rt> <rb>來</rb><rt>래</rt> <rb>西</rb><rt>서</rt>
      <rb>亞</rb><rt>아</rt>
    </rbc>
    <rtc>말레이시아</rtc>
  </ruby>
</div>
```


```
.info {
  padding-top: 10px;
  font-size: 36px;
}
```

명세
--

| Specification |
| --- |
| HTML Standard # rtc |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rt>`
* `<rbc>`
<rb>: 루비 베이스 요소
===============

**HTML `<rb>` 요소**는 `<ruby>` 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다. 하나의 `<rb>` 요소는 기반 텍스트에서의 최소 단위를 하나 감싸야 합니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | `<ruby>` 요소의 자손. |
| 태그 생략 | 
 바로 뒤따르는 요소가 `<rt>`,
 `<rtc>`, `<rp>`, 다른
 `<rb>` 요소거나, 자신이 부모의 마지막 요소라면 닫는
 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<ruby>` 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

* 루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. `<rb>` 요소는 기반 텍스트의 각 조각을 나타내는 용도입니다.
* `<rb>`는 빈 요소가 아니지만, 보통 소스 코드에는 여는 태그만 사용해 루비 마크업을 덜 복잡하고 읽기 쉽게 합니다. 브라우저가 렌더링 때 알아서 닫는 태그를 추가합니다.
* 각각의 `<rb>` / 기반 조각 하나마다 `<rt>` 요소 하나를 작성해야 합니다.
예제
--

다음 예제는 "경복궁"의 한자/한글 표기를 병행합니다.


```html
<ruby>
  <rb>景</rb><rb>福</rb><rb>宮 </rb><rp>(</rp><rt>경</rt><rt>복</rt><rt>궁</rt
 ><rp>)</rp>
</ruby>
```


세 개의 `<rb>` 요소를 사용해 기반 글자(한자)를 세 개로 나눴습니다. 반면, 한글 표기는 세 개의 `<rt>` 요소를 사용합니다.

세 개의 기반 조각을 완전히 분리해 작성할 수도 있다는 점을 알아두세요. 이 때는 `<rb>` 요소를 사용하지 않아도 됩니다.


```html
<ruby>
  景 <rp>(</rp><rt>경</rt><rp>)</rp> 福 <rp>(</rp><rt>복</rt><rp>)</rp> 宮
  <rp>(</rp><rt>궁</rt><rp>)</rp>
</ruby>
```


결과는 다음과 같습니다.

루비 주석을 지원하지 않는 브라우저에서는 아래와 같이 출력합니다.
```

景福宮 (경복궁)
```


```
body {
  font-size: 22px;
}
```


**참고:** `<ruby>` 요소 참고서를 방문해 다른 예제도 살펴보세요.

명세
--

| Specification |
| --- |
| HTML Standard # rb |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<ruby>`
* `<rt>`
* `<rp>`
* `<rtc>`
<bdo>: 양방향 텍스트 재정의 요소
=====================

**HTML `<bdo>` 요소**는 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성을 포함합니다.

`dir`

요소 콘텐츠의 텍스트 쓰기 방향. 가능한 값은 다음과 같습니다.

* `ltr`: 텍스트를 왼쪽에서 오른쪽으로 써야 함을 나타냅니다.
* `rtl`: 텍스트를 오른쪽에서 왼쪽으로 써야 함을 나타냅니다.

예제
--


```html
<!-- 쓰기 방향 바꾸기 -->
<p>이 글은 왼쪽에서 오른쪽으로 작성합니다.</p>
<p><bdo dir="rtl">이 글은 오른쪽에서 왼쪽으로 작성합니다.</bdo></p>
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-bdo-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<kbd>: 키보드 입력 요소
================

**HTML `<kbd>` 요소**는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 관례에 따라 사용자 에이전트의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성 (en-US)만 포함합니다.

사용 일람
-----

`<kbd>` 요소를 다른 요소와 조합해 더 상세한 상황을 표현할 수 있습니다.

* `<kbd>` 요소를 다른 `<kbd>` 요소 안에 배치해, 하나의 입력 안의 작은 부분이나, 실제 타이핑 키를 하나씩 나타낼 수 있습니다. 아래의 입력 안의 키입력 나타내기 예제를 참고하세요.
* `<kbd>` 요소를 `<samp>` 요소 안에 배치하면 시스템이 에코로써 다시 출력한 사용자 입력을 나타낼 수 있습니다. 아래의 재출력된 입력 예제를 참고하세요.
* 반면, `<samp>` 요소를 `<kbd>` 요소 안에 배치하면 화면에 표시된 메뉴 이름, 메뉴 항목, 버튼 이름 등 시스템이 출력한 텍스트를 기반으로 한 입력을 나타낼 수 있습니다. 아래의 화면에 표시된 입력 옵션 나타내기 예제를 참고하세요.

**참고:** 사용자 지정 CSS 파일을 정의해 `<kbd>` 요소의 브라우저 기본 글꼴을 바꿀 수 있지만, 사용자 설정이 더 우선할 수도 있습니다.

예제
--

### 기본 예제


```html
<p>
  <kbd>help mycommand</kbd> 명령어를 입력해 "mycommand" 명령에 대한 문서를
  확인하세요.
</p>
```


#### 결과

### 입력 안의 키입력 나타내기

다수의 키입력으로 구성된 입력을 설명할 땐 여러 개의 `<kbd>` 요소를 중첩할 수 있습니다. 바깥 `<kbd>`는 전체 입력을, 각각의 키입력 또는 구성요소는 안쪽의 `<kbd>`로 나타냅니다.

#### 스타일 없이

우선 기본 HTML에서 어떻게 나타나나 확인해보겠습니다.

##### HTML


```html
<p>
  새로운 문서는 키보드 단축키 <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd
 >으로 만들 수 있습니다.
</p>
```


단축키 조합 전체를 하나의 `<kbd>`로 감싼 후, 조합 구성요소를 나타내기 위해 각각의 키보드 키를 다른 `<kbd>`로 감싼 모습입니다.

**참고:** 꼭 이렇게 중첩할 필요는 없습니다. 바깥 `<kbd>`를 생략하고, `<kbd>Ctrl</kbd>+<kbd>N</kbd>`로 작성하더라도 완벽하게 유효한 표기법입니다.

다만 현재 사용 중인 스타일에 따라 중첩이 유용할 때도 있습니다.

##### 결과

스타일 시트 없는 출력은 다음과 같습니다.

#### 스타일 적용

CSS를 좀 더해서 명확하게 바꿀 수 있습니다.

##### CSS

키보드 버튼을 렌더링 할 때 사용할 수 있는, `<kbd>` 요소의 `"key"` 스타일을 추가합니다.


```css
kbd.key {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```


##### HTML

HTML을 업데이트해 앞선 스타일을 적용합니다.


```html
<p>
  새로운 문서는 키보드 단축키
  <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd
 >으로 만들 수 있습니다.
</p>
```


##### 결과

원하던 바로 그 결과입니다!

### 재출력된 입력

`<kbd>` 요소를 `<samp>` 요소 안에 배치하면 시스템이 다시 출력한 입력을 나타낼 수 있습니다.


```html
<p>
  구문 오류가 발생하면, 오류 원인을 찾을 수 있도록 입력받은 명령을 다시
  출력합니다.
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>
```


결과는 다음과 같습니다.

### 화면에 표시된 입력 옵션 나타내기

`<samp>` 요소를 `<kbd>` 요소 안에 배치하면 시스템이 화면에 표시하는 입력 선택지(메뉴, 버튼...)에 기반한 사용자 입력을 나타냅니다.

예를 들면, "파일" 메뉴의 "새 문서" 옵션을 선택하는 방법에 대해 설명하는 HTML은 다음과 같은 형태를 가집니다.


```html
<p>
  새로운 파일을 생성하려면,
  <kbd>
    <kbd><samp>파일</samp></kbd
 >⇒<kbd><samp>새 문서</samp></kbd>
  </kbd>
  메뉴를 선택하세요.
</p>

<p>
  파일의 이름을 입력한 후, <kbd><samp>확인</samp></kbd
 >을 누르는 걸 잊지 마세요.
</p>
```


흥미로운 중첩 사용법을 볼 수 있습니다. 메뉴 옵션 설명을 보면, 전체 입력 시퀀스가 하나의 `<kbd>` 요소에 들어간 것을 볼 수 있으며, 메뉴 이름("파일")과 메뉴 항목("새 문서") 둘 다 각자의 `<kbd>`와 `<samp>`로 표시한 것을 볼 수 있습니다. `<kbd>` 안에 `<samp>`가 존재하므로, "파일"과 "새 문서"는 화면 위의 위젯을 사용한 입력임을 알 수 있습니다.

#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-kbd-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<code>`
<span>
======

**HTML `<span>` 요소**는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 `lang` 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. `<span>`은 `<div>` (en-US)와 매우 유사하지만, `<div>` (en-US)는 블록 레벨 요소인 반면 `<span>`은 인라인 요소입니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠
 또는
 플로우 콘텐츠를 허용하는 모든 요소.
  |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLSpanElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

예제
--

### 예제 1

#### HTML


```html
<p><span>Some text</span></p>
```

#### 결과

### 예제 2

#### HTML


```html
<li><span>
    <a href="portfolio.html" target="\_blank">See my portfolio</a>
</span></li>
```


#### CSS


```css
li span {
  background: gold;
}
```


#### Result

명세
--

| Specification |
| --- |
| HTML Standard # the-span-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* HTML `<div>` (en-US) 요소
<hr>
====

**HTML `<hr>` 요소**는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.

시도해보기
-----

역사적으로 `<hr>`은 가로줄로 표현했습니다. 시각적 브라우저에서도 가로줄로 그려질 수 있지만, 이제 시각 표현에 그치지 않고 의미를 가지게 됐습니다. 따라서 가로줄을 그리고 싶다면 적절한 CSS를 사용해야 합니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠. |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | `presentation` (en-US) |
| DOM 인터페이스 | `HTMLHRElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`align` 
지원이 중단되었습니다

줄의 정렬을 지정합니다. 기본값은 `left`입니다.

`color` 
비표준

색깔 이름 또는 16 진수의 값으로 줄의 색깔을 지정합니다.

`noshade` 
지원이 중단되었습니다

Sets the rule to have no shading.

`size` 
지원이 중단되었습니다

줄의 높이를 픽셀 단위로 지정합니다.

`width` 
지원이 중단되었습니다

줄의 가로 길이를 픽셀이나 퍼센트 값으로 지정합니다.

예제
--

### HTML


```html
<p>
This is the first paragraph of text.
This is the first paragraph of text.
This is the first paragraph of text.
This is the first paragraph of text.
</p>

<hr>

<p>
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
</p>
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-hr-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<p>`
<mark>
======

**HTML `<mark>` 요소**는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성을 포함합니다.

사용 일람
-----

일반적인 `<mark>` 요소의 사용처는 다음과 같습니다.

* 인용문(`<q>`, `<blockquote>`)에서는, 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분을, 그리고 원저자는 특별히 중요하다고는 생각하지 않았으나 주시해야 할 필요가 있는 부분을 표시합니다. 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 것처럼 생각하면 됩니다.
* 다른 경우, `<mark>`는 문서 콘텐츠에서 사용자의 현재 행동과 관련 있는 부분을 나타낼 때 사용합니다. 예를 들어, 현재 검색 키워드를 강조 표시할 때 사용할 수 있습니다.
* `<mark>`를 표시만을 위한 용도로 사용하지 마세요. `<span>`과 적절한 CSS를 대신 사용해야 합니다.

**참고:** `<mark>`와 `<strong>` (en-US) 요소의 차이점을 기억하세요. 텍스트에서, `<mark>`는 연관성을 가진 부분을, `<strong>`은 중요도를 가진 부분을 나타낼 때 사용합니다.

예제
--

### 관심 부분 표시하기

첫 예제의 `<mark>` 요소는 인용문에서 사용자가 관심을 가질 텍스트를 강조할 때 사용합니다.


```html
<blockquote>
  It is a period of civil war. Rebel spaceships, striking from a hidden base,
  have won their first victory against the evil Galactic Empire. During the
  battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire’s
  ultimate weapon, the DEATH STAR, an armored space station with enough power to
  destroy an entire planet.
</blockquote>
```

### 상황에 맞는 구절 식별

다음 예제는 글의 검색 결과를 강조할 용도로 `<mark>`를 사용합니다.


```html
<p>
  It is a dark time for the Rebellion. Although the Death Star has been
  destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
  forces from their hidden base and pursued them across the galaxy.
</p>

<p>
  Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
  freedom fighters led by Luke Skywalker has established a new secret base on
  the remote ice world of Hoth.
</p>
```


다른 `<mark>`와 검색 결과 표시를 구별하기 위해 사용자 지정 클래스 `"match"`를 추가로 적용했습니다.

접근성 고려사항
--------

대부분의 스크린 리더는 기본값에서 `<mark>` 요소의 존재를 표현하지 않습니다. 그러나 CSS `content` 속성과 `::before` (en-US), `::after` 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.


```css
mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [강조 시작] ";
}

mark::after {
  content: " [강조 끝] ";
}
```


스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 강조표시의 유무가 꼭 필요할 때만 사용해야 합니다.

* Short note on making your mark (more accessible) | The Paciello Group
* Tweaking Text Level Styles | Adrian Roselli
명세
--

| Specification |
| --- |
| HTML Standard # the-mark-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<p>
===

**HTML `<p>` 요소**는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.

문단은 블록 레벨 요소이며, 자신의 닫는 태그(`</p>`) 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다. 아래의 "태그 생략" 항목을 참고하세요.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠 |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 
 시작 태그는 필수입니다. 닫는 태그는 `<p>` 요소의
 바로 뒤에 `<address>`,
 `<article>`, `<aside>`,
 `<blockquote>`, `<div>` (en-US),
 `<dl>`, `<fieldset>`,
 `<footer>`, `<form>`,
 `<h1>`, `<h2>`,
 `<h3>`, `<h4>`,
 `<h5>`, `<h6>`,
 `<header>`, `<hr>`,
 `<menu>` (en-US), `<nav>`,
 `<ol>`, `<pre>`,
 `<section>`, `<table>` (en-US),
 `<ul>`, `<p>` 요소가
 위치하는 경우, 또는 부모 태그의 콘텐츠가 더 존재하지 않고 부모가
 `<a>` 요소가 아닐 때 생략할 수 있습니다.
  |
| 가능한 부모 | 플로우 콘텐츠를 허용하는 모든 요소 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLParagraphElement` (en-US) |

특성
--

이 요소는 전역 특성만 포함합니다.

예제
--

### HTML


```html
<p>첫 번째 문단입니다.
  첫 번째 문단입니다.
  첫 번째 문단입니다.
  첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.
  두 번째 문단입니다.
  두 번째 문단입니다.
  두 번째 문단입니다.</p>
```

### 결과

문단 꾸미기
------

브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리합니다. 첫 줄 들여쓰기 등 다른 구분 방법은 CSS를 통해 사용할 수 있습니다.

### HTML


```html
<p>
  독자 입장에선 문단 사이를 여백으로 구분하는게 제일 읽기 쉽지만, 첫 줄
  들여쓰기로도 구분할 수 있습니다. 들여쓰기는 보통 인쇄매체에서 공간과 종이를
  아끼기 위해 사용합니다.
</p>

<p>
  학교 과제나 초안 등 나중에 편집할 글은 여백과 들여쓰기 둘 다 사용합니다.
  그러나 완성한 글에 둘 다 사용하는건 불필요하고 초보적으로 여겨집니다.
</p>

<p>
  아주 오래된 글에서는 문단을 특수기호 ¶, <i>필크로</i>(단락 기호)로
  구분했습니다. 그러나 답답하고 읽기 힘들어 지금은 사용하지 않습니다.
</p>

<p>
  얼마나 읽기 힘들까요? 직접 알아보세요.
  <button data-toggle-text="안돼! 다시 돌려놔요!">단락 기호 써보기</button>
</p>
```

### CSS


```css
p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
  text-indent: 0;
  display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}
```

### JavaScript


```js
document.querySelector("button").addEventListener("click", function (event) {
  document.querySelectorAll("p").forEach(function (paragraph) {
    paragraph.classList.toggle("pilcrow");
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});
```

### 결과

접근성 고려사항
--------

콘텐츠를 문단으로 나누면 페이지의 접근성을 높입니다. 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 매체의 여백이 사용자의 빠른 콘텐츠 탐색을 돕는 것과 같은 효과를 얻을 수 있습니다.

빈 `<p>` 요소를 사용해 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 부정적인 경험을 줄 수 있습니다. 스크린 리더가 문단의 존재는 알려주겠지만, 더 읽을 내용이 없기 때문입니다. 따라서 스크린 리더 사용자가 혼란을 느낄 수 있습니다.

여분의 공간이 필요하다면 `margin` 등 CSS 속성을 통해 적용하세요.


```css
p {
  margin-bottom: 2em; /\* 문단 다음 여백을 늘림 \*/
}
```

명세
--

| Specification |
| --- |
| HTML Standard # the-p-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<hr>`
* `<br>`
<main>
======

**HTML `<main>` 요소**는 문서 `<body>`의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.

시도해보기
-----

`hidden` 속성 없이는 문서에 하나보다 많은 `<main>` 요소가 존재해선 안됩니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 요소. 단,
 구조적으로 올바른 `<main>` 요소여야 합니다.
  |
| 가능한 ARIA 역할 | 
 기본적으로 `main` 역할 포함,
 `presentation` (en-US) 가능.
  |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

`<main>` 요소의 콘텐츠는 문서의 유일한 내용이어야 합니다. 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 문서에 걸쳐 반복되는 콘텐츠는 포함해선 안됩니다. 그러나 검색 폼이 페이지의 주요 기능이라면 예외로 둘 수 있습니다.

`<main>`은 요소 개요에 영향을 주지 않습니다. `<body>` 등의 요소나 `<h2>`와 같은 제목 요소와 달리 `<main>`은 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용입니다.

예제
--


```html
<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>...</p>
    <p>...</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>...</p>
    <p>...</p>
  </article>
</main>

<!-- other content -->
```

접근성 고려사항
--------

### 랜드마크

`<main>` 요소는 `main` 랜드마크 (en-US) 역할과 동일하게 행동합니다. 랜드마크 (en-US)는 접근성 보조기술이 문서의 큰 구획을 찾고 이동할 때 쓰입니다. 구형 브라우저를 지원할 필요가 없다면, `role="main"`보다 `<main>` 요소를 사용하세요.

### 건너뛰기 링크

건너뛰기 링크, 스킵 내비게이션(skipnav)은 접근성 보조기술이 주요 탐색 구획, 정보 배너 등 반복되는 큰 구획을 빠르게 넘어갈 수 있도록 지원하는 기법으로, 사용자가 페이지의 주요 내용으로 신속하게 접근할 수 있도록 도와줍니다.

`<main>` 요소에 `id` 요소를 추가해 건너뛰기 링크의 대상으로 지정하세요.


```html
<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>
```


* WebAIM: "Skip Navigation" Links
### 읽기 모드

브라우저 읽기 모드는 문서 콘텐츠를 변환할 때 `<main>` 요소와 더불어 제목과 콘텐츠 구획 요소를 사용합니다.

* Building websites for Safari Reader Mode and other reading apps.
명세
--

| Specification |
| --- |
| HTML Standard # the-main-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

대부분의 브라우저에서 `<main>` 요소를 지원합니다. 그러나 Internet Explorer 11 이하를 지원할 땐 `<main>` 요소에 `"main"` ARIA 역할을 명시해 접근성을 확보하는 것이 좋습니다.


```html
<main role="main">...</main>
```

같이 보기
-----

* 기본 구조 요소: `<html>`, `<head>`, `<body>`
* 구획 관련 요소: `<article>`, `<aside>`, `<footer>`, `<header>`, `<nav>`
* ARIA: Main role (en-US)
<header>
========

**HTML `<header>` 요소**는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 플로우 콘텐츠. 단, 다른 `<header>` 또는
 `<footer>`가 자손으로 올 수 없습니다.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. 단, `<address>`,
 `<footer>`, 또는 다른 `<header>`의
 자손으로 사용할 수 없습니다.
  |
| 가능한 ARIA 역할 | `group` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

`<header>` 요소는 구획 콘텐츠가 아니므로 개요에 구획을 생성하지 않습니다. 대신 주위 구획의 제목(<h1>-<h6> 요소)을 감싸기 위한 요소지만, 필수 사항은 **아닙니다**.

### 역사적 사용처

`<header>`는 HTML5에서야 명세에 포함됐지만, 사실 HTML의 시작부터 존재했습니다. 세계 최초의 웹사이트에서 확인할 수 있듯 원래는 `<head>`요소로서 사용했지만, 어느 순간부터 다른 이름이 됐습니다. 덕분에 `<header>`는 나중에 다른 역할을 맡을 수 있었습니다.

예제
--

### 페이지 제목


```html
<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
```

### 글 제목


```html
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p>
    <a href="https://janesmith.com/the-planet-earth/">Continue reading....</a>
  </p>
</article>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-header-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.