В данной статье приведены примеры для технического ознакомления. Я категорически не рекомендую использовать эти советы при попытке “переиграть” поисковые алгоритмы. Компьютеры уже многие годы выигрывают людей в шахматы. Не думайте, что вы сможете переиграть Яндекс, Бинг или Гугл в 2021-ом году.

Чёрное СЕО #

Наши пылесосы, самые пылесосные пылесосы среди всех пылесосящих пылесосов в мире.

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

Существует несколько вариантов спрятать этот текст. Например уменьшить шрифт до нулевого размера или сделать его высотой в один пиксель:

Пример 1 #

.my_first_spam_text{
    font-size: 1px;
}

Если мы замаркируем текст или увеличим масштаб текста на странице, то абзац всё равно можно будет обнаружить. Есть другой вариант:

Пример 2 #

.my_first_spam{
    display: none;
}

Именно так скрывали первые переспамленные тексты от пользователей. И это работало, 20 лет назад. Сегодня display: none; скорее используется только при разработке страницы, для дебагинга или для сокрытия объектов, которые будут видны, только после определённых действий пользователя. Например, только принятия соглашения видна форма логина пользователя.

display: inline; #

display: inline; делает из любого абзаца строковый элемент. Как например тег span. По умолчанию у сточных элементов он Inline. А у блочных block.

display: inline-block #

Внутри ведёт себя как блок, снаружи, как строковый элемент.

display: list-item #

Элемент выводится как блочный, но к нему добавляется маркировка списка.

display: block; #

Делает из любого элемента блочный элемент. Одна из отличительных черт блочного элемента перенос строк до и после.

Блочная или блоковая вёрстка - тема нашего следующего урока.

Какие типы вёрстки бывают #

Забегая вперёд — параметры flex и grid тоже темы двух (как минимум) отдельных уроков.

Принципиально можно говорить о нескольких видах или типах вёрстки:

• табличная(устарела бесповоротно)
• блочная, с флоатами(обтекание) с неё начался css
• на флексах, достаточно популярна до сих пор
• на гридах, вёрстка, которая используется во всех современных фреймворках.

Дополнительно #

Спрятать элемент ещё можно:

Пример 3 #

p{
    visibility: hidden;
}

Правда прячется он как бы не до конца. Проверь.