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

**HTML `<optgroup>` 요소**는 `<select>` (en-US) 요소의 옵션을 묶을 수 있습니다.

시도해보기
-----

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

**참고:** `<optgroup>` 요소는 중첩할 수 없습니다.

특성
--

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

`disabled`

지정한 경우 모든 하위 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다.

`label`

옵션 그룹의 이름. 브라우저가 그룹의 이름을 표시할 때 사용할 수 있습니다. 필수로 지정해야 합니다.

예제
--


```html
<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>
```

### 결과

명세
--

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

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

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

**HTML `<del>` 요소**는 문서에서 제거된 텍스트의 범위를 나타냅니다. 문서나 소스 코드의 변경점 추적 등에 사용할 수 있습니다. `<ins>` 요소를 추가된 텍스트의 범위를 나타낼 수 있습니다.

시도해보기
-----

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

특성
--

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

`cite`

회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 URI.

`datetime`

변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 HTML에서 사용하는 날짜와 시간 형식 (en-US) 문서에서 확인할 수 있습니다.

예제
--


```html
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>
```

### 결과

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

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


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

del::before {
  content: " [제거 부분 시작] ";
}

del::after {
  content: " [제거 부분 끝] ";
}
```


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

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

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

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

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

같이 보기
-----

* 텍스트의 삽입을 위한 `<ins>` 요소
* 삭제 여부와 관계 없이 취소선을 위한 `
` 요소
<meter>
=======

**HTML `<meter>` 요소**는 특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타냅니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠,
 레이블 가능, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. 단, 다른 `<meter>` 요소는 사용할 수 없습니다. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLMeterElement` (en-US) |

특성
--

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

`value`

현재의 값. 최소와 최댓값(`min`과 `max` 특성)을 지정한 경우, 그 사이여야 합니다. 지정하지 않았거나 잘못된 값인 경우 `0`으로 간주합니다. 지정했으나 범위 바깥인 경우, 범위에 맞춰 나머지 값을 버립니다.

**참고:**`value`가 `0` 이상 `1` 이하가 아닌 이상, `min`과 `max`를 정의해 `value` 값이 그 안에 들어가도록 해야 합니다.

`min`

측정 범위의 가능한 최솟값. 지정할 경우 최댓값(`max` 특성) 미만이어야 합니다. 지정하지 않은 경우 `0`입니다.

`max`

측정 범위의 가능한 최댓값. 지정할 경우 최솟값(`min` 특성)을 초과해야 합니다. 지정하지 않은 경우 `1`입니다.

`low`

측정 범위 중 낮은 범위의 최댓값. 지정할 경우 전체 범위 최솟값(`min` 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 `high`와 `max` 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.

`high`

측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(`max` 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 `low`와 `min` 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.

`optimum`

이상적인 값. `min`과 `max` 특성으로 정의한 범위 내에 위치해야 합니다. `low`와 `high` 특성을 함께 사용한 경우, `optimum`은 어느 범위가 이상적인지 나타냅니다. 예를 들어, 값이 `min`과 `low` 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.

`form`

`<meter>`와 연결할 `<form>` 요소("양식 소유자"). 같은 문서에 존재하는 `<form>` 요소의 `id` 특성 값을 사용해야 합니다. `form` 특성을 지정하지 않았으나 조상 중 `<form>` 요소가 존재하면 해당 `<form>`과 연결됩니다. `<input type="number">` (en-US)의 값 범위를 보여주는 등 `<meter>`를 양식 관련 콘텐츠로서 사용할 때만 지정하세요.

예제
--

### 간단한 예제

#### HTML


```html
<p>
  Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.
</p>
```


#### 결과

Google Chrome에서는 다음 그림처럼 보입니다.

![current look of 'meter' in Google Chrome](/ko/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.10.53_pm.png)

### 높은 범위와 낮은 범위

`min` 특성의 기본값이 0이므로 생략한 것을 참고하세요.

#### HTML


```html
<p>
  He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.
</p>
```


#### 결과

Google Chrome에서는 다음 그림처럼 보입니다.

![red meter in Google Chrome](/ko/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.11.52_pm.png)

명세
--

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

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

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

같이 보기
-----

* `<progress>`
<em>: 강세 요소
===========

**HTML `<em>` 요소**는 텍스트의 강세를 나타냅니다. `<em>` 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

`<em>` 요소는 주위 텍스트에 비해 강조된 부분을 나타냅니다. 보통 한 문장에서 단어 하나 혹은 몇 개로 제한되며, 문장의 의미에 영향을 미칠 수 있습니다.

`<em>`은 주로 기울임꼴을 적용해 표현합니다. 그러나 단순히 기울임꼴이 필요해서 `<em>`을 사용하면 안됩니다. CSS `font-style` (en-US) 속성을 사용하세요. 그 외에 흔히 기울임꼴을 많이 쓰는 경우를 정리하자면 저작물(책, 연극, 음악 등등)의 제목은 `<cite>`, 학명 등 과학적인 이름이나 다른 언어의 단어 등, 주변과 다른 톤을 가진 텍스트에는 `<i>`를 사용하세요. 주변보다 훨씬 중요한 텍스트는 `<strong>` (en-US)으로 강조하면 됩니다.

### `<i>`와 `<em>`

신입 개발자가 자주 혼란스러운 부분 중 하나가, 서로 다른 요소인데 비슷한 결과물을 내놓는 경우입니다. `<em>`과 `<i>`가 그 예로서, 둘 다 글자를 기울이는데 그러면 차이가 뭘까요? 어떤 걸 써야 할까요?

기본 설정에서 시각적 모습은 동일합니다. 그러나 의미는 다릅니다. `<em>`은 콘텐츠를 강조하지만, `<i>`는 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용합니다. (책이나 영화 등의 제목은 `<cite>`를 사용하세요.)

그러므로 요소 선택은 상황에 따라 달라야 하며, 순수하게 꾸밈을 위한 요소는 없습니다. 스타일은 CSS에 맡기세요.

`<em>`은 "Just *do* it already!"나 "We *had* to do something about it."처럼 쓸 수 있습니다. 이 글을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말할 것입니다.

`<i>`는 "The *Queen Mary* sailed last night."처럼 사용합니다. "Queen Mary"를 강조하는 것도 아니고, 중요한 단어도 아닙니다. 다만 이 단어가 Mary라는 이름의 여왕이 아니고, *Queen Mary*라는 이름의 선박임을 나타낼 뿐입니다. "The word *the* is an article"도 좋은 예제가 되겠습니다.

예제
--

`<em>` 요소는 명시적이거나 암시적인 대조를 표현할 때 주로 사용합니다.


```html
<p>
  과거에 <em>block-level</em>이라 불렸던 콘텐츠는 HTML 5부터
  <em>flow</em> 콘텐츠라고 말합니다.
</p>
```

### 결과

명세
--

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

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

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

같이 보기
-----

* `<i>`
<rp>: 루비 대체 괄호 요소
=================

**HTML `<rp>` 요소**는 `<ruby>` 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다. `<rt>` 요소를 감싸는 여는 괄호와 닫는 괄호를 각각의 `<rp>` 요소로 나타내야 합니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

* 루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. `<rp>` 요소는 `<ruby>` 요소를 지원하지 않는 브라우저에서 루비 주석을 구분할 수 있는 텍스트(주로 괄호)를 제공합니다.
예제
--

다음 예제는 한자료 표기한 "경복궁"의 각 글자에 루비 주석을 적용합니다.


```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;
}
```


결과는 다음과 같습니다.

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

景 (경) 福 (복) 宮 (궁)
```


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

명세
--

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

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

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

같이 보기
-----

* `<ruby>`
* `<rt>`
* `<rb>`
* `<rtc>`
===

**HTML `
` 요소**는 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. `
` 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, `
`는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 `<del>`과 `<ins>` 요소를 대신 사용하세요.

시도해보기
-----

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

특성
--

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

예제
--


```html

Today's Special: Salmon
 SOLD OUT<br />
```

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

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


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

s::before {
  content: " [취소선 시작] ";
}

s::after {
  content: " [취소선 끝] ";
}
```


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

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

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

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

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

같이 보기
-----

* 자료가 **삭제**된 경우 사용하는 `<del>` 요소.
* `
` 요소의 시각적 요소를 재현할 수 있는 CSS `text-decoration-line` (en-US) 속성.
<output>: 출력 요소
===============

**HTML `<output>` 요소**는 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소입니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠,
 양식 관련 콘텐츠(나열됨, 레이블 가능, 초기화 가능), 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLOutputElement` (en-US) |

특성
--

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

* `for`
    + : 스페이스로 구분한, 다른 여러 요소 `id`의 목록. 목록에 포함된 요소가 출력 결과에 공헌했거나 영향을 주었음을 나타냅니다.
* `form`
    + : `<output>`과 연결할 `<form>` 요소("양식 소유자"). 같은 문서에 존재하는 `<form>` 요소의 `id` 특성 값을 사용해야 합니다. `form` 특성을 지정하지 않았으나 조상 중 `<form>` 요소가 존재하면 해당 `<form>`과 연결됩니다.`form` 특성을 사용하면 `<output>`을 `<form>` 요소에 넣지 않고도 연결할 수 있고, 조상 중 `<form>`이 있더라도 소유자를 재정의할 수 있습니다.
* `name`
    + : 요소의 이름. `form.elements` API에서 사용합니다.

`<output>`의 값, 이름, 콘텐츠는 양식 전송 시 제출되지 않습니다.

예제
--


```html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>
```

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

많은 브라우저는 `<output>`을 마치 `aria-live` (en-US) 특성이 존재하는 것처럼 구현합니다. 따라서 접근성 기술은 포커스가 바뀌지 않더라도 `<output>` 내부의 UI 상호작용 결과를 표현할 것입니다.

명세
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<sub>: 아래 첨자 요소
===============

**HTML** **`<sub>`** 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다. 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

`<sub>` 요소는 타이포그래피적인 이유에 맞춰서만 사용해야 합니다. 타이포그래피적 이유란 기존의 관례나 표준이 아래 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 아래로 올려야 할 때는 사용해서는 안됩니다.

예를 들어 비즈니스나 상품의 워드마크 글씨 기준선을 내려야 한다면 `<sub>` 대신 CSS(대개 `vertical-align`)를 사용해야 합니다. `vertical-align: sub`를 사용할 수도 있고, 기준선을 25% 내려야 한다면 `vertical-align: -25%`로도 쓸 수 있습니다.

`<sub>`의 적절한 사용처 몇 가지는 다음과 같습니다.

* 각주 표기. 아래의 각주 표기 예제를 참고하세요.
* 수학 변수의 숫자 표기. MathML을 사용하는 방향을 고려하세요. 변수 표기 예제를 참고하세요.
* 화학식에서 원소의 수를 나타낼 때. (개발자의 친구, C8H10N4O2, 카페인) 아래의 화학식 예제를 참고하세요.
예제
--

### 각주 표기

각주의 숫자를 아래 첨자로 나타내는 경우도 있으며, `<sub>`가 흔히 쓰이는 경우입니다.


```html
<p>
  According to the computations by Nakamura, Johnson, and Mason<sub>1</sub> this
  will result in the complete annihilation of both particles.
</p>
```

### 변수 표기

수학에서는 같은 축 위의 점 여럿과 같이, 동일한 개념을 가리키는 변수의 무리는 같은 변수명을 사용하며, 뒤의 아래 첨자 숫자로 서로 구분합니다.


```html
<p>
  The horizontal coordinates' positions along the X-axis are represented as
  <var>x<sub>1</sub></var> ... <var>x<sub>n</sub></var
 >.
</p>
```

### 화학식

화학식에서 특정 원자의 수를 나타낼 때 아래 첨자를 사용합니다. H20의 아래 첨자 "2"는 화학식이 나타내는 물질에 수소 원자가 2개 존재한다는 뜻입니다.:


```html
<p>
  Almost every developer's favorite molecule is
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, which is commonly known
  as "caffeine."
</p>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-sub-and-sup-elements |

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

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

같이 보기
-----

* 위 첨자를 나타내는 `<sup>` (en-US) 요소. 위 첨자와 아래 첨자가 같은 공간에 공존할 수는 없습니다. 따라서 화학의 질량수/원자 번호 표기 등을 구현하려면 MathML이 필요합니다.
* `<msub>` (en-US), `<msup>` (en-US), `<msubsup>` (en-US) MathML 요소.
* CSS `vertical-align` 속성.
<figure>
========

**HTML `<figure>` 요소**는 독립적인 콘텐츠를 표현합니다. `<figcaption>` 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구획 루트, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 
`<figcaption>`과 뒤따르는
 플로우 콘텐츠.혹은 플로우 콘텐츠를 뒤따르는
 `<figcaption>`.혹은 플로우 콘텐츠.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | `group` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

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

사용 일람
-----

* 보통 `<figure>`는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡습니다.
* `<figure>`는 구획 루트이므로 `<figure>` 요소의 콘텐츠는 문서의 주 개요에서 제외됩니다.
* 안에 (처음이나 마지막 자식으로) `<figcaption>`을 넣어서 설명을 덧붙일 수 있습니다. 제일 처음 `<figcaption>`을 설명으로 사용합니다.
예제
--

### 이미지


```html
<!-- Just an image -->
<figure>
  <img
 src="https://developer.mozilla.org/static/img/favicon144.png"
 alt="A robotic monster over the letters MDN." />
</figure>

<!-- Image with a caption -->
<figure>
  <img
 src="https://developer.mozilla.org/static/img/favicon144.png"
 alt="A robotic monster over the letters MDN." />
  <figcaption>MDN Logo</figcaption>
</figure>
```

### 코드 조각


```html
<figure>
  <figcaption><code>navigator</code>를 이용하여 브라우저 정보 얻기</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}
  </pre>
</figure>
```

### 인용문


```html
<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs, then programming must
    be the process of putting them in.
  </blockquote>
</figure>
```

### 시


```html
<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>
```

명세
--

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

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

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

같이 보기
-----

* `<figcaption>`
<slot>
======

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**HTML `<slot>` 요소**는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 투명. |
| 이벤트 | `slotchange` |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLSlotElement` (en-US) |

특성
--

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

`name`

슬롯의 이름.

예제
--


```html
<template id="element-details-template">
  <style>
 details {
 font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 .name {
 font-weight: bold;
 color: #217ac0;
 font-size: 120%;
 }
 h4 {
 margin: 10px 0 -8px 0;
 background: #217ac0;
 color: white;
 padding: 2px 6px;
 border: 1px solid #cee9f9;
 border-radius: 4px;
 }
 .attributes {
 margin-left: 22px;
 font-size: 90%;
 }
 .attributes p {
 margin-left: 16px;
 font-style: italic;
 }
 </style>
  <details>
    <summary>
      <code class="name"
 >&lt;<slot name="element-name">NEED NAME</slot>&gt;</code
 >
      <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>
```


**참고:** 온전한 예제는 element-details(라이브로 보기)에서 볼 수 있습니다. 설명은 템플릿과 슬롯 사용하기 (en-US)에서 확인할 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-slot-element |
| DOM Standard # shadow-tree-slots |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<rt>: 루비 텍스트 요소
===============

**HTML `<rt>` 요소**는 동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정합니다.

시도해보기
-----

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

특성
--

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

예제
--

다음 예제는 `<ruby>` 요소를 사용해 한자의 발음을 표기합니다.


```html
<ruby> 漢 <rt>한</rt> 字 <rt>자</rt> </ruby>
```


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


결과는 다음과 같습니다.

브라우저가 루비를 지원하지 않는 경우엔 다음처럼 보일 것입니다.
```

漢 한 字 자
```


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

명세
--

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

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

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

같이 보기
-----

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rtc>`
<dd>
====

**HTML `<dd>` 요소**는 정의 목록 요소(`<dl>`)에서 앞선 용어(`<dt>`)에 대한 설명, 정의, 또는 값을 제공합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 
 여는 태그는 필수입니다. 바로 다음 요소가 `<dd>` 또는
 `<dt>`거나, 자신이 부모의 마지막 자식이라면 닫는
 태그는 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<dl>` 또는 (WHATWG
 HTML에서) `<dl>` 안의 `<div>` (en-US) |
| 가능한 이전 형제 요소 | `<dt>` 또는 다른 `<dd>`. |
| 암시적 ARIA 역할 | `definition` (en-US) |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

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

`nowrap` 
비표준

값이 `yes`면 너비의 끝에서 정의 텍스트의 줄이 바뀌지 않습니다. 기본값은 `no`입니다.

예제
--

예제를 보려면 `<dl>` 예제 (en-US)를 보세요.

명세
--

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

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

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

같이 보기
-----

* `<dl>`
* `<dt>`
<embed>
=======

**HTML `<embed>` 요소**는 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.

시도해보기
-----

* **컨텐츠 범주 (en-US)** 플로우 컨텐츠 (en-US), 구문 컨텐츠 (en-US), 포함된 컨텐츠, 대화형 컨텐츠, palpable 컨텐츠.
* **허용된 컨텐츠** 없음. 이것은 empty element.
* **태그 생략** 시작 태그는 있어야 하며, 종료태그는 있어서는 안됩니다.
* **허용된 부모 요소** 포함된 컨텐츠를 허용하는 모든 요소
* **DOM 인터페이스** `HTMLEmbedElement` (en-US)
속성
--

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

`height`

리소스의 표시될 높이 길이를 CSS 픽셀로 지정

`src`

포함된 리소스의 URL

`type`

인스턴스화할 플러그인을 고르기 위해 사용되는 MIME 타입

`width`

리소스의 표시될 가로 길이를 CSS 픽셀로 지정

예제
--


```html
<embed type="video/quicktime" src="movie.mov" width="640" height="480" />
```

명세
--

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

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

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

같이 보기
-----

* 다양한 타입의 포함된 컨텐츠를 위해 사용되는 다른 요소들 `<audio>` (en-US), `<canvas>`, `<iframe>` (en-US), `<img>`, `<math> (en-US)`, `<object>`, `<svg>` (en-US), and `<video>`.
<title>: 문서 제목 요소
=================

**HTML `<title>` 요소**는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다.


```html
<title>Grandma's Heavy Metal Festival Journal</title>
```


|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 메타데이터 콘텐츠. |
| 가능한 콘텐츠 | 비어있지 않는 텍스트. |
| 태그 생략 | 
 여는 태그와 닫는 태그 모두 필수입니다. `</title>`이
 없으면 브라우저가 페이지의 나머지 내용을 무시합니다.
  |
| 가능한 부모 요소 | 
 다른 `<title>` 요소를 포함하지 않은
 `<head>`.
  |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLTitleElement` |

특성
--

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

사용 일람
-----

`<title>` 요소는 페이지의 `<head>` 안에서 사용해야 합니다.

### 페이지 제목과 SEO

페이지 제목은 SEO에 큰 영향을 줍니다. 보통, 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 합니다. 검색 엔진이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문입니다. 또한, 검색 결과에서 잠재적 독자의 주목을 끌 수 있는 최초 "훅"이 바로 제목입니다.

다음은 좋은 제목을 작성할 때 참고할 수 있는 몇 가지 지침입니다.

* 하나 혹은 두 개의 단어로만 제목을 구성하는걸 피하세요. 콘텐츠를 설명하는 문장을 넣거나, 사전과 참고 문서의 경우 용어와 정의를 짝지어 사용하세요.
* 검색 결과는 보통 페이지 제목의 첫 55~60글자만 노출합니다. 이후 텍스트는 보이지 않을 수도 있으므로 글자 수를 제한하세요. 긴 제목을 반드시 사용해야 하는 경우, 중요한 부분을 앞에 배치해서 뒷부분이 없어지더라도 내용을 잃지 않도록 주의하세요.
* "키워드 뭉치" 스타일의 제목은 피하세요. 제목이 단순한 단어 나열에 불과하다면 검색 알고리즘이 결과에서 순서를 내리곤 합니다.
* 웹 사이트 내에서 제목을 최대한 겹치지 않도록 하세요. 중복, 혹은 유사한 제목은 검색 결과의 정확도를 떨어트리는 요인입니다.
예제
--


```html
<title>엄청 흥미로운 내용</title>
```


예제 코드를 포함한 문서를 연 브라우저 창이나 탭의 제목이 "엄청 흥미로운 내용"으로 바뀌게 됩니다.

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

페이지의 목적을 설명하는 `title`을 제공하는 것이 중요합니다.

보조 기술 사용자가 자주 사용하는 탐색 기술 중 하나는 페이지의 제목을 읽고 어떤 내용일지 유추하는 것입니다. 일일히 탐색해가며 콘텐츠를 찾는건 시간도 많이 들 뿐더러 어려운 일이기 때문입니다.

### 예제


```html
<title>
  메뉴 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로 주문하세요!
</title>
```


사용자를 도와주려면 페이지의 `title` 값이 중요한 상태의 변화(입력 폼 유효성 문제 등)를 반영하도록 바꾸세요.


```html
<title>
  오류 2개 - 주문서 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로
  주문하세요!
</title>
```


* MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
* Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0
명세
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<aside>: 별도 구획 요소
=================

**HTML `<aside>` 요소**는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구획 콘텐츠,
 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소.`<aside>` 요소는
 `<address>`의 후손이 될 수 없음에 주의하세요.
  |
| 암시적 ARIA 역할 | `complementary (en-US)` |
| 가능한 ARIA 요소 | `feed` (en-US), `none` (en-US),
 `note` (en-US), `presentation` (en-US),
 `region` (en-US), `search` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

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

사용 일람
-----

* 괄호에 묶인 텍스트라도 문서의 주요 플로우에 포함되어야 하므로 `<aside>`로 나타내선 안됩니다.
예제
--

### `<aside>` 사용하기

다음 예제는 글 내의 문단을 `<aside>`로 표시합니다. 해당 문단은 글의 주제와 간접적으로만 연결되어 있습니다.


```html
<article>
  <p>디즈니 만화영화 <em>인어 공주</em>는 1989년 처음 개봉했습니다.</p>
  <aside>인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.</aside>
  <p>영화에 대한 정보...</p>
</article>
```

### 결과

명세
--

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

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

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

같이 보기
-----

* HTML 구획과 개요 사용하기