Тег для создания таблицы.
|
|
Определяет тело таблицы.
|
|
|
Создает ячейку таблицы.
|
|
Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
|
|
Создает большие поля для ввода текста.
|
|
Определяет нижний колонтитул таблицы.
|
|
Создает заголовок ячейки таблицы.
|
|
Определяет заголовок таблицы.
|
|
Определяет дату/время.
|
|
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
|
|
Создает строку таблицы.
|
|
Добавляет субтитры для элементов и .
|
|
Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
|
|
Создает маркированный список.
|
|
Выделяет переменные из программ, отображая их курсивом.
|
|
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
|
|
Указывает браузеру возможное место разрыва длинной строки.
|
В жизни каждого копирайтера наступает этап знакомства с 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-код, необходимый для выделения абзацев
. Это
Открывающий тег ставится перед началом абзаца, закрывающий – в конце. Если абзац заканчивается списком, то
ставится после всех используемых для списка тегов.
Ну и немного простенькой тематической инфографики в конце:
Когда началось обсуждение темы в комментариях, в Клубе Успешных Копирайтеров на инфогрифику и статью была дана интересная обратная связь. Привожу скрин мнения авторитетного участника дискуссии.
![](https://i1.wp.com/kaverina80.ru/wp-content/uploads/2016/03/html-tegi-dlya-kopiraitera-2.jpg)
Прочитано:
3 365
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTML
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Тег
Краткое описание
|
Комментарий.
|
|
Определяет тип документа.
|
|
Ссылка, гиперссылка, якорь.
|
|
Определяет текст как аббревиатуру.
|
|
Контактная информация автора или владельца документа.
|
|
Определяет область на карте-изображении
|
|
Статья
|
|
Контент в стороне (содержимое не является основным на странице по смыслу)
|
|
Позволяет вставить воспроизводимый аудио файл.
|
|
Полужирный текст.
|
|
Задает базовый URL или аттрибут target для относительных ссылок в документе.
|
|
Область, где написание текста может имееть другое направления.
|
|
Устанавливает направление написания текста. В отличии от направление указывается физическое направление
|
|
Цитата.
|
|
Указывает область body документа.
|
|
Перенос строки.
|
|
Кликабельная кнопка
|
|
Используется для рисовании графики с помощью скриптов
|
|
Подпись таблицы.
|
|
Сноска на название материала.
|
|
Используется для вставки компьютерного кода в текстовом виде.
|
|
Задает характеристики колонок в таблице.
|
|
Определяет группу из одной или более колонок таблицы для форматирования.
|
|
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле
|
|
Определяет описание термина из тега в списке терминов
|
|
Текст, который удален в новой версии документа.
|
|
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
|
|
Указывает, что содержимое является термином.
|
|
Определяет диалоговое окно или интерактивный элемент
|
|
Блочный элемент - один из основных элементов верстки.
|
|
Определяет список определений
|
|
Название термина в списке определений
|
|
выделенный по смыслу текст (обычно, текст выделенный курсивом).
|
|
Контейнер для внешнего приложения
|
|
Группа связанных элементов в форме
|
|
Заголовок для элемента
|
|
Определяет автономную группу из нескольких элементов (например картинка с подписью)
|
|
Нижний колонтитул
|
|
Определяет форму пользовательского ввода
|
-
|
Заголовки HTML разного уровня: , , , , , .
|
|
Указывает область head документа.
|
|
Блок заголовка
|
|
Горизонтальная линия - тематический разделитель.
|
|
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом.
|
|
Выделяет текст курсивом.
|
|
Определяет встроенный фрейм
|
|
Изображение, картинка.
|
|
Поле для ввода
|
|
Текст, который был добавлен в новой версии документа.
|
|
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом.
|
|
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.
|
|
Заголовок элементов
|
|
Элемент списка
|
|
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)
|
|
Основной контент
|
|
Контейнер для . Определяет пользовательскую карту на изображении
|
|
Выделенный текст (обычно с помощью подсветки фона).
|
|
Контейнер для списка пунктов меню
|
|
Определяет элементы, которые пользователь может вызвать из контекстного меню
|
|
Используется для определения мета-данных документа.
|
|
Измеритель значений в заданном диапазоне
|
|
Контейнер для навигационных элементов
|
|
Альтернативный контент для пользователей, отключивших скрипты
|
|
Определяет встроенный объект
|
|
Определяет нумерованный список
|
|
Определяет группу связанных вариантов в выпадающем списке. Дает название группу
|
|
Параметр (вариант выбора) в выпадающем списке
|
|
Результат вычислений
|
|
Абзац.
|
|
Задает параметры для встроенных объектов
|
|
Контейнер для нескольких изображений
|
|
Предварительно отформатированный текст.
|
|
Индикатор выполнения (прогресса)
|
|
Цитата в тексте.
|
|
Альтернативный текст, если браузер не поддерживает тег .
|
|
Аннотация к содержимому тега .
|
|
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов).
|
|
Перечеркнутый текст.
|
|
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом).
|
|
Определяет скрипт или подключение скрипта из внешнего ресурса.
|
|
Раздел
|
|
Определяет выпадающий список
|
|
Текст шрифтом меньшего размера.
|
|
Определяет ресурс для тегов , и .
|
|
Строчный элемент.
|
|
Текст, выделенный по значению. Обычно отображается полужирным.
|
|
Определяет контейнер для определения стилей документа
|
|
Отображает текст в виде нижнего индекса.
|
|
Заголовок внутри тега
|
|
Отображает текст в виде верхнего индекса.
|
Определяет таблицу.
|
|
Определяет область контента в таблице.
|
|
|
Ячейка в таблице .
|
Многострочное поле для ввода
|
|
Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
|
Место, где допускается перенос строки.
|
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег
Краткое описание
|
Акроним. Используйте тег вместо него
|
|
Встроенный апплет. Используйте или вместо него.
|
|
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
|
|
Текст большего размера. Используйте вместо него
|
|
Отцентрованный текст. Используйте вместо него
|
|
Список директорий. Используйте |
|
Определяет цвет, размер и семейство шрифта. Используйте вместо него
|
|
Фрейм внутри . Используйте вместо него
|
|
Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
|
|
Альтернативный текст, если фреймы не поддерживаются
|
|
Перечеркнутый текст. Используйте или вместо него
|
|
Моноширный текст. Используйте вместо него
|
|
Подчеркнутый текст. Используйте вместо него
|
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам:
| | |