Без рубрики

Інформація в цій статті багато в чому дублюватиме текст на сторінці послуги html-розмітка текстів, але це не погано. Можете прочитати цю статтю та взяти з полиці пиріжок – текст на сторінці послуги більше читати не доведеться!

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

Що таке html-розмітка текстів і навіщо вона потрібна?

Все страшно просто – текст, який ми бачимо на сторінках, машинною мовою виглядає інакше. До того ж, іноді трохи інакше:

Корректная html-разметка текстов
Корректная html-разметка текстов

А іноді ну зовсім інакше:

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

Завдяки html-розмітці, по суті між комп’ютерами через мережу можна передавати маленькі та легкі обсяги інформації – простий текст. При цьому користувачі бачитимуть красиві інтерактивні сайти з форматуванням, зображенням та ін.

Html-розмітку можна порівняти зі шпигунським шифруванням – у сторін є інструкція, як шифрувати та розшифровувати дані, які між сторонами переносяться у вигляді шифру. Кінцеві користувачі інформації бачать її в нормальному вигляді.

Як і навіщо використовувати HTML-розмітку?

Якщо говорити не про web-розробників, то сьогодні розуміти і використовувати html-розмітку переважної більшості спеціальностей, пов’язаних із роботою з сайтом, швидше за все, не потрібно. Сучасні CMS (Bitrix, WordPress, OpenCart, Joomla, Drupal та ін.) мають чудові візуальні редактори, в яких текст можна форматувати кліками мишки.

Корректная html-разметка текстов

Дальше більше! В останні роки CMS навчилися переносити форматування тексту прямо з текстових редакторів – MS Word, Google Docs та ін. , тисне зберегти і радіє простоті своєї роботи.

А якщо у статті є картинки? Деякі контентники примудряються копіювати їх. Але як на рахунок того, щоб прописати alt, коректно назвати файл, оптимізувати його розмір, а також формат і роздільну здатність зображення. Не потрібно – CMS сама все зробить! Чи ні?

Як розмічати текст за допомогою html-розмітки?

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

Ми не будемо наводити тут скріншоти деяких наших текстів, які розміщені на сайтах замовників таким чином, що хотілося плакати. Натомість знущаємось над нашою статтею «10 принципів ефективної СМС-розсилки» (в результаті жодна стаття не постраждала, а html-розмітці ми повернули споконвічний вигляд).

Ось як виглядає код цієї статті, а точніше, невеликого фрагмента, маючи коректну html-розмітку тексту:

А ось, що з нею стало, коли ми вжилися в роль не найпередовішого контент-менеджера:

Для когось це буде виглядати, як якась дичина, але практика жахає – так роблять багато хто. Це може статися в результаті одного з кількох сценаріїв:

  • CMS не підтримує “підтягування” стилів;
  • тексти розміщуються через візуальний, а через текстовий редактор;
  • тексти спочатку були коректно відформатовані.

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

Ну і гаразд, візуально все одно непогано, хіба ні?

По-перше, все непогано виглядає тут і зараз – так, як бачите ви. Але варто відкрити цю сторінку в іншому браузері, на іншому пристрої (насамперед смартфоні, планшеті) – і там все може відображатися абсолютно як завгодно. Пам’ятаєте про аналогію з шифруванням даних?

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

Теги, що використовуються в базовій html-розмітці текстів

  • <p></p> – виділення звичайного текстового абзацу;
  • <h1></h2> – <h4></h4> – виділення заголовок, відповідно, від 1 до 3 рівня;
  • <strong></strong> – жирний текст;
  • <ul></ul> – маркований список;
  • <ol></ol> – нумерований список;
  • <li></li> – кожний пункт списку;;
  • <blockquote></blockquote> – цитата.

Залишити відповідь

Your email address will not be published. Обов'язкові поля помічені із *

Post comment