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

Тег <dl> - список термінів (description list)​

За допомогою контейнера <dl> (description list) можна створити список термінів. Він буде представлений у вигляді списку як в словнику. За термін відповідає тег <dt> (description term), а за визначення - термін <dd> (description details).

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

Тег <span>​ - допоміжний тег-декоратор

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

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

У цьому прикладі class="main" - стилізація за допомогою CSS, що буде розглянуто далі в матеріалах.

Тег <pre>​ - попередньо відформатований текст

Текст поміщений всередині тегу <pre> (Preformatted) буде відображений саме таким чином як він написаний - без його оформлення інтерпретатором. Тобто збережуться велика кількість пробілів, а також принос рядка. Цей тег часто використовують для форматування віршів або лірики.

Теги <sup> і <sub> - верхній і нижній індекси​

Теги <sup> (superscript) і <sub> (subscript) - призначені відповідно до зображення символів у верхній і нижній індексній позиції. Використовують для зображення математичних рівнянь, а також хімічних формул тощо.

Тег <time>​ - час і дата

Та той час можна написати просто текстом але бажано помістити в спеціальний тег <time>. І в атрибут datetime записати дату і час. Дату записують у форматі стандарту ISO 8601. Візуально для користувача нічого не зміниться, утім тепер можна застосувати допоміжні технології.

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

Тег <address>​ - адреса

Зазвичай у тезі <address> розташовують дані про фізичну адресу, телефон, електронну пошту тощо.

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

<address>
  <a href="mailto:[e-mail]">[e-mail]</a>
  <a href="tel:[phone]">(044) 123 45 67</a>
</address>

Тег <br>​ - розрив рядка

Тег <br /> (line break), призначений для примусового розірвання тексту на новий рядок для візуального форматування.

У сучасній верстці тег <br> не використовують для оформлення абзаців або розривів між рядками. Для стилізації використовують CSS.

Теги <strong> і <b>​

Теги <strong> і <b> (bold) - на перший погляд, роблять одну і ту ж саму функцію, тобто роблять текст жирним.

Різниця полягає в тому, що <strong> робить семантичний наголос на виділеному тексті, у той час, як тег <b> тільки виділяє текст жирним. Це особливо важливо для асистивних технологій.

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

Теги <em> та <i>​

Теги <em> (emphasis) і <i> (italic) - на перший погляд, роблять одну і ту ж саму функцію, тобто роблять текст похилим (курсивом). Тег <em> має семантичний наголос, у той час, як <i> робить текст лише візуально похилим. Це особливо важливо для асистивних технологій.

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

Покликання:

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

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

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

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

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

Більше дізнатися про формати часу - стандарт ISO 8601