Html теги для тексту

18

Від автора: ви пишете статтю на своєму блозі і треба якось оформити її, щоб привернути увагу відвідувачів. У цьому вам допоможуть html теги для тексту, а також потрібні властивості css.

Виділення тексту за допомогою html-тегів

Ця стаття не претендує на повноцінний довідник по html-тегами, але якщо вам цікава тема, то пропоную розібратися в значенні більшості необхідних нам тегів для виділення тексту.

Найчастіше текст на сторінці виділяють жирним шрифтом або курсивом. Для цього є спеціальні теги і (виділяють жирним), а також (курсивом). Всі вони парні, тобто потрібні слова потрібно помістити між відкриваючим і закриваючим тегом. Здавалося б, навіщо придумали два тега для одного і того ж дії?

Насправді в html вони виконують не тільки оформлювальну роль, але і смислову. Так, тег b просто виділяє тег жирним, не надаючи йому більшої сенсу, а от strong крім простого виділення ще й додає словами особливу важливість. Тому цим тегом не варто виділяти полтекста, а використовувати розумно.

В CSS також є властивості, які володіють таким же ефектом, що і перераховані теги. Наприклад, властивість font-weight: bold робить текст жирним, а font-style: italic – курсивним.

Підкреслення і закреслення тексту

Для підкреслення і закреслення теж є свої теги. наголошує слова, а — закреслює їх. Щоб домогтися такого ж ефекту через css, застосовують властивість text-decoration. У нього є декілька значень:

Underline – підкреслення знизу;

Overline – підкреслення зверху;

Line-through — закреслення;

І ще, для цього властивості через пробіл можна прописати декілька значень. По суті, можна навіть дати йому всі три види підкреслень, тільки не бачу сенсу в цьому.

Html теги для тексту

У HTML 5 ввели ще один тег — mark, який дозволяє просто виділити текст. За замовчуванням він виділяється жовтим кольором, хоча через css ви можете легко змінити це і створити своє виділення, яке відповідає дизайну вашого сайту.

Виведення тексту у верхньому і нижньому індексі

Трохи розібралися, але якщо вам треба написати формулу або щось інше, де потрібно вивести деякі цифри або літери у верхньому або нижньому індексі. Звичайно, html надає нам для цього потрібні кошти. Тег sub відображає шрифт у вигляді нижнього індексу, а sup — у вигляді верхнього. Також це можна зробити через css. Для цього потрібного тексту треба прописати:

vertical-align: sub | super

Font-size: розмір шрифту, трохи менший, ніж у звичайного тексту

Як оформити текст за допомогою CSS?

Якщо вам потрібно оформити шрифт за допомогою css, то до нього потрібно як-то звернутися за допомогою селектора. Одна справа, якщо вам треба виділити цілий абзац або посилання, тоді селектор у вас є, але що, якщо потрібно оформити одне слово десь в середині статті? Для цього існує чудовий парний тег span, який ніяк не впливає на зовнішній вигляд свого вмісту і не надає йому ніякого сенсу.

Відповідно, потрібний вам для оформлення фрагмент укладаємо у span, прив’язуємо до нього довільний стильової клас і пишемо стилі без будь-яких проблем!

Висновок тексту із збереженням прогалин.

У html існує тег pre, який дозволяє вивести інформацію так, як написано в текстовому редакторі. Це може стати в нагоді, якщо ви пишете вірш або потрібно поставити кілька пробілів. Нор через css теж можна керувати форматуванням тексту. Для цього існує властивість white-space. Його значення:

Nowrap – слова відображаються одним рядком без переносів. Якщо вони не влазять в рядок, з’явиться горизонтальна прокрутка.

Pre – діє аналогічно тегу pre

Pre-wrap – аналогічно попереднім значенням, але автоматично переносить текст на новий рядок, коли він перестає поміщатися (мабуть, найкраще значення)

Вирівнювання тексту

Ми вже розглянули деякі html-теги для тексту, але ще варто згадати вирівнювання. Воно задається не тегами, а через css властивість text-align:

Right – по правому краю.

Left – по лівому.

Center – по центру (наприклад, для заголовків)

Justify – по ширині. Це значення означає, що слова в рядку будуть розтягнуті так, щоб зайняти всю її ширн.

Колір і фон тексту

Знову ж таки, це вже неможливо задати за допомогою html-тегів, зате можна через css. Ми знову приходимо до висновку, що використовувати теги для редагування тексту, html не дуже зручно. Для кольору тексту є властивість color, яке має багато значень. Колір можна задавати як за допомогою ключових слів (orange, black, red), так і з явною вказівкою режиму: color: rgb(130, 100, 12). Фон задається абсолютно також, але тільки з допомогою властивості background.

Розмір і шрифт тексту

Властивість Font-size задає розмір шрифту font-family дозволяє вибрати сам шрифт або його сімейство. Наприклад:

font-family: Arial

Якщо назва шрифту складається з декількох слів, то потрібно укладати його в лапки.

Тіні для тексту

До тексту також можна застосувати тінь, яка задається властивістю text-shadow:

text-shadow: 2px 2px 0 red

де:

Зсув по горизонталі | зсув по вертикалі | розмиття тіні | колір тіні.

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

Як бачите, теги для роботи з текстом в html є, і їх досить чимало. Найпопулярнішими є ті, які виділяють текст жирним шрифтом. Варто відзначити, що CSS пропонує набагато більше можливостей для оформлення тексту. З його допомогою можна задати тіні (навіть множинні), і задати розмір, накреслення і т. д. В CSS можна повернути текст, визначити інтервал і реалізувати цікаві ефекти при наведенні. Застосування до слів деяких властивостей можете подивитися на цьому скріншоті:

Html теги для тексту

Хочете й далі вивчати html і css? Тоді підписуйтесь на наш блог, тому що тут ви знайдете все для сайтобудування.