# 텍스트

## Headings

### h1, h2, h3, h4, h5, h6

구획 제목을 나타냅니다. 구획 단계는 `<h1>`이 가장 높고 `<h6>`은 가장 낮습니다.

### hgroup

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

```html
<hgroup>
    <h1>Calculus I</h1>
    <h2>Fundamentals</h2>
</hgroup>
<p>This course will start with a brief introduction about the limit of a function. Then we will describe how the idea of derivative emerges in the Physics and Geometry fields. After that, we will explain that the key to master calculus is …</p>
```

## Paragraph

### p

하나의 문단을 나타냅니다.

### pre

미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.

```html
<p>Some species live in houses where they hunt insects attracted by artificial light.</p>
```

## 강조

### em

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

### strong

중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.

### mark

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

### i

텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다.

### b

독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다.

### u

글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다.

### s

글자에 취소선, 즉 글자를 가로지르는 선을 그립니다.

### ~~strike~~

글자에 취소선을 그립니다.

## 수정

### ins

문서에 추가된 텍스트의 범위를 나타냅니다.

### del

문서에서 제거된 텍스트의 범위를 나타냅니다.

### small

덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다.

```html
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
```

```html
<p>This liquid is <strong>highly toxic</strong>.</p>
```

### ~~big~~

포함된 텍스트를 주변 텍스트보다 한 수준 더 큰 글꼴 크기로 렌더링합니다.

### ~~tt~~

모노스페이스 글꼴을 사용하여 표시합니다.

## 인용

### blockquote

안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. 인용문의 출처 URL은 cite 속성으로, 출처 텍스트는 `<cite>` 요소로 제공할 수 있습니다.

- cite

```html
<p>Here below is a blockquote..</p>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>
```

### q

둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다.

- cite

```html
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>
```

### cite

저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다.

- title

```html
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>
```

## 단축

### abbr

준말 또는 머리글자를 나타냅니다.

- title

```html
<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
```

## ### ~~acronym~~

단어의 두문자어 또는 약어를 표시합니다.

## 정의

### dfn

현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다. `<dfn>`에서 가장 가까운 `<p>`, `<dt>`/`<dd>` 쌍, `<section>` 조상 요소를 용어 정의로 간주합니다.

```html
<p>A <dfn id="def-validator">validator</dfn> is a program that checks for syntax errors in code or documents.</p>
```

## 루비

### ruby

루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.

### ~~rb~~

`<ruby>` 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다.

### rt

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

### rp

`<ruby>` 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다.

```html
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
```

## 첨자

### sub

활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다.

### sup

활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다.

```html
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
```

## 코드

### code

짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다.

### var

수학 표현 또는 프로그래밍에서 변수의 이름을 나타냅니다.

### kbd

키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다.

### samp

컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다.

```html
<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
```

## 데이터

### data

주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결합니다.

- value

```html
<ul>
    <li><data value="398">Mini Ketchup</data></li>
    <li><data value="399">Jumbo Ketchup</data></li>
    <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>
```

## 시간

### time

시간의 특정 지점 또는 구간을 나타냅니다.

- datetime

```html
<time datetime="2016-01-20">20 January 2016</time>
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
```

## 주소 또는 연락처

### address

가까운 HTML요소의 주소나 연락처 정보를 나타냅니다.

```html
<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>
```

## 링크

### a

다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.

- href

  http: | mailto: | tel:

- download

  다운로드 할지를 묻는 대화상자가 표시됩니다.

- target

  _self | _blank | _parent | _top


```html
<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>
```

## 줄바꿈

### br

텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.

### wbr

현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.

## 수평선

### hr

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