#HTML для копирайтера язык разметки текста

Копирайтер высокого уровня пишет не только тексты. Статья, которая входит в ТОП 3 поисковых машин может стоить 5 000 руб. и более.

HTML и семантическая структура текста

За семантическую структуру отвечает язык текстовой разметки HTML (расшифровывается как Hyper Text Markup Language – язык разметки гипертекста, или текста, размещенного в интернете). С помощью HTML поисковые машины понимают, какие слова и фразы в статье важны, и по каким запросам показывать ваш материал.

Что такое тег?

Язык разметки HTML построен вокруг одного понятия – тег. Тег указывает поисковой системе, какие элементы Вашего текста важны, а какие — второстепенны.

Заголовок и подзаголовки ТЕГИ <h1-h6>

<h1> </h1> — заголовок. (в тексте только один)
<h2> </h2> — подзаголовок в статье. (в тексте сколько угодно)
<h3> </h3> — подзаголовки подразделов. (в тексте сколько угодно)
<h4> </h4> — ниже h4 на практике не используются подзаголовки.

Горизонтальная линия ТЕГ <hr />

<hr /> — тег не имеет закрывающей части, (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину.

Абзац ТЕГИ <p> <br /> <div> <samp>

<p> </p> — тег оформляет абзац.
C помощью этого тега Вы задаете отступы сверху и снизу на странице.
<br /> — тег не имеет закрывающей части и используется, чтобы перейти на новую строку.
Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пишется так:
<div align="center">REDANTS HTML!</div>
<div align="left">REDANTS HTML!</div>
<div align="right">REDANTS HTML!</div>
<div align="justify">REDANTS HTML!</div>
Чтобы не переносить текст на следующую строку и в него нужно вставлять тег <p> по примеру:
<div>
<samp><p align="left">REDANTS пишем слева</p></samp>
<samp><p align="right">REDANTS пишем справа</p></samp>
<div>
<div> </div> — тег многофункциональный. Он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги. Работа с текстом это не основная задача тега <div>.
<samp> </samp> — тег используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере <samp> с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление. Пример использования <samp> выше/ниже.

Важный полужирный текст и полужирный текст ТЕГИ <strong> <b>

<strong> </strong> — тег устанавливает важный полужирный текст.
Тег <strong> не используется в заголовках h1-h6.
<b> </b> — тег устанавливает полужирный текст.
Тег <b> можно использовать в заголовках h1-h6.

Стиль текста ТЕГИ <...>

<i> </i> — тегом физической разметки и устанавливает курсивный текст.
<em> </em> — тегом логической разметки и определяет важность помеченного текста.
Важно отметить, что теги <i> и <em>, также как <b> и <strong>, несмотря на сходство результата, являются не совсем эквивалентными и заменяемыми. Первый тег <i> — является тегом физической разметки и устанавливает курсивный текст, а тег <em> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <i> и <em>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

<u> </u> — Подчеркнутый текст
<strike> </strike> — ~~Перечеркнутый~~
<s> </s> — ~~Перечеркнутый~~ (второй вариант, от первого ничем не отличается)
<tt> </tt> — моноширинный шрифт
<small> </small> — Малый
<big> </big> — Большой
<sup> </sup> — Верхний ^индекс
<sub> </sub> — Нижний _индекс

Цвет текста и блока с текстом ТЕГИ <...>

Тег span — этот тег ничего не значит для SEO. Для SEO, если Вы в него заключите текст, ничего не произойдет. Смысл использования тега для придания фрагменту текста каких-то дополнительных свойств. Например цвета.

Пример палитры красок:

#000000
black

#ffffff
white

#ff0000
red

#ffa500
orange

#ffff00
yellow

#008000
green

#00ffff
cyan

#0000ff
blue

#800080
purple

Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета RGB — #ff0000 зелёный цвет, либо используя константы цвета — red.
Мы уже знакомы с тегом <span> у него есть еще один атрибут - color.
Так вот, если к примеру написать так:
<span style="color:#ff0000">Красный REDANTS</span> - То цвет шрифта станет красным.
А можно так:
<span style="color:red">Красный REDANTS</span> - Будет тоже самое.
Лучше писать всё шестнадцатеричным числом, во-первых, по понятным причинам не для всех оттенков цветов есть своё название, а во-вторых не все браузеры знают названия всех красок.

Тег типа шрифта <font>

Для SEO тип шрифтов лучше подгружать стилями на страницу и тегом <font> лучше не пользоваться.
<span style="font-family:Arial,Helvetica,sans-serif">Эта строчка будет написана с помощью шрифта Arial</span>
А можно так:
<font face="arial">Эта строчка будет написана с помощью шрифта Arial</font>

Цитата ТЕГИ <blockquote> <q> <cite>

<blockquote> </blockquote> — этот тег цитаты. Для выделения длинных цитат, которые состоят из нескольких абзацев.

| ЦИТАТА

Еще

<q> </q> — этот тег предназначен для выделения коротких цитат в предложениях. Текст автоматически обрамляется кавычками.

<cite> </cite> — этот тег используется для того, чтобы выделить источник цитаты.

Изображение ТЕГ <img>

Тег <img> является одиночным и не имеет закрывающего аналога. У изображения есть два скрытых атрибута, которые влияют на SEO. Это alt (альтернативный текст, который показывается в ситуациях, когда изображения отключены) и title (заголовок изображения, показывается при наведении на изображение курсором мыши).

Вот как выглядит изображение в интерпретации браузера.

Редантс ребрендинг 2016

Нумерованные и ненумерованные списки ТЕГИ <ol> <ul>

<ol> </ol> — нумерованный список

Выглядит вот так нумерованный список:

1. Иванов
2. Петров
3. Сидоров

<ol>

<li>Иванов</li>

<li>Петров</li>

<li>Сидоров</li>

</ol>

<ul> </ul> — ненумерованный список

Выглядит вот так ненумерованный список:

- Иванов
- Петров
- Сидоров

<ul>

<li>Иванов</li>

<li>Петров</li>

<li>Сидоров</li>

</ul>

Красные муравьи ⊙..⊙

To be continued...