Основні html теги форматування тексту

• Ви тут :
• MonetaVInternete.ru
• / Створюємо сайт з нуля / Основи HTML і CSS /
• Основні HTML теги форматування тексту - виділення тексту жирним і курсивом; параметри розміру, кольору та шрифту; абзац і теги заголовків

Основні HTML теги форматування тексту - виділення тексту жирним і курсивом; параметри розміру, кольору та шрифту; абзац і теги заголовків

Правила і порядок написання тегів

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

Головне при написанні тегів - не забувайте їх закривати. Інакше весь текст на сторінці буде виділено жирним (в прикладі з тегом ). Але бувають такі випадки, коли потрібно виділити певний фрагмент і жирним і курсивом одночасно. Але тега, що виконує цю дію, не існує. Вихід з цієї ситуації один: використовувати два тега одночасно. У якому порядку їх використовувати значення не має. Тому, написавши текст з тегами так:

Ви все одно отримаєте Виділений фрагмент курсивом і жирним одночасно. Однак, переважно використовувати перший варіант, тому що спочатку він був єдиним і правильним. Також не варто забувати про те, що кожен браузер може обробляти теги по-різному (що таке браузер і який них найкращий), в залежності від налаштувань. А тепер перейдемо до самих тегам форматування

Виділення тексту жирним і курсивом - теги , , і

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

Розглянемо для початку виділення тексту жирним. Для цієї дії використовується два тега - і . Різниці в зовнішньому вигляді немає. Хоча, з огляду на те, що будь-який браузер може інтерпретувати кожен елемент по-своєму, ви зможете побачити будь-які відмінності. Ось як виглядає текст в тегах і в уже обробленому браузером вигляді:

Текст в тегах strong

Текст в тегах b

А ось як виглядають дві дані рядки в вихідному коді сторінки:

Ту ж ситуацію ми можемо спостерігати у випадку з тегами виділення курсивом і . Спробуйте знайти відмінності між двома прикладами:

Текст в тегах em

Текст в тегах I

А ось вихідний код:

Отже, розглянуті теги виділення жирним і курсивом фактично не відрізняються, але навіщо ж тоді нам, наприклад, тег якщо є ? Адже останній містить всього один символ (не рахуючи дужок) і, отже, легше в написанні. А вся справа в тому, що теги і впливають на внутрішню оптимізацію сайту. Якщо ви будете оточувати цими тегами ключові слова, то це сприятливо позначиться на просуванні сайта.Главное не перестаратися - максимум в тексті повинно бути 5% жирного тексту в тезі , і стільки ж і курсиву в тезі .

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

Теги виділення тексту рисою - , і

Ще два схожих за призначенням тега - і . Обидва виконують функцію закреслення тексту. Використовувати цей тег можна в будь-яких ситуаціях: якщо ви оновлюєте документ (а точніше його частина), то можна перекреслити старе і додати нове; якщо ви збираєтеся написати щось, що відходить від теми матеріалу; щось не відповідне морально-етичним нормам.

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

тег і атрибути - параметри шрифту тексту

Тепер розглянемо тег, який не використовується без атрибутів. За допомогою його ви зможете задати параметри для певного фрагмента тексту. Взагалі, зараз краще використовувати CSS (каскадні таблиці стилів), тому що за допомогою них можна сильно скоротити весь HTML код сторінки. Отже, розглянемо той самий тег . Для нього існує всього три атрибути:

• face - сам шрифт. Наприклад, Arial, Courier або Verdana. Можна перерахувати кілька, тому що не у всіх користувачів є великий набір шрифтів, а написавши кілька в атрибуті face, браузер зможе вибрати, який використовувати, а точніше - який присутній в системі;
• size - атрибут, що вказує розмір тексту. Може бути виражений як в умовних одиницях, так і в пікселях;
• color - колір тексту. Даний атрибут можна використовувати як в HTML-кодах квітів, так і в словесних. Перші мають вигляд #FFFFFF (де F - будь-яка цифра або буква від A до F), а другі записуються простими словами (наприклад, red - червоний).

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

А ось що ви побачите, після обробки написаного коду:

Блокові елементи оформлення тексту - заголовки

-

, абзац

Наостанок ми розглянемо блокові елементи, які використовуються практично в кожному документі. Це теги заголовків і абзацу. Розглянемо перше. Заголовки бувають 6-ти видів і кожен має свій тег. Кожен вид має лише свій порядковий номер і записується за допомогою тегів

,

.

. Ось як виглядають всі заголовки в обробленому вигляді:

А тепер поговоримо про тег виділення абзацу

. Функція даного тега полягає у відділенні тексту між

і

від іншого такого ж тексту порожнім рядком. Якщо подивитися вихідний код будь-якого документа, то ви можете побачити наступне:

У зелених прямокутниках один абзац, в червоних - інший. А ось як цей код виглядає після обробки браузером (стрілочка вказує на порожній рядок):

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