Щоб наша WEB сторінка виглядала більш презентабельно, розділимо текст на абзаци і виділимо заголовок. HTML має 6 рівнів заголовків розділів документа, пронумерованих цифрами від 1 до 6. Назва оголошуються парою тегів з номерами, належними рівню, наприклад,
- заголовок розділу першого рівня, а - Заголовок розділу шостого рівня. Від простого тексту назви відрізняються розміром і шириною букв. Заголовок першого рівня h1 відображається зазвичай дуже великим шрифтом, тоді як заголовок шостого рівня h6 - дуже маленьким.Назва
Не слід плутати заголовки розділів документа з розглянутим раніше заголовком документа, що визначається елементом
.Як заголовок тексту використовуємо першу пропозицію - Для цього досить обмежити його тегами
і
.Вставте текст файлу other.html теги
і
так, щоб вони обмежували першу пропозицію тексту, і цей шматок коду прийняв такий вигляд:Ласкаво просимо до сторінки компанії SD!
Переглянемо отриманий результат.
Збережіть файл, вибравши команду меню програми Блокнот (Notepad) Файл - Зберегти (File - Save).
Операцію збереження потрібно завжди робити перед переглядом документа, тому що відкриває файл для перегляду, завантажуючи його в оперативну пам'ять комп'ютера з диска. Якщо після редагування коду HTML ви не збережете файл, жодних конфігурацій у браузері не побачите.
Відновіть вікно браузера, натиснувши кнопку на панелі завдань (Taskbar).
Натисніть кнопку F5 або кнопку Оновити (Refresh) на панелі інструментів робочого вікна програми. Файл other.html буде перезавантажено, і ви побачите у вікні браузера, як виглядає заголовок першого рівня.
Перегляньте, як будуть виглядати назви інших 5 рівнів, змінюючи в тегах номери: h2, h3 і так далі Після кожного конфігурації не забувайте зберігати файл і оновлювати зображення у вікні браузера.
Коли ви закінчите досліди, знову відновіть у файлі other.html теги
.Використовуючи 6 рівнів заголовків, які надає у ваше розпорядження мова HTML, можна зробити просто читальний документз інтуїтивно ясною структурою. Пам'ятайте, що ваш документ завжди буде читатися значно краще, якщо в ньому буде точний поділ на розділи та підрозділи.
Вирівнювання заголовків
За замовчуванням заголовок вирівнюється по лівому краю сторінки. Але його можна також вирівняти праворуч або центрувати. Для правобічного вирівнювання у тезі
Використовується атрибут align="right", а центрування - align="center". Допускається також очевидна вказівка лівостороннього вирівнювання - align = left.
Додати в тег
атрибут align="center", щоб центрувати заголовок. Цей елемент повинен набути наступного вигляду:
Ласкаво просимо до сторінки компанії SD!
Надалі ми не будемо нагадувати вам про необхідність перед переглядом зберігати файл з початковим кодом і оновлювати зображення в браузері.
Як у HTML зробити текст виділеним (жирним)
Тепер займемося іншим текстом. Збільшимо його розмір та оформимо текст напівжирним курсивним зображенням. Для установки напівжирного зображення використовуються парні теги .
Вставте у файлі other.html відкриваючий і закриваєтеги так, щоб вони обмежили текст Тут ви дізнаєтеся ... Цей елемент повинен прийняти такий вигляд:
Як у HTML зробити текст курсивом
Курсивне накреслення встановлюється за допомогою тегів .
Вставте в початковий код HTML тег ітак, щоб відредагований елемент набув наступного вигляду:
Тут Ви дізнаєтесь про нашу діяльність, про програмних продуктахнашої компанії та про обладнання, яке ми виробляємо
Елементи розмітки можуть бути вкладеними, як у цій структурі, де елемент …вкладено в елемент …. Сучасні браузери здатні чітко обробляти вкладені теги. Тому вам необхідно стежити за тим, щоб не порушувався порядок вкладення. Робота браузера виявиться складною, якщо вкладеність буде порушена. Наприклад, такий запис буде неправильним: …. Дотримання вкладеності - дуже важлива частина загальної культури написання HTML коду.
Як у HTML зробити текст підкресленим
За допомогою пари тегів можна встановити накреслення текстового шматка, обмеженого даними тегами, а за допомогою пари тегів - Показати текст телетайпним шрифтом.
З недавніх пір тег спрощено і підкреслення робиться за допомогою стилів. еквівалент . Так новий аналог виглядає більш громіздким, але на жаль це вірніше. Головне на цю користь говорить, що громіздкий варіант є кроссбраузерним, тобто підходить для всіх браузерів, коли як підтримують далеко не всі браузери.
Як у HTML збільшити текст
Наразі збільшимо розмір шрифту тексту. Це можна зробити різними способами.
Теги збільшують обсяг шрифту тексту, укладеного з-поміж них.
Додайте в початок і кінець вищезгаданого шматка коду відповідно до теги ітак, щоб елемент прийняв такий вигляд:
Тут Ви дізнаєтесь про нашу діяльність, про програмні продукти нашої компанії та обладнання, яке ми виробляємо
За допомогою тегів Ви можете зменшити розмір шрифту тексту в порівнянні з початковим.
Інший метод вказівки розміру шрифту – за допомогою тегів з атрибутом size. Як значення цього атрибута використовуються цілі числа від 1 до 7. У цьому значення 1 відповідає найменшому розміру шрифту, а значення 7 - максимальному.
Використовуючи замість тегів теги виду , перегляньте як змінюється розмір тексту шрифту при різних значеннях атрибута size - від 1 до 7.
Як значення атрибута size можна використовувати числа від 1 до 7 зі знаком + (плюс) чи - (мінус). У разі розмір шрифту відповідно збільшується чи зменшується, проти початковим, наприклад, теги збільшать обсяг шрифту, в порівнянні з поточним, на один рівень. Перевірте.
Встановіть 5 як значення атрибута size для шматка тексту, що розглядається: . HTML код цього шматка має бути таким:
Тут Ви дізнаєтесь про нашу діяльність, про програмні продукти нашої компанії та обладнання, яке ми виробляємо.
У тегах може також використовуватися атрибут color для вказівки кольору шрифту, обмеженого тегами тексту. Значення цього атрибуту такі ж, як і для розглянутих раніше атрибутів, що описують колір тла та тексту документа.
За замовчуванням абзац з текстом Тут Ви дізнаєтесь… вирівняно ліворуч. Центруємо його по горизонталі за допомогою тегів
Вставте теги
Зверніть увагу, що для центрування абзацу ми використовували теги
Увага! На 2010 рік ,
=
=
Також існує величезна кількість інших застарілих тегів, які не описати в цій статті, тому краще відразу ознайомитися на спеціалізованих WEB сайтах з цього питання. Але головні я виклав тут трохи вище
Коди виділення
Мова HTML допускає два підходи до виділення фрагментів тексту. З одного боку, можна прямо вказати, що шрифт на деякій ділянці тексту може бути напівжирним або курсивним, тобто очевидно вказати накреслення шрифту тексту, як ми це робили в цьому досвіді. З іншого боку, можна помітити будь-який шматок тексту, як має певний, відмінний від простого, логічний стиль, надавши інтерпретацію цього стилю браузеру. Таким чином, логічний стиль показує роль текстового шматка, наприклад, велику роль у порівнянні з звичайним текстом або те, що цей шматок є цитатою. У своїй роботі ви можете використовувати такі теги, що визначають логічні стилі. Перевірте, як вони працюють у різних браузерах.
- застосовується визначення слова. Текст виводиться курсивом за замовчуванням.
- для виділення слів та посилення. Текст відображається курсивом за замовчуванням.
- виділення назв книжок, фільмів, спектаклів тощо виводиться курсивом за замовчуванням.
- Для фрагментів коду програм. На дисплеї відображається шрифт фіксованої ширини.
- використовується для тексту, який користувач вводить із клавіатури. У різних браузерах може відображатись різні шрифти. Тег застарілий.
- використовується для відображення повідомлень програм. Виводиться шрифтом фіксованої ширини. Тег застарілий.
- Для особливо важливих фрагментів. Зазвичай виділяється напівжирним зображенням.
- Використовується для вказівки, що частина тексту або слово є символьною змінною, тобто текстом, який може бути замінений різними висловлюваннями. Відображається курсивом за замовчуванням. Тег застарілий.
Специфікація HTML 4.0 пропонує більш прогресивний спосіб вказівки стилів тексту та інших елементів - за допомогою спеціальної мови каскадних таблиць стилів CSS (Cascading Style Sheets). Таблиці стилів - це величезне досягнення в області WEB дизайну, що розширює можливості поліпшення зовнішнього вигляду сторінок. Таблиці стилів спрощують визначення інтервалів між рядками, відступів, кольорів, використовуваних для тексту і фону, розміру і стилю шрифтів тощо Стиль більшості елементів HTML може описуватися з допомогою атрибута style, що розташовується всередині відкриває тега елемента. Як значення атрибута style використовуються пари типу «властивість: значення». Наприклад, у шматку коду, що визначає заголовок розділу,
атрибут style="color: blue" визначає, що якість color (колір) має значення blue (блакитний), тобто текст заголовка першого рівня повинен відображатися блакитним кольором.
Вирівнювання стилями
Подивимося, як за допомогою мови каскадних таблиць стилів вказати стиль текстового шматка, який починається словами.
Для вказівки товщини шрифту використовується якість font-weight зі значеннями lighter (вузький), bold (напівжирний), bolder (жирний), наприклад, style = "font-weight: bold".
Для визначення курсивного зображення застосовується властивість font-style зі значенням italic. Тому, щоб надати тексту жирне курсивне зображення, слід атрибут style визначити так: style="font-weight: bold; font-style: italic". Зверніть увагу: параметри можуть розташовуватися у порядку і обов'язково повинні ділитися крапкою з комою.
Якщо потрібно вказати розмір шрифту, слід користуватися властивістю font-size, значення якого можна вказати у відносних або абсолютних величинах. Відносні величини - це відсотки, а як абсолютні величини використовуються пункти (pt), пікселі (рх), сантиметри (cm), міліметри (mm). Наприклад:
style="font-size: 200%"
style="font-size: 16pt"
style="font-size: 100px"
Вказуючи абсолютні, а не відносні розміри, ви позбавляєте користувачів, що розглядають ваші сторінки, можливості збільшувати або зменшувати обсяг шрифтів за допомогою команди меню браузера відповідно до їх зору і дозволу монітора. Шрифти будуть відображатися лише такого розміру, який ви вказали. Тому краще вказувати розмір шрифту у відсотках. У цьому випадку розмір шрифту буде менше або більше на зазначену кількість відсотків, ніж при оформленні за допомогою HTML тега за замовчуванням.
Для визначення способу вирівнювання тексту по горизонталі використовується якість text-align зі значеннями left (ліворуч), right (праворуч), center (центром), justify (по ширині). Таким чином, щоб вказати, що текст Тут Ви дізнаєтеся ... повинен бути оформлений жирним курсивним зображенням з розміром 150% від початкового і вирівняний по центру, слід його стиль визначити наступним чином:
style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center"
Цей атрибут ми застосовуємо у тегах<р>, які дозволяють подати текст у вигляді окремого абзацу.
Відредагуйте елемент HTML, що включає текст Тут Ви дізнаєтесь… видаливши теги
<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Тут Ви дізнаєтесь про нашу діяльність, про програмні продукти нашої компанії та обладнання, яке ми виробляємо
Чи бачите, мова HTML дозволяє використовувати різні методи стильового дизайну. Разом про те, застосування мови каскадних таблиць стилів CSS є більш бажаним.
Інші варіанти вирівнювання та використання стилів
Ми розглянули лише один варіант використання мови таблиць стилів, коли визначення стилю розташовується саме всередині тега елемента, який ви описуєте.
Це робиться за допомогою атрибуту style, що застосовується з більшістю стандартних HTML-тегів. Але є інші варіанти використання CSS.
У стандартному HTML, без застосування таблиць стилів, для присвоєння якому-небудь елементу певних властивостей, таких як колір, розмір, положення на сторінці і тому подібне, доводиться щоразу описувати ці параметри для кожного елемента, навіть якщо на одній сторінці повинні розміщуватися 10- ки таких частин, що не відрізняються одна від одної. Доводиться десятки разів вставляти один і той же шматок HTML коду в сторінку, збільшуючи розмір файлу і час його завантаження з мережі.
Таблиці стилів діють іншим, більш зручним і бюджетним способом. Для присвоєння якомусь елементу певних характеристик ви повинні один раз описати цей елемент і визначити цей опис як стиль, а надалі просто вказувати, що елемент, який ви хочете оформити відповідним чином, повинен прийняти властивості стилю, описаного вами. Комфортно, чи не так?
Більше того, ви зможете зберегти опис стилю не в тексті вашої WEB сторінки, а в окремому файлі- це дозволить використовувати опис стилю на будь-якій кількості WEB сторінок. І ще одне, пов'язане з цим перевага - можливість змінити оформлення будь-якої кількості сторінок, виправивши тільки опис іміджу в одному окремому файлі.
Крім того, мова таблиць стилів дозволяє працювати зі шрифтовим оформленням сторінок на ще більше найвищому рівнініж стандартний HTML.
В даний час мова CSS налічує досить безліч параметрів елементів HTML, якими він може керувати. Застосовуючи «безпечні», тобто сумісні з найбільшою кількістюбраузерів елементи CSS- характеристики шрифту, кольору елементів і фону, характеристики тексту та меж - ви зможете істотно полегшити свою роботу і зробити ваші WEB сторінки більш симпатичними щодо дизайну тексту.
У HTML жирний текст можна зробити кількома способами. До них відносяться:
- Тег b;
- Тег strong;
- CSS-властивість font-weight.
Поговоримо про кожен із варіантів виділення тексту по порядку.
Жирний текст: тег
Тег b HTML застосовується так:
Конструктор сайтів "Нубекс"
Для тега обов'язково наявність закриває, і йому доступні універсальні атрибути (такі як class, id, titleі т.д.)
Хоча валідність тега bі не засуджується специфікацією HTML, актуальнішим у використанні є тег strongдавайте розберемося чому.
Жирний текст: тег
Відповідно до специфікації HTML, тег bслужить виділення тексту жирним шрифтом. На відміну від нього, тег strong HTML служить виділення важливихфрах, слів, які є ключовими для цієї сторінки.
Цей тег має вагоме значення при ранжируванні сторінок у пошуковій видачі, тому він широко використовується у просуванні сайтів та при SEO-оптимізації. Пошукові системи враховують текст, укладений у теги , і позначають його як важливий.
Використовується тег strongаналогічним чином:
Конструктор сайтів "Нубекс"
Ви можете помітити, що зовнішнє застосування тегів і зовсім не відрізняється (оскільки всі сучасні браузериінтерпретують їх практично однаково), але семантичні відмінності в коді пошукових систем, Все-таки, мають місце бути. Тому більшість SEO-оптимізаторів рекомендують використовувати тег strong.
Жирний текст за допомогою CSS
Ми вже відзначали важливість тега strongпри пошуковому просуванні, але що робити у випадку, якщо потрібно виділити велику кількість тексту жирним (але текст не потрібно позначати для пошукових систем як важливий), або необхідно керувати ступенем "жирності" шрифту? У таких випадках використовується CSS-властивість font-weight. Застосовується воно так:
Наші сайти – це, дійсно, величезний кроку веб-розробці.
Ми робимо по-справжньому якіснісайти.
Довіртеся нам, і ми вас не підіб'ємо.
значеннями bolderі lighterможна задати рівень жирності більше (або менше), ніж у батька. Числовим значенням (100-900) можна задати рівень жирності.
Існує три способи виділити текст жирним шрифтом на HTML сторінці, але не поспішайте відразу використовувати будь-який, що сподобався, так як таке виділення може мати різний сенс і впливати на оптимізацію сайту для пошукової системи.
Жирний шрифт тегом strong
Цей спосіб підійде, якщо ви хочете виділити жирним шрифтом важливу частину тексту. HTML тег є тегом логічного форматування та його суть: "підкреслити" важливість виділеного фрагмента.
У HTML є інші теги логічного форматування. Наприклад, тег виділяє текст курсивом та вказує на акцентування уваги на виділеній фразі.
Інші види виділення тексту описані у статті: .
Звичайний текст виділений важливий фрагмент тексту. Звичайний текст.
Жирний текст за допомогою тега b
Звичайний текст текст жирним шрифтом. Звичайний текст.
Виділення жирним стилями CSS
Жирний текст можна зробити не лише за допомогою спеціальних HTML тегів. Досягти виведення жирним шрифтом можна на будь-якому тезі, задавши йому властивість font-weight: bold; (Працює не для всіх шрифтів).
Таке виділення нестиме стилістичний характер, не додаючи виділеного тексту логічної ваги.
До того ж, можна виділяти як конкретний тег, і відразу групу елементів, задавши стилі через CSS клас.
Властивість CSS усередині атрибуту style:
Текст жирним шрифтом.
Текст жирним шрифтом.
Текст звичайний шрифт.
Текст жирним шрифтом.
Що робити, якщо виділити текст жирним не виходить
Якщо виділити текст жирним не виходить, швидше за все, на вашому сайті перевизначені CSS стилі елементів. У такому разі вам доведеться відкоригувати ці стилі. Найчастіше це можна зробити через основний файл таблиць стилів CSS. Якщо ви не знаєте, зверніться до веб-майстра. З великою часткою ймовірності на вирішення цієї проблеми потрібно не більше 5-ти хвилин роботи (хоча, звичайно ж, можуть бути винятки).
Продовжуємо працювати зі шрифтами і в цьому уроці ми розглянемо те, як задаються властивості, що надають шрифту жирного або курсивного вигляду. До цього ми вже розглядали, як створити жирний або курсивний шрифтза допомогою HTMLтегів. Але як ми вже знаємо, HTMLне повинен використовуватися для оформлення документа, він призначений тільки для створення розмітки, структури сторінки, тому треба оформляти все через таблицю стилів CSS. І тепер розглянемо, як задаються такі властивості.
Курсивний шрифт CSS
Оформляти текст курсивом допомагає властивість font-style: ; , якому прописується значення italic , що означає «Стиль шрифту – курсивний».
Тепер уявімо, що на сторінці багато абзаців і одні з них потрібно виділити курсивним шрифтом. Що ми робимо, для потрібного абзацу створюємо клас, а потім зазначимо, що елемент із таким класом має бути курсивним.
HTML
Четвертий абзац Четвертий абзац Четвертий абзац
Задаємо властивість для курсивного шрифту.
Якщо Ви створили такі абзаци і поставили для них властивість, то другий абзац текст став курсивним. Це ми задали властивість для всього абзацу, а тепер давайте ускладнимо і задамо курсив тільки для двох слів у четвертому абзаці. Як це зробити? В HTMLуроці ми розбирали тег логічного рівня . Цей тег використовується для таких ситуацій, коли для якоїсь частини елемента потрібно задати якийсь клас. І так до четвертого абзацу вбудовуємо тег і йому прописуємо клас class="italic">
. В результаті отримуємо такий запис:HTML
Перший абзац Перший абзац Перший абзац Перший абзац
Другий абзац Другий абзац Другий абзац Другий абзац
Третій абзац Третій абзац Третій абзац Третій абзац
Четвертий абзац Четвертий абзац Четвертий абзац
П'ятий абзац П'ятий абзац П'ятий абзац П'ятий абзац
Italic( font-style: italic; )
Тепер другий абзац та частина четвертого абзацу відображаються курсивом. В демоце наочно показано.
Жирний шрифт CSS
Щоб встановити жирний шрифт використовується інша властивість, з ім'ям font-weight: ; тобто його ще називають насиченістю шрифту. Спочатку насиченість встановлена на значення normal тобто насиченість шрифту нормальна, а задавши значення bold він набуде напівжирного вигляду.
Bold( font-weight:bold ; )
Також можна задавати значення насиченості цифрами від 100 до 900 з кроком 100 . Значення normal дорівнює цифрі 400 , а значення bold цифрі 700 . Значення 900 підтримується не всіма шрифтами, тому, задавши це значення, Ви можете не помітити відмінності від значення 700 . Виглядає така умова в такий спосіб.
Bold( font-weight:700 ; )
В htmlкоді надходять так само: якщо потрібно виділити весь абзац то задаємо йому новий класякщо частина тексту, то використовуємо тег class="italic"> . Розглянемо невеликий приклад:
HTML
Перший абзац Перший абзац Перший абзац Перший абзац
Другий абзац Другий абзац Другий абзац Другий абзац
Третій абзац Третій абзац Третій абзац Третій абзац
Четвертий абзац Четвертий абзац Четвертийабзац
П'ятий абзац П'ятий абзац П'ятий абзац П'ятий абзац
Bold( font-weight: bold; )
В результаті ми виділили в жирний текст частину четвертого абзацу, де він водночас і курсивний, і п'ятий абзац. Ось такі ще дві властивості ми вивчили. Вони досить часто використовуються, тому варто запам'ятати, що:
- Курсивний шрифт визначається: font-style: italic; .
- Жирний шрифт визначається: font-weight: bold; .
- Для повернення шрифту нормальної насиченості встановлюється значення: font-weight: normal; або значення font-weight: 400 ; , що у разі означає одне й теж.
Ось ми з вами розглянули ще дві властивості шрифтів. Дивіться Демоте, що повинно було вийти в кінцевому підсумку, а ми переходимо до вивчення наступних властивостей.
Здрастуйте, шановні читачі блогу! У цій статті мова піде про тегах форматування тексту. Яскравими прикладами є виділення тексту жирним чи курсивом. Також ми розглянемо вплив деяких тегів на внутрішню оптимізацію сайту та правила їх написання. Про те, що ви можете прочитати в наведеній статті. До речі, ви можете зустріти подібні елементи оформлення тексту, ви можете у багатьох текстових редакторах, наприклад у Ворді.
Теги поділяються на 2 види: блокові та малі. При використанні перших, ви зможете змінити зміст частини тексту (рядки, окремі фрагменти або слова), а другі є . Теги форматування, які ми розглянемо у цій статті, переважно малі.
Правила та порядок написання тегів
Ви вже знаєте, що таке теги, що відкриває і закриває. Якщо ні, прочитайте статтю, наведену на самому початку цього матеріалу. Якщо коротко, то теги бувають двох видів: одиночні (наприклад, перенесення на новий рядок) та контейнерні (парними). Так ось, всі теги форматування тексту є парними. Це означає, що будь-який елемент має теги, що відкриває і закриває, а виділений фрагмент повинен бути поміщений між ними. Наприклад, правильне виділення фрази виглядатиме так: Виділений фрагмент
Коли браузер обробить цей фрагмент, то ви побачите такий текст: Виділений фрагмент.До речі, в RSS-стрічці всі теги не відображаються ().
Головне при написанні тегів – не забувайте їх закривати. Інакше весь текст на сторінці буде виділено жирним (у прикладі з тегом ). Але бувають такі випадки, коли потрібно виділити певний фрагмент жирним і курсивом одночасно. Але тегу, який виконує цю дію, немає. Вихід із цієї ситуації один: використовувати два теги одночасно. У якому порядку використовувати значення не має. Тому, написавши текст із тегами так:
Виділений фрагмент
або ось так:
Виділений фрагмент
Ви все одно отримаєте Виділений фрагмент курсивом та жирним одночасно. Однак, краще використовувати перший варіант, тому що спочатку він був єдиним і правильним. Також не варто забувати, що кожен браузер може обробляти теги по-різному (), залежно від налаштувань. А тепер перейдемо до самих тегів форматування
Виділення тексту жирним та курсивом - теги , , і
Найкращі популярні тегиформатування тексту - виділення його жирнимі курсивом. Зазвичай їх використовують для надання важливості якомусь фрагменту. Перший випадок служить для виділення фрагмента, що містить корисну інформаціюабо ключові слова. Курсив застосовується з тією ж метою, що і жирний текст, але інформація менш важлива, тому що курсив на тлі основного тексту менш помітний, ніж жирний текст.Розглянемо для початку виділення тексту жирним. Для цієї дії використовується два теги. і . Різниці у зовнішньому виглядіні. Хоча, враховуючи те, що будь-який браузер може інтерпретувати кожен елемент по-своєму, ви зможете побачити будь-які відмінності. Ось як виглядає текст у тегах і у вже обробленому браузером вигляді:
Текст у тегах strong
Текст у тегах b
А ось як виглядають два дані рядки у вихідному коді сторінки:
Текст у тегах strong Текст у тегах b
Ту ж ситуацію ми можемо спостерігати у випадку з тегами виділення курсивом і . Спробуйте знайти різницю між двома прикладами:
Текст у тегах em
Текст у тегах I
А ось вихідний код:
Текст у тегах em Текст у тегах I
Отже, розглянуті теги виділення жирним і курсивом фактично не відрізняються, але навіщо тоді нам, наприклад, тег якщо є ? Адже останній містить лише один символ (крім дужок) і, отже, легше у написанні. А вся річ у тому, що теги і впливають на . Якщо ви будете оточувати цими тегами ключові слова, то це сприятливо позначиться на просуванні сайту. Головне не перестаратися - максимум у тексті має бути 5% жирного тексту , і стільки ж і курсив у тезі .
Якщо ж ви хочете просто виділити в тексті якийсь момент, то використовуйте тег або . Взагалі, я думаю, що пошукові системи теж розглядають текст у цих тегах як більш важливий, але на внутрішню оптимізаціювони все-таки мають менший вплив, ніж і .
Теги виділення тексту рисою , і
Тепер розглянемо кілька тегів, які використовують межу в оформленні тексту. Найвідоміший вам з текстових редакторів — тег
або підкреслення. Вплив на ранжування цей тег не надає (наскільки я знаю), а ось виділити якийсь текст і загострити на ньому увагу допоможе. Приклад використання цього тегу я навів трохи вище. Ще два схожі за призначенням теги - і . Обидва виконують функцію закреслення тексту. Використовувати цей тег можна у будь-яких ситуаціях: якщо ви оновлюєте документ (а точніше його частина), то можна перекреслити старе та додати нове; якщо ви збираєтеся написати щось, що відходить від теми матеріалу; щось не відповідає морально-етичним нормам.
Відмінності ж цих двох тегів полягають лише в їх написання, внаслідок чого краще використовувати перший, т.к. по-перше, зручніше писати, а по-друге, на вашій сторінці буде менша кількість HTML-коду, а пошуковики це люблять.
Тег та атрибути — параметри шрифту тексту
Тепер розглянемо тег, який використовується без атрибутів. За допомогою його ви зможете задати параметри для певного фрагментатексту. Взагалі, зараз краще використовувати (каскадні таблиці стилів), т.к. за допомогою них можна сильно скоротити весь HTML-код сторінки. Отже, розглянемо цей тег . Для нього існує все три атрибути:
- face- Сам шрифт. Наприклад, Arial, Courier або Verdana. Можна перерахувати кілька, т.к. не всі користувачі мають великий набір шрифтів, а написавши кілька в атрибуті face, браузер зможе вибрати, який використовувати, а точніше - який присутній в системі;
- size- Атрибут, який вказує розмір тексту. Може бути виражений як умовних одиницях, і у пікселях;
- color- Колір тексту. Цей атрибут можна використовувати як у HTML-кодах кольорів, так і в словесних. Перші мають вигляд #FFFFFF (де F - будь-яка цифра або буква від A до F), а другі записуються простими словами(Наприклад, red - червоний).
Так виглядає текст у тезі з використанням кожного атрибуту:
Цей текст має розмір 6px
Цей текст червоного кольору Цей текст має шрифт Arial Цей текст червоного кольору та розміру 5pxА ось що ви побачите, після обробки написаного коду: 
Блокові елементи оформлення тексту. -, абзац
, абзац
Насамкінець ми розглянемо блокові елементи, які використовуються практично в кожному документі. Це теги заголовків та абзацу. Розглянемо першу. Заголовки бувають 6 видів і кожен має свій тег. Кожен вид має лише свій порядковий номер і записується за допомогою тегів
, ,..., . Ось як виглядають усі заголовки в обробленому вигляді:
. Ось як виглядають усі заголовки в обробленому вигляді:
Цифра після слова заголовок відповідає цифрі у тезі
А тепер поговоримо про тег виділення абзацу
Функція даного тега полягає у відділенні тексту між іншим таким же текстом порожнім рядком. Якщо подивитися вихідний код якогось документа, то ви можете побачити наступне:
У зелених прямокутниках один абзац, у червоних – інший. А ось як цей код виглядає після обробки браузером (стрілочка вказує на порожній рядок):
У результаті ми отримуємо досить помітне відділення одного абзацу від іншого, що йде на користь читання стає більш зручним.
Ось і добігла кінця стаття про теги форматування документа. Їх набагато більше, ніж я описав у цьому матеріалі. Просто про деяких потрібно розповісти досить багато, внаслідок чого їм будуть присвячені окремі статті з повним оглядом!