Памятка, как добавить и изменить HTML-код страницы

Кратенькая памятка о том как правильно сформировать и отформатировать текст для HTML-страницы вашего сайта.

HTML-разметка текста

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

Большинство тегов имеют парную конструкцию: открывающий тег начинает применение конструкции или стиля, а закрывающий тег ее заканчивает или отменяет.

Форматирование текста

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

Логическое форматирование

Логическое форматирование текста предназначено для расстановки логических акцентов в тексте.

• <strong>…</strong> – усиленный текст, обычно отображается жирным;
• <em>…</em> – эмоциональный текст, обычно отображается курсивом;
• <q>…</q> – текст-цитата, обычно автоматически заключается в кавычки

Стилистическое форматирование

Стилистическое форматирование просто придает тексту определенный вид.

• <b>…</b> – жирный текст;
• <i>…</i> – текст курсивом;
• <u>…</u> – подчеркнутый текст

Благодаря изменяемым стилям внешний вид текста обрамленный текстовыми тегами может быть измен как угодно, например, текст, оформленный тегом <strong> может быть дополнительно выделен определенным цветом.

Формирование абзацев

• <p>…</p> – обычный абзац (закрывающий тег необязательно – достаточно первого)
• <li>…</li> – элемент списка (закрывающий тег необязательно – достаточно первого)
• <h2>…</h2> – Заголовок 2-го уровня
• <h3>…</h3> – Заголовок 3-го уровня

Построение списка

Списки формируются при помощи тегов <ul>, <ol> и самих элементов этих списков <li>

Маркированный список

<ul>
 <li>……
 <li>……
 <li>……
</ul>

Нумерованный список

<ol>
 <li>……
 <li>……
 <li>……
</ol>

Конструкция для иллюстрации в статье

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

Конструкция для правильного указания иллюстрации віглядит таким образом.

<figure itemscope itemtype="http://schema.org/ImageObject">
 <img src="адрес картинки" itemprop="contentUrl" 
  title="Описание картинки" alt="Описание картинки" />
 <figcaption itemprop="caption">Описание картинки</figcaption>
</figure>

Ссылки в статье

Внутренняя ссылка

Внутренняя ссылка предназначена для указания на страницы вашего сайта. Адрес внутренней ссылки обычно указывается без адреса доменного имени вашего сайта и начинается со знака «/».

<a href="адрес ссылки" title="текст всплывающей подсказки">текст ссылки</a>

Внешняя ссылка

Внешняя ссылка указывает на страницы другого сайта. Адрес внешней ссылки необходимо указывать полностью. Что бы читатель вашего сайта при переходе по ссылке не покидал ваш сайт, можно указать открытие ссылки в новом окне, для этого достаточно добавить параметр «target="_blank"». Если в стилях вашего сайта есть соответствующие настройки, то внешняя ссылка будет дополнительно помечена значком, например, текст внешней ссылки.

<a href="адрес ссылки" title="текст подсказки" target="_blank">текст ссылки</a>

Использование Микроразметки

Описание страницы (description)

Стандарт Микроразметки предусматривает для публикуемых на сайте статей наличие краткого описания статьи «description». Для правильно использования этой разметки текст описания статьи необходимо указывать в качестве первого предложения всего текста, используя такую конструкцию

<p class="description" itemprop="description">… Текст описания статьи … </p>
<p>… остальной тескт стаьи … </p>