<!-- <b>: "зверни увагу", але не "це критично важливо" -->
<p>Натисніть кнопку <b>OK</b>.</p>

<!-- <strong>: "це важливо, це має значення" -->
<p><strong>Увага!</strong> Ця дія незворотня.</p>

<p><strong>Заборонено</strong> залишати дітей без нагляду.</p>

<p>Термін здачі проєкту — <strong>15 березня 2024 року</strong>.</p>

<p>Для входу необхідний <strong>дійсний паспорт або ID-картка</strong>.</p>

<!-- Вкладений strong — посилення акценту -->
<p>
    <strong>Це важливо! <strong>Дуже важливо!</strong></strong>
</p>

<!-- Технічні терміни -->
<p>Алгоритм <i>quicksort</i> має середню складність O(n log n).</p>

<!-- Іноземні слова та вирази -->
<p>Вираз <i lang="la">carpe diem</i> означає «лови момент».</p>

<!-- Назви творів, кораблів, судин -->
<p>Роман <i>«Майстер і Маргарита»</i> написаний Михайлом Булгаковим.</p>

<!-- Думки персонажа в художньому тексті -->
<p>Вона зупинилась. <i>Що ж тепер робити?</i> — промайнула думка.</p>

<!-- Різниця в наголосі змінює зміст речення -->
<p><em>Я</em> не казав, що він вкрав гроші. (наголос на «я»)</p>

<p>Я <em>не</em> казав, що він вкрав гроші. (наголос на «не»)</p>

<p>Я не казав, що він <em>вкрав</em> гроші. (наголос на «вкрав»)</p>

<!-- Орфографічна помилка зі стилем -->
<p>Він написав <u class="spelling-error">карова</u> замість «корова».</p>

<!-- Власні назви в китайській літературі (традиційне використання) -->
<p><u>東京</u> — столиця Японії.</p>

<!-- Декоративне підкреслення через CSS -->
<p class="custom-underline">Стильне підкреслення через CSS</p>

.spelling-error {
    text-decoration: underline wavy red;
}
.custom-underline {
    text-decoration: underline;
    text-decoration-color: #3b82f6;
    text-decoration-style: wavy;
    text-underline-offset: 3px;
}

<!-- Старі ціни в магазині -->
<p>
    Навушники Sony WH-1000XM5:
    <s>8 999 грн</s>
    <strong>6 499 грн</strong>
    ⬇️ -28%
</p>

<!-- Скасована умова -->
<p>Мінімальне замовлення: <s>500 грн</s> безкоштовна доставка від 1 грн!</p>

s {
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
}

<!-- Редакторська правка -->
<p>
    Зустріч відбудеться
    <del datetime="2024-03-10">в понеділок о 14:00</del>
    <ins datetime="2024-03-12">у середу о 16:00</ins>.
</p>

<!-- Виправлення помилки -->
<p>
    Автор статті —
    <del>Іван Петренко</del>
    <ins>Марія Коваленко</ins>.
</p>

<!-- Атрибут datetime вказує ISO 8601 дату змін -->
<p>
    <del datetime="2024-03-15T14:30:00Z">видалений текст</del>
    <ins datetime="2024-03-15">доданий текст</ins>
</p>

del {
    color: #dc2626;
    background-color: #fee2e2;
    text-decoration: line-through;
}

ins {
    color: #16a34a;
    background-color: #dcfce7;
    text-decoration: none;
}

<!-- Результати пошуку -->
<p>Результати за запитом «<mark>HTML форматування</mark>»:</p>

<!-- Ключові слова у статті -->
<p>
    Для розуміння каскадності CSS важливо зрозуміти поняття
    <mark>специфічності</mark> та <mark class="blue-highlight">спадкування</mark>.
</p>

<!-- Виділення у цитаті -->
<blockquote>
    «Будь-який досить просунутий тег — це
    <mark>неможливо відрізнити від магії</mark>.»
</blockquote>

/* Браузерний default: жовтий фон */
mark {
    background-color: #fef08a;
    color: black;
    border-radius: 2px;
    padding: 0 2px;
}

/* Кастомний синій варіант */
mark.blue-highlight {
    background-color: #bfdbfe;
    color: #1e3a8a;
    border-radius: 3px;
    padding: 0 2px;
}

blockquote {
    border-left: 4px solid #3b82f6;
    padding: 0.5em 1em;
    margin: 1em 0;
    font-style: italic;
    color: #475569;
    background: #f8fafc;
}

<!-- Авторське право у футері -->
<footer>
    <small>&copy; 2024 Мій сайт. Усі права захищені.</small>
</footer>

<!-- Правові застереження під формою -->
<p>
    <button>Зареєструватись</button><br>
    <small>
        Натискаючи кнопку, ви погоджуєтесь з
        <a href="#">Умовами використання</a>.
    </small>
</p>

<!-- Примітки під заголовком -->
<h1>Акція «Чорна п'ятниця»</h1>
<small>Дійсно до 30 листопада або до вичерпання запасів</small>

<!-- Хімічні формули (нижній індекс) -->
<p>Вода: H<sub>2</sub>O</p>
<p>Сірчана кислота: H<sub>2</sub>SO<sub>4</sub></p>
<p>Глюкоза: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>

<!-- Математичні степені (верхній індекс) -->
<p>Теорема Піфагора: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>Площа кола: S = πr<sup>2</sup></p>

<!-- Виноски (верхній індекс) -->
<p>Станом на 2023 рік населення України становить 37 мільйонів<sup>1</sup>.</p>
<p>
    <small><sup>1</sup> За даними Державної статистики України.</small>
</p>

<!-- Порядкові числівники -->
<p>Він зайняв 1<sup>st</sup> місце (1<sup>е</sup> місце).</p>

<p><abbr title="HyperText Markup Language">HTML</abbr> — мова розмітки.</p>

<p>
    Для розробки використовуємо
    <abbr title="Visual Studio Code">VS Code</abbr>
    та
    <abbr title="Cascading Style Sheets">CSS</abbr>.
</p>

<p>
    Сайт відповідає вимогам
    <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1.
</p>

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    text-underline-offset: 3px;
    color: #1e40af;
}

<p>
    Для зміни кольору використовуйте властивість
    <code>color: red;</code>.
</p>

<p>Функція <code>getElementById()</code> повертає елемент DOM.</p>

<p>Використовуйте тег <code>&lt;pre&gt;&lt;code&gt;</code> для блоку коду:</p>

<pre><code>function greet(name) {
    return `Привіт, ${name}!`;
}

console.log(greet('Світ'));</code></pre>

code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.875em;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 0.1em 0.4em;
    color: #be185d;
}
pre {
    background-color: #1e293b;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
}
pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 0.875rem;
}

<p>Збережіть файл: <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
<p>Відкрийте командний рядок: <kbd>Win</kbd> + <kbd>R</kbd></p>
<p>Для виходу натисніть <kbd>Esc</kbd></p>

kbd {
    display: inline-block;
    padding: 2px 8px;
    font-family: monospace;
    font-size: 0.85em;
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 2px 0 #94a3b8;
}

<!-- var: математичні або програмні змінні -->
<p>Площа прямокутника: <var>S</var> = <var>a</var> × <var>b</var></p>
<p>Де <var>x</var> — невідома величина.</p>

<!-- samp: зразок виводу програми -->
<p>Після запуску ви побачите: <samp>Hello, World!</samp></p>
<p>Програма вивела помилку: <samp>Error: undefined is not a function</samp></p>

<blockquote cite="https://uk.wikipedia.org/wiki/HTML">
    <p>
        HTML (від англ. HyperText Markup Language — «мова гіпертекстової розмітки») — стандартна мова розмітки для
        документів, що передаються в мережі Інтернет.
    </p>
    <footer>— <cite>Вікіпедія, «HTML»</cite></footer>
</blockquote>

blockquote {
    border-left: 4px solid #3b82f6;
    margin: 1.5em 0;
    padding: 1em 1.5em;
    background-color: #f8fafc;
    font-style: italic;
    color: #475569;
}

blockquote footer {
    margin-top: 0.5em;
    font-style: normal;
    font-size: 0.9em;
    color: #64748b;
}

<p>
    Як сказав Стів Джобс:
    <q cite="https://example.com/jobs-speech"> Ваш час обмежений, тому не витрачайте його на чуже життя. </q>
</p>

<!-- З lang="uk" браузер додасть «» або „“ -->
<p lang="uk">Народна мудрість говорить: <q>Сім раз відміряй, один раз відріж.</q></p>

<p>Перша поема — <cite>«Кобзар»</cite> Тараса Шевченка.</p>

<p>Відповідно до <cite>специфікації HTML5 W3C</cite>, тег &lt;cite&gt; використовується для назв творів.</p>

<pre>
  Ти знаєш, що ти — людина?
  Ти знаєш про це чи ні?
  Усмішка твоя — єдина,
  мука твоя — єдина,
  очі твої — одні.
                — Василь Симоненко
</pre>

<!-- ASCII-арт -->
<pre>
    /\_____/\
   /  o   o  \
  ( ==  ^  == )
   )         (
  (           )
 ( (  )   (  ) )
(__(__)___(__)__)
</pre>

<!-- Адреса -->
<address>
    ТОВ «Веб-Студія»<br />
    вул. Хрещатик, 1<br />
    м. Київ, 01001<br />
    Україна
</address>

<!-- Поетичний текст -->
<p>
    Садок вишневий коло хати,<br />
    Хрущі над вишнями гудуть,<br />
    Плугатарі з плугами йдуть,<br />
    Співають ідучи дівчата.
</p>

<h2>Розділ 1</h2>
<p>Вміст першого розділу.</p>

<hr />

<h2>Розділ 2</h2>
<p>Вміст другого розділу.</p>

<hr class="gradient" />

<p>Після градієнтної лінії.</p>

hr {
    border: none;
    border-top: 2px solid #e2e8f0;
    margin: 1.5em 0;
}

/* Декоративна лінія з градієнтом */
hr.gradient {
    border: none;
    height: 2px;
    background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
    margin: 1.5em 0;
}

<!-- Показуємо HTML-код як текст -->
<p>Тег &lt;p&gt; — це абзац.</p>

<!-- Назва компанії з амперсандом -->
<p>Компанія «Марк &amp; Спенсер»</p>

<!-- Типографіка і спецсимволи -->
<p>&copy; 2024 Мій Сайт</p>
<p>Nike&trade; — спортивний бренд</p>
<p>Apple&reg; — зареєстрована марка</p>

<!-- Тире -->
<p>Київ&ndash;Львів — 540 км</p>
<p>Відпустка&mdash;найкращий час</p>

<!-- Лапки і стрілки -->
<p>&laquo;Кобзар&raquo;</p>
<p>&larr; Назад &middot; Далі &rarr;</p>

<!-- Математика -->
<p>5 &times; 3 = 15</p>
<p>10 &divide; 2 = 5</p>
<p>a &ne; b</p>
<p>&pi; = 3.14159...</p>
<p>&infin;</p>

<p class="thin">100 — Thin</p>
<p class="light">300 — Light</p>
<p class="regular">400 — Regular</p>
<p class="medium">500 — Medium</p>
<p class="semibold">600 — Semibold</p>
<p class="bold">700 — Bold</p>
<p class="black">900 — Black</p>

* { margin: 0.2em 0; font-family: system-ui; }
.thin { font-weight: 100; }
.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }
.black { font-weight: 900; }

<p class="underline">Підкреслення (underline)</p>
<p class="strikethrough">Закреслення (line-through)</p>
<p class="overline">Надлінійне (overline)</p>
<p class="fancy-underline">Фігурна хвиля (wavy red)</p>

* { margin: 0.4em 0; font-family: system-ui; font-size: 1rem; }
.underline { text-decoration: underline; }
.strikethrough { text-decoration: line-through; }
.overline { text-decoration: overline; }
.fancy-underline {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
}

<p class="uppercase">все великими (uppercase)</p>
<p class="lowercase">ВСЕ МАЛИМИ (lowercase)</p>
<p class="capitalize">перша літера кожного слова (capitalize)</p>

* { margin: 0.4em 0; font-family: system-ui; font-size: 1rem; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

<p class="caps-label">стильний лейбл</p>
<h2 class="heading">Заголовок з літерним розташуванням</h2>
<p class="left">Вирівнювання ліворуч</p>
<p class="center">Вирівнювання по центру</p>
<p class="right">Вирівнювання праворуч</p>
<p class="justify">Текст по ширині. Це дозволяє рівномірно розташовувати слова по альбому краю рядка, що виглядає красиво у газетах.</p>

* { font-family: system-ui; }
.caps-label {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6366f1;
}
.heading { letter-spacing: 0.05em; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }

<h2 class="shadow">Звичайна тінь</h2>
<h2 class="glow">Світиння (glow)</h2>
<h2 class="three-d">Тривимірний ефект</h2>

body { background: #1e293b; padding: 2rem; }
h2 { font-family: system-ui; margin: 0.75rem 0; font-size: 1.5rem; }

.shadow {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.glow {
    color: #93c5fd;
    text-shadow:
        0 0 10px #3b82f6,
        0 0 20px #3b82f6,
        0 0 40px #3b82f6;
}
.three-d {
    color: #e2e8f0;
    text-shadow:
        1px 1px 0 #999,
        2px 2px 0 #888,
        3px 3px 0 #777;
}