#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 (заголовок изображения, показывается при наведении на изображение курсором мыши).
<img src="http://redants.ru/images/page/2_12.jpg" alt="Редантс ребрендинг 2016" 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...