Информация в этой статье будет во многом дублировать текст на странице услуги html-разметка текстов, но это не плохо. Можете прочесть эту статью и взять с полки пирожок — текст на странице услуги больше читать не придется!
Мы решили написать ее, чтобы более подробно рассказать про html-разметку. Многие о ней и так знают, и не хотелось делать текстовую часть на странице услуги слишком огромной. А вот кто знает мало, как раз и сможет почерпнуть информацию здесь.
Что такое html-разметка текстов и зачем она нужна?
Все страшно просто — текст, который мы видим на страницах, на машинном языке выглядит иначе. При чем, иногда немного иначе:
А иногда ну совсем иначе-иначе:
Все дело в том, что сайты, если говорить просто, пишутся на специальном языке, придуманном еще в конце 1980х — html. «Фишка» в том, что визуально по-разному оформленный текст на самом деле выглядит совершенно одинаково, но «обвешан» различными кодовыми комбинациями — html-тегами. Любой браузер на самом деле читает текст тегов (справа на картинках выше), выдавая пользователям уже визуально красивую и понятно воспринимаемую картинку (слева на картинках выше).
Благодаря html-разметке, по сути между компьютерами по сети можно передавать маленькие и легкие объемы информации — простой текст. При этом пользователи будут видеть красивые интерактивные сайты с форматированием, изображением и пр.
Html-разметку можно сравнить со шпионской шифровкой — у сторон есть инструкция, как шифровать и расшифровывать данные, которые между сторонами переносятся в виде шифра. Конечные же пользователи информации видят ее в нормальном виде.
Как и зачем использовать html-разметку?
Если говорить не о web-разработчиках, то сегодня понимать и использовать html-разметку подавляющему большинству специальностей, связанных с работой с сайтом, скорей всего, не нужно. Современные CMS (Bitrix, WordPress, OpenCart, Joomla, Drupal и др.) имеют отличные визуальные редакторы, в которых текст можно форматировать кликами мышки.
Дальше — больше! В последние годы CMS научились переносить форматирование текста прямо из текстовых редакторов — MS Word, Google Docs и пр. Копирайтер пишет текст, выделяет заголовки, списки, отдает контент-менеджеру, который с помощью волшебного ctrl+c / ctrl+v отправляет текст на сайт, жмет сохранить и радуется простоте своей работы.
А если в статье есть картинки? Некоторые контентщики умудряются копировать и их. Но как же на счет того, чтобы прописать 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> — цитата.
