Семантика при верстке?

Question

[GTHY]

Сейчас используют section, article, nav? Я как понимаю, что верстальщик переводит дизайн изначально в логически понятную структуру, на которую потом уже накладывать css свойства. Большинство сайтов все же больше на документы похожи, чем на интерфейсные приложения. Я веду к тому, как правильно разметить. Просто на w3c сайте где показаны темплейты различных сайтов, то там все через дивы. Они просто не меняли структуру, не придерживались методологии или как? https://www.w3schools.com/w3css/w3css_templates.asp

Я давно верстал без методологий, пару раз брал на фрилансе заказы одностраничников. Я в основном программировал. Сейчас хочу вернуться в it, но не могу лишь бы как делать, хочу адекватно подойти к делу. Не хочу смотреть дурацкие курсы по 40 часов, документацию w3c могу посмотреть, где показано какие теги нельзя куда вкладывать, да и через валидаторы можно это смотреть. Есть ли сайты где шаблоны с готовой правильной версткой, чтобы мне потренироваться и вспомнить, наработать немного навык. Сверстать пару различных макетов и потом по образцу посмотреть как сделали опытные фронтендеры.

Comments

[Сергей delphinpro]

Answer 1

[Stalker_RED]

1. w3schools.com - коммерческий проект использующий в своем название буковки w3, еще иногда называется w3fools, из-за повсеместных ляпов и неточностей.
Иногда на нем попадаются годные примеры, но лучше как основной использовать mdn, например.

2. Все эти article и aside - они практически не влияют на то, как браузер отображает страницу.
Почи все html элементы можно визуально заменить на дивы. Разве что с айфремами, мултимедиа и input[type=file] не прокатит. Из-за этого многие версталы думают, что все эти aside-ы не нужны, от слова совсем. И в общем оно так и есть, пока они делают сайт продающий сантехнику в деревне Жукино.

До этапа массового использования и серьезного продвижения их поделка не дойдет никогда. Как слепые и слабовидящие с их ридерами будут пользоваться сайтом? Не их проблема.

На том-же MDN-е описаны основные принципы
https://developer.mozilla.org/ru/docs/Web/Guide/HT...
Тутуориалов разной степени навороченности тоже хватает:
https://internetingishard.com/html-and-css/semanti...
https://dequeuniversity.com/assets/html/jquery-sum...
https://accessibility.huit.harvard.edu/use-semanti...

Можете уточнить что именно вы ищете?

Comments

[GTHY]

Спасибо за ответ. Я хочу вернуться в it на работу. Но так как уже года полтора-два не занимался, то думаю с верстки и потом перекочевать во фронтэнд. Так как с vue работал, с бэкэндом laravel/yii2. Да и для автоматизации, системы контроль версии знаю.
Но я просто верстал как программист без деталей, а сейчас хочу больше понять как смотря на дизайн уже поделить на блоки структуры и правильно разделить по тегам. Я понимаю, что есть подход как семантически более корректный и например, если диктует контора, что надо на бутстрап. То что можно написать все на дивах это я понимаю. Хочу на пару макетах потренироваться, чтобы потом где то устроиться на время.

[Stalker_RED]

GTHY, бутстрап использует в основном ARIA Landmarks, хотя никто не мешает использовать совместно с ними и семантические теги из html5, как вот здесь, например.

Про полтора-два - к чему это? Семантику не в прошлом году изобрели, и даже не 10 лет назад.
Хотите потренироваться - что вам мешает?

[GTHY]

Stalker_RED, К тому что я тогда не по семантике верстал, а за 2 года думаю добавилось что то новое. Никто не мешает, спрашивал же про статьи, которые подскажут в правильное направление и ресурсы где есть уже готовые семантически верные шаблоны сверстанные для образца.

[Johny Smith]

Как слепые и слабовидящие с их ридерами будут пользоваться сайтом? Не их проблема.

Вообще не являюсь слепым, ни слабовидящим, никаких ограничений нет, но часто читаю сайты ридерами, изза того что так быстрее чем бегать глазами от строки к строке

[Stalker_RED]

GTHY, те три ссылки что я привел, это оно, или не подходит? Ничего особо нового не придумали со времен HTML5 и ARIA меток.