Теги для копирайтера (html-теги заголовков, списков, абзацев и форматирования)

В жизни каждого копирайтера наступает этап знакомства с html-тегами. Обычно это происходит спонтанно и выглядит как требование заказчика «подготовить текст к публикации». Это значит, в статье нужно выделить заголовки, абзацы, значимые места и списки, но не вордовскими возможности, а специальным кодом html языка. Помогут в этом теги для копирайтера. Необходимый для работы список обычно небольшой, но его хватает на форматирование текста со стандартными требованиями. Что же входит в необходимые для копирайтера html-теги? (Если лень читать, то крутите вниз — там простая и понятная тематическая инфографика о html-тегах!)

Вопросы копирайтер задает традиционные. И начинаются они все с формулировки «каким тегом задается…»:

  • заголовок;
  • абзац;
  • жирный текст;
  • курсив;
  • список маркированный/немаркированный/

Это все придает ТЗ пикантности и стимулирует к освоению новых знаний. Ситуация усугубляется, когда ставится задача использовать тег жирного текста для повышения привлекательности ключа в ПС. Но все это решается очень просто, с чем сейчас и разберемся.

Теги для создания заголовков

Теги для создания заголовков представлены элементами h1-h6. Букву свою они получили от английского Header (заголовок). Чтобы задать необходимый вид заголовка и подчеркнуть его значимость для ПС используют следующий код:

<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4>
<h5>Заголовок h5</h5>
<h6>Заголовок h6</h6>

На сайте это будет выглядеть следующим образом.

Заголовок h1

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5
Заголовок h6

Наибольшую значимость – и видимость – имеет заголовок h1. Его используют в качестве названия поста, и употребляется он единожды. Для подзаголовков в тексте рекомендованы h2 и h3. Они помогают подчеркнуть значимость рассматриваемого материала и разделить статью на информационные уровни.

Заголовки h4-h6 практически не используются, но бывают востребованы для выделения логических блоков и важных фрагментов.

Для больших статей лучше всего использовать заголовки h1-h3, для маленьких – h1 и h2.

Списки: маркированные и немаркированные

Структурированный хороший текст всегда имеет один или даже несколько списков. По своему внешнему виду списки бывают:

  1. маркированные – в них есть нумерация;
  2. немаркированные – элементы выделены символами.

Но все вордовское оформление не подходит для публикаций на сайте, поэтому стоит узнать, как правильно оформить списки в хтмл-теги.
Тег маркированный список выглядит так:

<ol></ol>

Тег немаркированный список так:

<ul></ul>

При этом каждый элемент списка имеет собственное хтмл-обрамление:

<li></li>

Получается, чтобы выделить в тексте маркированный список при помощи html-кода потребуется скомбинировать оба типа используемых элементов. Это будет выглядеть так:

<ol>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ol>

Для немаркированного списка аналогично:

<ul>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>

Со списками разобрались. Можно двигаться дальше.

Теги акцентирования текст: жирный шрифт и курсив

Разбираясь, какой тег позволяет грамотно отформатировать текст, почти сразу натыкаешься на два варианта кода по каждому случаю. Это вызывает недоумение у непрограммистов и вопрос: какой именно тег нужен заказчику.

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

Использование html-тегов дает возможность понравиться поисковикам и визуально выделить текст для пользователя. Что приоритетнее, решайте сами:

<strong>Выделение фразы жирным для ПС и пользователей</strong>
<b>Выделение фразы жирным для пользователей</b>
<em>Выделение фразы курсивом для ПС и пользователей</em>
<i>Выделение фразы курсивом для пользователей</i>

У меня есть большая и очень противоречивая статья на тему тегов жирного выделения, которая так и называется «Тег strong».

Если вдруг в тему заглянет кто-то из программистов, то спешу еще раз отметить, что обзор для копирайтеров: как ставить теги, какие они и что важно учитывать при выборе. И напоследок еще один востребованный html-код, необходимый для выделения абзацев. Это

<p></p>

Открывающий тег ставится перед началом абзаца, закрывающий – в конце. Если абзац заканчивается списком, то
ставится после всех используемых для списка тегов.

Ну и немного простенькой тематической инфографики в конце:

html-tegi-dlya-kopiraitera-1

Когда началось обсуждение темы в комментариях, в Клубе Успешных Копирайтеров на инфогрифику и статью была дана интересная обратная связь. Привожу скрин мнения авторитетного участника дискуссии.

html-tegi-dlya-kopiraitera-2

Теги для копирайтера (html-теги заголовков, списков, абзацев и форматирования): 8 комментариев

  1. Не использовать символы » и для кавычек, так как это служебный символ в html. Для кавычек использовать елочки .

  2. Лариса, ты чуть ли не единственный человечек «не вебмастер», который пишет, что h4/5/6 не используются. Всесторонне поддерживаю. Да и сложно представить размер статьи, чтобы данные теги действительно понадобились.
    К сожалению, многим верстальщикам на это глубоко фиолетово, и они считают своим долгом вынести название сайта в h1, а менюхи/виджеты разметить под h2/h3. Правило хорошего тона — теги h используются только в области контента (статья).

    1. Спасибо огромное! Лестно такое слышать. Правда причина «неиспользования» очень проста — я пишу только о том, что пробовала/делала/применяла сама. Конечно, нередко опираясь на информацию в Сети, но как без этого)))
      h4/5/6 я за всю свою копирайтерскую деятельность не использовала ни разу. Нигде. Поэтому про них и дана такая информация: «для оформления статей играют второстепенную, малозначимую роль».

      ps: Огромная благодарность от меня за оба комментария. Они профессиональны, полезны и сразу отвечают на множество вопросов!))))

  3. Привет Лариса, а как насчет такого мнения, что h1 — это название сайта, а не название отдельной записи на сайте?

    1. Привет, Елена!
      Про такое мнение слышу первый раз. Причем не согласна с ним ни практически, ни теоретически.
      1. Теория. Википедия и учебники html-кодов информируют:

      <h1>...</h1>
      <h2>...</h2>
      
      <h6>...</h6>

      — заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый крупный, 6 — самый мелкий).»
      2. В моих ТЗ тегом h1 заказчики просят выделять именно заглавия статей.
      3. Сама h1 использую только для заголовков.

      1. Лариса, у тебя же Вордпрес на сайте стоит? Как дополнительно выделяешь заголовок, если он идет отдельной строкой. У меня в настройках шаблона стоит H2. А при выделении слов «Добавить запись» показывается H1. Вот разные источники пишут, что h1 — один на странице, но если мы смотрим на главную страницу и превью статей, то выходит много заголовков h1? Хочу для себя разобраться и понять, что мне исправить.

        1. Лена, У меня, да, Вордпресс. Но при оформлении заголовков я использую теги — мне так привычнее. Поэтому не вникала в настройки шаблона. Что касается «h1 — один на странице», то мне кажется речь о записи на странице, а не странице как таковой.

        2. Елена, h1 слишком важен, чтобы его не использовать.
          В h1 можно впихнуть название сайта, но только на главной, и названия категорий на соответствующих страницах. В остальных случаях нет смысла пренебрегать тегом.
          По рекомендациям w3 множественные h1 допускаются, но в контексте:

          Статья 1
          Несколько слов из первой статьи…

          Статья 2
          Несколько слов из второй статьи…

          К счастью (или сожалению, для кого как), мы живём не в идеальном мире. ПС имеют своё мнение «как правильно».

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.