Насколько важна «Богатая семантика», в верстке?

Question

[colorkid]

Всем привет. Хочется спросить у опытных верстальщиков их мнение по поводу важности "Богатой семантики", что она дает?

Под "Богатой семантикой", я имею ввиду, такие вещи когда например в компоненте card есть:
заголовок
картинка
описание

так вот, можно все эти составляющие сверстать на div'ах и не париться вообще, а можно заголовок например в h4 обернуть, описание в p. Это оооочень упрощенный пример конечно, но тем не менее, как поступаете Вы? И какие у вас аргументы так поступать?

Answer 1

[Tom Nolane]

есть такая штука, называется w3.org
она "задаёт" стандарты по "вертске". Рекомендую ознакомиться.
Вот тут и тут можно проверить - по "феншую" или нет.

Иногда "проще" не значит лучше, (если вы планируете создавать рекламные компании, хотите хорошие показатели по SEO и т.д.), т.к. Google, Yandex и другие напрямую смотрят какой у вас сайт (в т.ч. вертска по "феншую" или нет) и напрямую (В ЧАСТНОСТИ) влияет это всё на цену в рекламе, позиции в поиске и прочее... (это не значит, если всё будет соответствовать 100% по "феншую" и всем стандартам, Ваш сайт будет на 1-ом месте в поиске)

Есть стандарт w3 и нужно ему следовать. К примеру по новому стандарту, не обязательно использовать закрывающие теги li, у тегов img обязательно должен быть атрибут alt, недопустимы пустые свойства в css, очень желательно использовать все теги заголовков h1-h6 и причем h1 должен быть всего 1 на странице, теги h2-h6 не должны быть выше такогоже тега, но с числом меньшим (к примеру тег h3 не должен быть в DOM выше, чем h2 и т.д.) и множество множество что ещё

UPD
если "богатая семантика" будет кроссбраузерной, проверка тут не покажет ошибок, то хоть в дивах, хоть на всех html тегах верстайте

Comments

[colorkid]

ЛОЛ, ЧТО? Семантика влияет на цену в рекламе...

[Tom Nolane]

colorkid, моя компания вкладывает почти 2 млн рублей в неделю на рекламу,а я занимаюсь оптимизацией сайтов. Так что я точно знаю о чем пишу

[colorkid]

оптимизацией сайтов !== реклама сайтов (директ/эдвордс)

[Tom Nolane]

colorkid, после моей оптимизации, стоимость клика упала в два раза. Ещё раз говорю, не спорьте если не знаете. Я к сожалению не могу показать скриншот, т.к. это коммерческая тайна. Вы можете верить или не верить, но уж точно мне не доказывайте обратное

Сайты имеют почти 100 000 уников в день

[Tom Nolane]

colorkid, и w3.org не просто в "воздух" публикует "правила", которые должны придерживаться все (в т.ч. и google, yandex и др.). И google и yandex эти правила не просто учитывают, а с помощью них оценивает сайт

[Дмитрий]

Tom Nolane, Можете объяснить что это значит? - недопустимы пустые свойства в css

[Tom Nolane]

Дмитрий,

.my_header{
// тут пусто
}

[Максим Федоров]

colorkid,

что значит лезть не в тот огород

рчеь идет в контексте семантики верстки?
вы очевидно спутали с семантикой запросов?

[Дмитрий]

Tom Nolane, Спасибо. Понял.

[colorkid]

Tom Nolane, а после моих "SEO амулетов", лендинг на тильде, в топ 3, по завпросы пластиковые окна, при том что это Московский регион. Но я к сожалению не могу показать скриншот, т.к. это коммерческая тайна.

[Максим Федоров]

colorkid, какие нафиг запросы? Тут речь про верстку и html теги!

[Tom Nolane]

Дмитрий, ещё по памяти:
тег select если имеет атрибут required то должен показывать option без значения (с пустым) (чтобы пользователь выбирал)
, если не имеет required, то один из option должен имеет атрибут selected
вот пример:

<div class="form-group ex-arrow-on">
                        <label for="credit">Кредитная история</label>
                        <select class="form-control" id="credit">
                            <option selected>Никогда не брал кредитов</option>
                            <option>Кредиты закрыты, просрочек не было</option>
                            <option>Кредиты есть, просрочек нет</option>
                            <option>Кредиты закрыты, просрочки были</option>
                            <option>Просрочки были, сейчас нет</option>
                            <option>Просрочки сейчас есть</option>
                        </select>
                    </div>

также "по феншую" каждый labelчерез for должен указывать к какому инпуту он относится.

input type="hidden" не должен быть required и не должен иметь placeholder
и множество множество ещё других вещей

[Tom Nolane]

Дмитрий, это "типо мелочи", но по факту (и я сам в этом убедился не один раз) - это от части влияет на цену клика, на результаты в SEO (на прямую влияет)

[Tom Nolane]

webdev341, входит в ТОП-3 (в РФ) по микрофинансовой тематики

[Tom Nolane]

вот ещё пример
display: inline-block и float: left
float будет игнорироваться, по-этому так делать нельзя,
также размер текста не должен быть меньше 12 px (желательно)
п.с. почему не менее 12 px?

[sim3x]

К примеру по новому стандарту, не обязательно

0. На самом деле нет

Tag omission
A ul element must have both a start tag and an end tag.

https://www.w3.org/TR/2011/WD-html-markup-20110113...

1. Браузеры работают с говноверсткой уже 20 лет и давно научились закрывать теги

[sim3x]

Tom Nolane,

и w3.org не просто в "воздух" публикует "правила"

чаще всего правила формируются постфактум и после того, как все стороны удовлетворены

которые должны придерживаться все (в т.ч. и google, yandex и др.)

нет. Ето рекомендации, чаще всего появляются после того как они уже внедрены в основной движок

И google и yandex эти правила не просто учитывают, а с помощью них оценивает сайт

а вот как гугл оценивает верстку не знает никто

[Tom Nolane]

sim3x, по поводу ul я опечатался (версия HTML 5.2), (поправил ответ)

а вот как гугл оценивает верстку не знает никто

то, что описал выше, гугл 100% (в том числе) оценивает.

1. Браузеры работают с говноверсткой уже 20 лет и давно научились закрывать теги

браузеры браузеру рознь. Сейчас Сафари хуже, чем IE. И я чуть не посидел, когда через VM открыл сафари и один сайт по работе - и в нём все input сливались с backgrond-color, placeholder не видно было и всё в продакшене уже месяца 3....

То что они закрывают - это хорошо, у кого-то норм отобразится, кто с Андроида зайдет - не так повезет. + Немало важно всё таки SEO (которое в основном оценивают роботы и пауки, и они врят ли умеют закрывать теги)

[Василь Бойко]

Tom Nolane, float не учитывается когда задан display: inline-block? вы с дуба рухнули?
jsfiddle.net/nh9f62jb

[Tom Nolane]

Василь Бойко, пардон, наоборот тык

[Василь Бойко]

Tom Nolane, jsfiddle.net/qs1u9jbp какая разница?

[Tom Nolane]

Василь Бойко, float

продолжим дальше спорить?
ещё тык

[sim3x]

Tom Nolane,

то, что описал выше, гугл 100% (в том числе) оценивает.

еще раз. У гугла работает ML.
Веса фич - не знает никто
Что у вас конкретно сработало - не знает никто

браузеры браузеру рознь. Сейчас Сафари хуже, чем IE.

есть три движка. А на них куча браузеров. Парсеры и рендеры у них практически идентичны
Чаще всего ошибка не в браузере

не обязательно использовать закрывающие теги li

An li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.

[Tom Nolane]

sim3x,

еще раз. У гугла работает ML.
Веса фич - не знает никто
Что у вас конкретно сработало - не знает никто

возможно, спорить не буду

есть три движка. А на них куча браузеров. Парсеры и рендеры у них практически идентичны
Чаще всего ошибка не в браузере

я это написал про один частный пример: во всех браузерах норм (в т.ч. и в мобильных), а на сафари была лажа( причем часто такое случается (руководство сидит на маках и при сдаче сайтов вечно "такое" вылазит).

An li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.

взято от сюда
я про это как раз и писал (наверно как всегда коряво).

[Antony Bark]

господа.. Какой смысл спорить о СЕО в связке с семантикой? Семантика инструмент с чётко определёнными параметрами. А реальное СЕО в настоящее время, это как шаманство во вселенной с постоянно изменяемыми свойствами. Спасибо за положение вещей поисковым корпорациям :)

Answer 2

[Александр Алексеев]

На одном из моих сайтов наверное половина страниц была выкинута яндексом как "недостаточно качественные"
После семантичной переверстки и расставления всяких role и тд все вернулось в поиск
Совпадение? Не думаю.

Answer 3

[Antony Bark]

Соблюдайте семантику, она важна.

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

Answer 4

[Programmist_Kolxozn1k]

Честно ? Не партесь если вас на работе это не заставляют делать. А если для себя то советую как уже выше написано было почитать раздел 3 про семантику в спецификации w3c там все доступно и понятно объясняется.