# Розмітка тексту (2 частина)

## Тег \<dl> - список термінів (description list)[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-02/text#%D1%82%D0%B5%D0%B3-dl) <a href="#teg-dl" id="teg-dl"></a>

За допомогою контейнера <mark style="background-color:red;">\<dl></mark> (description list) можна створити список термінів. Він буде представлений у вигляді списку як в словнику. За термін відповідає тег <mark style="background-color:red;">\<dt></mark> (description term), а за визначення - термін <mark style="background-color:red;">\<dd></mark> (description details).

```html
<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language
  </dd>

  <dt>CSS</dt>
  <dd>
    Cascading Style Sheets
  </dd>

  <dt>JavaScript</dt>
  <dd>
     Programming language 
  </dd>
</dl>
```

{% embed url="<https://codepen.io/khomiak/pen/XWoJvoZ>" %}

## Тег \<span>[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-02/text#%D1%82%D0%B5%D0%B3-span) - допоміжний тег-декоратор <a href="#teg-span" id="teg-span"></a>

У блокового тегу \<div> є схожим за призначенням "аналог" - рядковий тег <mark style="background-color:red;">\<span></mark>.  Він не має семантичного значення, а використовується для стилізації інших елементів. Зазвичай ним стилізують менші текстові частини великого текстового фрагмента.

```html
<p>
  <span class="main">HTML</span> - HyperText Markup Language.
</p>
```

У цьому прикладі <mark style="background-color:red;">class="main"</mark> - стилізація за допомогою CSS, що буде розглянуто далі в матеріалах.

{% embed url="<https://codepen.io/khomiak/pen/MWZYNzv>" %}

## Тег \<pre>[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-02/text#%D1%82%D0%B5%D0%B3-pre) - попередньо відформатований текст <a href="#teg-pre" id="teg-pre"></a>

Текст поміщений всередині тегу <mark style="background-color:red;">\<pre></mark> (Preformatted) буде відображений саме таким чином як він написаний - без його оформлення інтерпретатором. Тобто збережуться велика кількість пробілів, а також принос рядка. Цей тег часто використовують для форматування віршів або лірики.

{% embed url="<https://codepen.io/khomiak/pen/GRPgVxb>" %}

## Теги \<sup> і \<sub> - верхній і нижній індекси[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-02/text#%D1%82%D0%B5%D0%B3%D0%B8-sup-%D1%96-sub) <a href="#tegi-sup-i-sub" id="tegi-sup-i-sub"></a>

Теги <mark style="background-color:red;">\<sup></mark> (superscript) і <mark style="background-color:red;">\<sub></mark> (subscript) - призначені відповідно до зображення символів у верхній і нижній індексній позиції. Використовують для зображення математичних рівнянь, а також хімічних формул тощо.

{% embed url="<https://codepen.io/khomiak/pen/QWzweZK>" %}

## Тег \<time>[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-02/text#%D1%82%D0%B5%D0%B3-time) - час і дата <a href="#teg-time" id="teg-time"></a>

Та той час можна написати просто текстом але бажано помістити в спеціальний тег <mark style="background-color:red;">\<time></mark>. І в атрибут <mark style="background-color:red;">datetime</mark> записати дату і час. Дату записують у форматі стандарту [ISO 8601](https://ru.wikipedia.org/wiki/ISO_8601). Візуально для користувача нічого не зміниться, утім тепер можна застосувати допоміжні технології.

```html
<p>
  Поточні дата і час: 
    <time datetime="2023-08-22T10:20">
      22 серпня 2023 року. 10:20 ранку
    </time>.
</p>
```

## Тег \<address>[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-02/text#%D1%82%D0%B5%D0%B3-address) - адреса <a href="#teg-address" id="teg-address"></a>

Зазвичай у тезі <mark style="background-color:red;">\<address></mark> розташовують дані про фізичну адресу, телефон, електронну пошту тощо.

```html
<address>
  Ukraine, Kyiv, Khreschatyk str. 36, office 365. 
</address>

<address>
  <a href="mailto:example@mail.com">example@mail.com</a>
  <a href="tel:+380441234567">(044) 123 45 67</a>
</address>
```

## Тег \<br>[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-02/text#%D1%82%D0%B5%D0%B3-address) - розрив рядка <a href="#teg-address" id="teg-address"></a>

Тег <mark style="background-color:red;">\<br /></mark> (line break), призначений для примусового розірвання тексту на новий рядок для візуального форматування.

{% hint style="info" %}
У сучасній верстці тег \<br> не використовують для оформлення абзаців або розривів між рядками. Для стилізації використовують CSS.
{% endhint %}

## Теги \<strong> і \<b>[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-02/text#%D1%82%D0%B5%D0%B3%D0%B8-strong-%D1%96-b) <a href="#tegi-strong-i-b" id="tegi-strong-i-b"></a>

Теги <mark style="background-color:red;">\<strong></mark> і <mark style="background-color:red;">\<b></mark> (bold) - на перший погляд, роблять одну і ту ж саму функцію, тобто роблять текст жирним.

Різниця полягає в тому, що <mark style="background-color:red;">\<strong></mark> робить семантичний наголос на виділеному тексті, у той час, як тег <mark style="background-color:red;">\<b></mark> тільки виділяє текст жирним. Це особливо важливо для асистивних технологій.

```html
<p>
  <strong>Обережно!</strong> Це програмне забезпечення небезпечне!
  <strong>Радимо</strong> скористатися аналогами цього пз.
</p>
```

## Теги \<em> та \<i>[​](https://textbook.edu.goit.global/html-css-a7u5xv/v1/uk/docs/lesson-02/text#%D1%82%D0%B5%D0%B3%D0%B8-em-%D1%96-i) <a href="#tegi-em-i-i" id="tegi-em-i-i"></a>

Теги <mark style="background-color:red;">\<em></mark> (emphasis) і <mark style="background-color:red;">\<i></mark> (italic) - на перший погляд, роблять одну і ту ж саму функцію, тобто роблять текст похилим (курсивом). Тег <mark style="background-color:red;">\<em></mark> має семантичний наголос, у той час, як <mark style="background-color:red;">\<i></mark> робить текст лише візуально похилим. Це особливо важливо для асистивних технологій.

```html
<p>Вино пʼють з <em>келихів</em>, а не чашок!</p>
```

**Покликання:**

[Специфікація тегу \<dl>](https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element)

Специфікація тегу \<dl>

Специфікація тегу \<dl>

Специфікація тегу \<dl>

Специфікація тегу \<dl>

[Більше дізнатися про формати часу - стандарт ISO 8601](https://ru.wikipedia.org/wiki/ISO_8601)