Связь и Интернет 

Основные хтмл теги. Справочник тегов HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка

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

    • Элемент списка
    • Элемент списка
    • Элемент списка
    • Элемент списка

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

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

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

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

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

    Выделение фразы жирным для ПС и пользователей Выделение фразы жирным для пользователей Выделение фразы курсивом для ПС и пользователей Выделение фразы курсивом для пользователей

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

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

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

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

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

    Прочитано: 3 365

    Тег - это специальное зарезервированное слово, заключённое в угловые скобки (например, ). Тег - основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не , а .

    Какими бывают теги?

    Большинство HTML-тегов являются парными: есть открывающий (например, ) и закрывающий тег, который от открывающего отличает слеш (/ ) после первой угловой скобки (например, ). Всё, что находится внутри пары тегов, называется их содержимым .

    Содержимое Помещённый внутри этих тегов текст становится жирным

    Бывают и непарные (одиночные) теги, которые называются метками . Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега -
    . Он устанавливает перенос текста на следующую строку.

    Если проводить параллели с русским языком, то можно сказать, что парные теги - это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) - это знаки препинания (восклицательный, вопросительный или точка).

    Любой тег состоит из:

    • Открывающей угловой скобки (< ).
    • Специального слова (имени тега). Например, hr , iframe , b .
    • Закрывающей угловой скобки (> ).
    Основные HTML-теги

    Так как теги - основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.