Основи HTML (частина 4)

146

Форматування тексту і шрифти в HTML

Всім привіт! Продовжую викладати свої пізнання в HTML. Ми вже коротко розглянули форматування в пості Основи HTML для початківців, проте я хотів повернутися до цієї теми більш докладно і охопити тему форматування тексту за допомогою HTML. Ми можемо додавати теги до нашого текстового змісту, щоб надати йому більш “дружню” структуру і стиль. Допомагаючи читачам сприймати написане, а пошуковим ботам показувати, що наш текст не є “простирадл”, що важливо для підвищення SEO блогу чи сайту .

Заголовки тексту HTML

Є 6 рівнів заголовків HTML, вони визначають рівень важливості. Наприклад на блозі, ваше назву блогу може бути h1 тегом, у той час, як назва вашого посту може бути h2 або h3 тегом.

Заголовки тексту HTML

Заголовок 1 рівня

Заголовок 2-го рівня

Заголовок 3 рівня

Заголовок 4 рівня

Заголовок 5 рівня
Заголовок 6 рівня
1
2
3
4
5
6

Заголовок 1 рівня

Заголовок 2-го рівня

Заголовок 3 рівня

Заголовок 4 рівня

Заголовок 5 рівня
Заголовок 6 рівня

Параграфи тексту HTML

Для поділу тексту на параграфи використовується тег

Поділ на параграфи тексту

Це перший параграф

А це другий параграф

1
2

Це перший параграф

А це другий параграф

Розрив рядків

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

Рекомендую до прочитання: Основи HTML (частина 2)

При використанні цього коду

нас переносить на новий рядок, а при використанні двох разів

через рядок і т. д.

Горизонтальна лінія

Щоб створити горизонтальну лінію поперек вашої сторінки ми використовуємо тег

Жирний текст

Жирний текст використовується для виділення чогось особливо важливого щоб домогтися цього, треба обернути слова тегом

Жирний текст
Це жирний текст

1 Це жирний текст

Однак у наші дні прийнято використовувати тег

Жирний текст
Це жирний текст

1 Це жирний текст

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

Текст курсив

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

Текст курсив (похилий)
Це похилий шрифт

1 Це похилий шрифт

Так само можна використовувати тег

Похилий шрифт
Це похилий шрифт

1 Це похилий шрифт

Особливої різниці мною не помічено.

Закреслений Текст

Закреслений текст
Це закреслений текст

1 Це закреслений текст

є ще тег закресленого тексту , але в HTML5 він більше не використовується.

Рекомендую до прочитання: Основи HTML (частина 3)
Закреслений вилучений або змінений текст
Це перекреслення тексту, який вилучений або змінений

1 Це перекреслення тексту, який вилучений або змінений

Дрібний текст

Для позначення дрібного тексту використовуємо наступне позначення

Дрібний текст
Дрібний текст

1 Дрібний текст

Властивості шрифту

Раніше, для визначення шрифту ми використовували теги, такі як:

Властивості шрифту
Це звичайний текст!

1 Це звичайний текст!

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