Форматування символів

Теги форматування символів (дескриптори стилів) завжди є парними:

• <b>…</b> — жирне написання;
• <i>…</i> — курсив;
• <u>…</u> — підкреслення;
• <strike>…</strike> — перекреслення;
• <tt>…</tt> — стала ширина літер;
• _… — _нижній індекс;
• ^… — ^{верхній} індекс;


• <big>…</big> — збільшити шрифт;
• <small>…</small> — зменшити шрифт;
• <em>…</em> — логічний наголос — діє майже завжди як <i>;
• <cite>…</cite> — цитування — діє майже завжди як <i>;
• <code>…</code> — текст коду — діє майже завжди як <tt>;
• <samp>…</samp> — результат виконання програми — діє майже завжди як <tt>;
• <strong>…</strong> — виділення — діє майже завжди як <b>;
• <dfn>…</dfn> — текст означення (залежно від браузера);
• <var>…</var> — назва змінної або параметра — діє майже завжди як <i>;
• <kbd>…</kbd> — назва клавіші — діє майже завжди як <tt>;
• <xmp>…</xmp> —текст-зразок— діє майже завжди як <tt>.

У поданому вище переліку перші 7 контейнерів (до порожнього рядка) називають фізичними, а наступні — логічними.

Примітка. Застосовують вкладення тегів аналогічно до використання дужок різного вигляду. Наприклад, жирний  курсив задають таким чином:

<b><i>текст</i></b>.

Властивості шрифту: гарнітуру, розмір і колір задають відповідно як значення атрибутів face, size та color контейнера font.

Якщо першим тегом у тілі сторінки є такий:

<font face="ubuntu, calibri" size="+2">

і якщо на комп'ютері встановлено шрифт ubuntu, то буде застосовано саме його для відображення тексту. Інакше браузер застосує шрифт calibri, а при відсутності останнього — деякий стандартний шрифт. Зазвичай із зарубками. Наприклад, Times New Roman для ОС Windows.

Розміри символів шрифту можуть бути від 1 до 7 (перелічено від найменшого до найбільшого). Розмір 3 вважають стандартним, він приблизно відповідає 10 пунктам. Значення "+2" атрибута size означає, що розмір шрифту має бути на дві одиниці більший ніж стандартний, тобто п'ятий.

Колір тексту можна задати його назвою англійською мовою:

• aqua — бірюзовий;
• black — чорний;
• blue — світло-синій;
• fuchsia — бузковий;
• gray — сірий;
• green — зелений;
• lime — салатовий;
• maroon — бордовий;
• navy — синій;
• olive — оливковий;
• purple — фіолетовий;
• red — червоний;
• silver — сріблястий;
• teal — сіро-зелений;
• white — білий;
• yellow — жовтий.

Колір можна задати кодами кольорової моделі RGB, як це роблять при роботі з графічним редактором. Наприклад, #ff7800.

Ви можете додати елемент всередину іншого елементу. Це називається вкладенням. 

Якщо ми хочемо наголосити, що наш кіт дуже сумний, ми можемо загорнути слово "дуже" в елемент <strong>, який означає, що слово особливо сильно наголошене:

<p>Мій кіт <strong>дуже</strong> сумний.</p>

Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент <p>, а потім елемент <strong>, що означає, що першим ми маємо закрити внутрішній елемент <strong>, а потім зовнішній <p>. Приклад нижче неправильний:

<p>Мій кіт <strong>дуже сумний.</p></strong>

Елемент має закриватися або всередині, або ззовні іншого елемента. Якщо кінцевий тег зовнішнього елемента іде перед кінцевим тегом внутрішнього елемента, ваш браузер спробує здогадатися, що ви хотіли цим всім сказати, і результати цього можуть бути неочікуваними. Тому не робіть так!