Заказать звонок
hello@svettsova.com
Белгород, ул. Костюкова 35В Санкт-Петербург, ул. Кондратьевский 62, корп. 3
Участник рейтинга развития диджитал-агентств
<p>
. Семантически в html этот тег означает абзац, абзац некого текста, он может состоять из одного предложения, как в данном примере, или из нескольких. Во втором случае мы предполагаем, что данные оформлялись с помощью тега <p>
и трех тегов </br>
(перенос строки). В коде это выглядит так:
<p>Любимые цвета:</br> - красный, </br> - голубой, </br> - фиолетовый.</p>Черточка прописывалась нами каждый раз вручную и особой смысловой нагрузки для поисковика не несет, но нам, как пользователям, визуально понятно, что идет перечисление и его легко прочесть, гораздо удобнее, чем просто строку. К тому же первая часть предложения просматривается легче (обобщающее предложение), хотя мы его не подчеркиваем жирным и не оформляем отдельным тегом, например, тегом подзаголовка. Вообще, по правилам типографики обобщающее предложение не выделяется жирным, тогда как заголовкам не нужно двоеточие. Но, мы стремимся выделять обобщающие предложения для легкости сканирования текста пользователем. Тот, кто изучает поведение пользователей на сайтах, знают, что в основном пользователи прочитывают выделенные визуально части текста: заголовки, подзаголовки, маркировочные или нумеровочные списки, выделение, цитаты, изображения и другое. И только заинтересовавшись, могут прочесть «скучные» абзацы. Поэтому крайне важно структурировать информацию. Но это еще не все. Поисковые системы тоже не против понимать структуру документа. И донести ее им мы можем, используя теги для каждого типа данных. В 1-ом и во 2-ом случае для поисковой системы наше предложение означает – абзац, который может состоять из одного или нескольких предложений. Но мы можем донести до нее, что у нас есть именно перечисления. Для этого мы должны использовать теги:
<ul>
или <ol>
.
Тег <ol>
означает упорядоченный нумерованный список, устанавливается последовательность или же его можно использовать тогда, когда вы хотите в дальнейшем ссылаться на элемент списка по номеру. Тег <ul>
обозначает тоже список, но без фиксированного порядка, он называется – маркировочный список. Сейчас повсеместно используются точки (буллеты, маркер списка), хотя ранее в учебниках, книгах чаще использовались именно черточки (тире). В нашем примере лучше использовать тег <ul>
. Если бы мы публиковали инструкцию, с последовательностью шагов, то правильнее использовать тег <ol>
. Используя теги списков, нам уже не нужно самим проставлять черточки, точечки (маркированный список) или цифры (нумерованный список), это за вас сделает браузер. Но сами перечисления обрамляются тегами <li>
, а <ul>
или <ol>
вставляются в начале списка и в конце.
Пример использования тега <ul>:
<p><b>Любимые цвета:</b></p> <ul> <li>Красный</li> <li>Голубой </li> <li>Фиолетовый</li> </ul>Пример использования тега <ol>:
<p><b>Любимые цвета:</b></p> <ol> <li>Красный</li> <li>Голубой </li> <li>Фиолетовый</li> </ol>
<h1>
всегда один. Если наша статья хотя бы больше 1000 знаков мы используем и подзаголовки <h2>
, а при больших объемах могут быть и <h3>
, <h4>
. Обычно уровня <h4>
достаточно.
Вернемся к первому основному заголовку, есть 2 правила его использования (основные) и последнее 3-ее - желательное:
<b>
или <span>
. Стили задавайте в CSS.<h2>
структурно вкладывается в <h1>
, он как раздел в вашей книге. Подзаголовок <h3>
вкладывается в <h2>
и он не может идти следом за <h1>
. Например, на вашем сайте есть страница со статьей: «Уход за домашними животными». Это как вы поняли - <h1>
. После заголовка идет некоторое вступление – тег <p>
, возможно что-то еще, например, <ul>
или <ol>
, если есть цитата, то мы используем <blockquote>
и так далее. После, у нас идет подзаголовок <h2>
: «Уход за собаками». Далее текст. После, подзаголовок третьего уровня: «Уход за шпитцами», текст. Еще один: «Уход за терьерами», текст. После мы возвращаемся к подзаголовку второго уровня: «Уход за кошками». После текста вступления – заголовок третьего уровня: «Уход за ангорскими кошками», здесь мы описываем сложности или легкости ухода за кошками данной породы. Далее, еще один подзаголовок того же уровня: «Уход за мейнкунами». И так далее. Структурно это будет выглядеть как оглавление книги:
В отличие от книги здесь нет номеров страниц, но если мы имеем дело с большим текстом (лонгридом), нам не помешают якорные ссылки, которые ведут не на отдельную страницу, как при обычной ссылке, а на часть документа, как на одностраничниках. Одностраничники еще называют лендингами, хотя в первоначальном контексте лендинг - не есть одностраничник, а есть - продающая страница, посадочная страница и эта страница необязательно должна быть на сайте единственной. Как стало понятно из описания выше, структура текста должна быть логичной, использование заголовков и подзаголовков только с целью визуального эффекта - неверный подход. Иногда один и тот же тип подзаголовка используется слишком часто, не неся его предназначения, например, когда выделяются важные мысли из абзаца. Чтобы что-то выделить, лучше использовать другие теги, например, выделения жирным, курсивом или используйте атрибут class в тегах<h1>
Уход за домашними животными</h1>
<h2>
Уход за собаками</h2>
<h3>
Уход за шпитцами</h3>
<h3>
Уход за терьерами</h3>
<h2>
Уход за кошками</h2>
<h3>
Уход за ангорскими кошками</h3>
<h3>
Уход за мейнкунами</h3>
<p>
или <div>
, прописав стиль отображения в файле CSS.
<style>
или тега <span>
. Атрибут <style>
использовался ранее и в настоящее время считается невалидным. Ранее в него помещалось дополнительное оформление текста: шрифт, цвет текста, размер, выравнивание, отступы и другое, сейчас мы все это убираем в отдельный файл – CSS, который подключается в <head>
, и наш код становится меньше, а красота оформления от этого ничуть не страдает. К тому же стили применяются ко многим областям документа - задав шрифт в 16 px для тега <p>
весь шрифт, помещенный в этот тег, будет иметь такой размер, и нет нужды прописывать размер для каждого тега опять и опять. Это как мы видим, не только красиво, но и удобно. Хотя я встречала, когда стили не выносились в отдельный файл, а прописывались в самом документе. Я не советую так делать. Старайтесь сократить код в html документе, чтобы ваш контент был не зернышком в пшеничном поле, а цветком в аккуратной клумбе.
<p>
и подзаголовков, а также использование в подзаголовков дополнительный вложенный тег <strong>
<alt=” ”>
, который присутствует во всех чек-листах и рекомендуется в срочном порядке к заполнению. Прописывайте его, конечно, но не мусорите в нем ключевыми словами. Если на картинке изображена собачка, лежащая на травке, не пишите в <alt>
- грумер недорого спб. Описывайте в данном атрибуте только то, что там действительно изображено, чтобы не переспамить и не попасть под фильтр.
Изображения выводятся на страницу с помощью тега img. Адрес, где лежит изображение на сервере задается атрибутом src. Это выглядит так:
<img src=”https://svettsova.com/wp-content/themes/rooma/images/logotip.png” >Альт прописывается внутри тега img:
<img src="https://svettsova.com/wp-content/uploads/2020/05/skrin-t.jpg" alt="Скриншот сообщения Джона Мюллера">
Если вы хотите, чтобы изображение было кликабельно, нужно тег img поместить внутри тега <a>
(тег для ссылки).
<a href="https://svettsova.com"><img src="https://svettsova.com/wp-content/uploads/2020/05/skrin-t.jpg" alt="Скриншот сообщения Джона Мюллера"></a>Атрибуты: align (выравнивание изображения справа, слева или по-центру), height (высота изображения), width (ширина изображения) лучше всего не использовать. Прописывайте такие данные в CSS-файле, используя атрибут class. Внутри этого атрибута задается произвольное название класса:
class="izobrazhenie"А в CSS к этому названию прописываются стили, например:<?p>
. izobrazhenie { float: right; margin: 6px 0 6px 20px; }
<figure>
и <figcaption>
. Само описание задается в <figcaption>
.
Код:
<figure> <img src="https://svettsova.com/wp-content/uploads/2019/10/sezonnost-poiska1.png" alt="График сезонности поисковой активности по запросу плитка"> <figcaption>Сезонность поисковой активности в строительной области</figcaption> </figure>Изображение:
<figure>
можно поместить несколько изображений, но <figcaption>
(описание) только один.
<dl>
, <dt>
, <dd>
.
<dl>
- основной контейнер, в него вкладывается <dt>
, <dd>
. <dl>
в блоке один, тогда как <dt>
, <dd>
может быть несколько.
Пример текста:
<dl> <dt>, Что такое title</dt> <dd>это тег, которые содержит в себе название документа, отдельной страницы сайта. Его можно увидеть в открытом окне браузере или в сниппете поисковой выдачи.</dd>. <dt>Что такое description</dt> <dd>это краткое описание html документа. Отображается в коде.</dd>. </dl>Термин, который в тексте встречается впервые Тег
<dfn>
выделяет слово, как новое определение. Очень часто такое встречается в научной литературе. Стандартное выделение – курсив.
Пример текста:
Title – заголовок браузера, не должен полностью совпадать с тегом <h1>
Код:
<dfn>Title</dfn> – заголовок браузера, не должен полностью совпадать с тегом <h1>Ссылка Куда же в интернете без ссылок, а? Тег
<a>
, как и многие теги, обязательно имеет пару – ставится вначале и в конце. В атрибут href вставляется ссылка, на которую пользователь перейдет при клике. Полностью код выглядит так:
<a href="сюда вставляется ссылка" >Этот текст кликабельный</a>Аббревиатура Прописывается так:
<abbr>
. С помощью атрибута Title вы можете задать расшифровку термина, которая появляется при наведении на аббревиатуру.
Пример текста:
URL – адрес, указатель ресурса.
Код:
<abbr title="Uniform Resource Locator">URL</abbr> – адрес, указатель ресурса.Курсив Старый добрый курсив реализуется тегом
<i>
. Особого смысловое значение не имеет.
Важный фрагмент текста
Тег <em>
. Стандартно браузер выделяем фрагмент, заключенный в этот тег курсивом. Но в CSS мы можем задать что-то иное, чтобы были разные варианты визуального оформления.
Короткая цитата
Тег <q>
помечает фрагмент текста как цитату. Отображается курсивом с кавычками. Может использоваться вместе с атрибутом cite, который указывает на автора цитаты (источник).
<p><q>Мороз и солнце; день чудесный.</q> стихотворение <cite>А.С.Пушкина</cite></p>Большая цитата Если ваша цитата большого объема, то используйте лучше тег:
<blockquote>
Выделение жирным
У выделения жирным есть два способа в реализации: тег <b>
и тег <strong>
. Второй способ предпочтительнее.
Подчеркивание
Тег <u>
. Сейчас подчеркивание ассоциируется с ссылками, поэтому лучше их не использовать в других местах текста.
Форматируйте ваш текст не только для посетителей вашего сайта, но и для поисковых систем. Спасибо за внимание!