Created
September 10, 2020 10:17
-
-
Save aktaumag/29bc38582cfbe59e851eaa1cefe62b93 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Семантическая верстка |
Блок с основным содержанием нужно делать как можно выше по коду, а заголовок H1 желательно делать в коде выше, чем любые другие секции SECTION, NAV, ASIDE и пр.
Но как быть, если шапка с навигацией и хлебные крошки находятся выше, чем основной блок с содержанием...
Делается это очень просто через display: flex и order. Чтобы проще было понять идею, рассмотрим такую структуру:
<div class="rowall">
<div class="col1">Первый</div>
<div class="col2">Второй</div>
<div class="col3">Третий</div>
<div class="col4">Четвертый</div>
</div>
Поменяем порядок блоков задом-наперед с помощью этого css стиля:
<style>
.rowall {display: flex;flex-flow: wrap;}
.col1, .col2, .col3, .col4 { width: 100%;}
.col1 {order: 3;}
.col2 {order: 2;}
.col3 {order: 1;}
.col4 {order: 0;}
</style>
Меняем блоки местами, но при этом их вывод ставим в правильном порядке.
Пример из жизни сразу со встроенными стилями:
<head>
<style>
/*START style WS: Michael Nossov*/
/*стили для смены порядка блоков в коде, чтобы основной контент был выше, но визуально ни чего не менялось*/
.ws-mnblock{display: flex;flex-flow: wrap;}
.ws-first,.ws-second,.ws-third{width: 100%;}
.ws-first{order: 0;}
.ws-second{order: 1;}
.ws-third{order: 2;}
/*END style WS */
</style>
</head>
<body class="ws-mnblock">
<div class="ws-second">
<div class="ws-mnblock">
<div class="ws-second">
<h1>Заголовок</h1>
<p>Всякие текстовые блоки основного содержания</p>
</div>
<nav class="ws-first left-menu">
<!-- левая колонка с меню, а может это div с прочими элементами -->
</nav>
<nav class="ws-first breadcrumbs">
<!-- хлебные крошки -->
</nav>
</div>
</div>
<header class="ws-first">
<!-- шапка сайта с логотипом и пр. -->
</header>
<nav class="ws-first top-menu">
<!-- верхняя навигация -->
</nav>
<footer class="ws-third">
<!-- подвал сайта или не очень важная информация, но в тему страницы -->
</footer>
<aside class="ws-third">
<!-- модальные окна, рекламные блоки или ещё что-то не имеющее отношение к контенту страницы -->
</aside>
</body>
Или ещё такой вариант при очень запутанной вёрстке
<style>
/*START style WS: Michael Nossov*/
/*стили для смены порядка блоков в коде, чтобы основной контент был выше, но визуально ни чего не менялось*/
.ws-mnblock{display: flex;flex-flow: wrap;}
.ws-mnblock > * {width: 100%;order: 1;}
.ws-firsttop{order: 0;}
.ws-secondbot{order: 2;}
/*END style WS */
</style>
Назначаем class="ws-firsttop" тем элементам, которые перенесли ниже основного, но они должны быть выше. Все остальное идёт в расставленном порядке.
<head>
<style>
/*START style WS: Michael Nossov*/
/*стили для смены порядка блоков в коде, чтобы основной контент был выше, но визуально ни чего не менялось*/
.ws-mnblock{display: flex;flex-flow: wrap;}
.ws-mnblock > * {width: 100%;order: 1;}
.ws-firsttop{order: 0;}
/*END style WS */
</style>
</head>
<body class="ws-mnblock">
<div>
<div class="ws-mnblock">
<div>
<h1>Заголовок</h1>
<p>Всякие текстовые блоки основного содержания</p>
</div>
<nav class="ws-firsttop left-menu">
<!-- левая колонка с меню, а может это div с прочими элементами -->
</nav>
<nav class="ws-firsttop breadcrumbs">
<!-- хлебные крошки -->
</nav>
</div>
</div>
<header class="ws-firsttop">
<!-- шапка сайта с логотипом и пр. -->
</header>
<nav class="ws-firsttop top-menu">
<!-- верхняя навигация -->
</nav>
<footer>
<!-- подвал сайта или не очень важная информация, но в тему страницы -->
</footer>
<aside>
<!-- модальные окна, рекламные блоки или ещё что-то не имеющее отношение к контенту страницы -->
</aside>
</body>
<style>
.sr-only{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}
</style>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://youtu.be/5eAOP2JmSxY
Опираться можно только на эту информацию: https://html.spec.whatwg.org/multipage/
Хороший ресурс с подсказками для разметки важных элементов сайта: https://a11y-style-guide.com/style-guide/section-navigation.html
Каким заголовком h1-6 отмечен блок, не имеет значения. Главное правило:
В любом блоке (body, article, section) должен быть заголовок и он должен быть всего ОДИН - важность этих заголовков определяется не их номером, а вложенностью одного блока в другой. При этом желательно всё-таки ещё и соблюдать логику нумераций заголовков для лучшей индексации в Яндексе.
Вложенность имеет преимущество
Такая страница будет лучше отображаться по запросам:
Она будет хуже отображаться по запросам:
Так как мы указали, что наша переадресация обладает двумя важными/обязательными качествами и
HTTPSиWWW— section, это логическое ИПри этом WWW переадресация не обязательно должна обладать качествами
на WWWиc WWW на без WWW... или может обладать только одним из них — так как article, это логическое ИЛИ<article></article>— это блок, смысл которого можно спокойно воспринять отдельно от всего остального контента страницы. Если блок не может существовать отдельно без остального окружения, то это тогда точно<section></section>.<nav></nav>— это любые ссылки для обеспечения навигации по странице или по сайту. В него желательно заключать меню, хлебные крошки, блок содержания страницы, ссылки в подвале (но не сторонние ссылки на вебстудию или соцсети (на счёт соцсетей не уверен) )Гугл любит, когда ссылки в блоке NAV указаны в виде списка, ведь списки это разновидность семантической разметки. При этом обязательно указывать именно НЕ нумерованный список
<ul><aside></aside>— это блок, который не связан тематически с контентом блока в который он вложен. В него желательно заключать рекламные блоки, блоки с виджетами соцсетей, блоки с последними новостями, блоки с популярными товарами и пр. Информация, которую желательно вообще не учитывать при индексации, но тем не менее она может быть учтена.<header></header>— это блок для оглавления любой секции (body, article, section). Не обязательный. В него помещают суть этого блока. Обычно содержит сам заголовок и информацию имеющую непосредственное значение для контента.<footer></footer>— это блок для группировки контента не связанного с этим блоком. Поэтому в него и помещают чаще всего подвал сайта, так как там ссылки на соцсети, авторское право, контактная информация и прочее, что не относится к сути самой страницы. Это авторское право не на переадресацию. Это не соцсети по переадресации. То же самое можно делать и с любой другой информацией в любом блоке.Блок с вопросом «Нашли ли вы всю необходимую информацию».
Блок с похожими товарами, или товарами, которые часто покупают вместе с этим.
Блок с кнопками «Поделиться».
Отличие
<footer>от<aside>в том, что содержимое в footer относится к странице, но не связанно с самим её содержанием.Отличие
<header>от<footer>в одном группируется информация относящаяся к сути контента, а в другом не относящаяся.Эти блоки не являются частью контента секции в которой они находятся (не начало и конец текста), удалив их мы ни как не нарушим смысл повествования блока.
<strong></strong>— используется только для выделения целой фразы в абзаце. Не используется для выделения одного слова или какого-то не законченного смыслового выражения. Используется<strong>только для выделения основной мысли</strong>из общего массива. Минимум для двух слов. Такими выделениями можно построить структуру основных фраз для продвижения в ТОП.Можно заполучить ручные санкции, если бездумно спамить этим тегом на странице.
<b></b>— используется для выделения<b>ключевых</b>слов. Максимум для двух. Выделяем то, что является значимым ключом для страницы или для сайта в целом. По всем правилам<b>семантической вёрстки</b>, тег b не используется для фраз.<i></i>— НЕ используется для добавления иконок типа<i class="fa fa-check"></i>, это семантический тег для названий, терминов, иностранных слов и пр.Все эти и подобные теги не предназначены для форматирования текста!
НЕ для дизайна!
Они не для создания наклонного шрифта или жирного текста. Они несут в себе определённый семантический смысл, а то что от них меняется начертание текста - это пережиток прошлого для поддержки старых технологий.
Нужно сделать жирным или курсивом — делайте стилями и обрамляйте тегом span.
blockquote,body,details,dialog,fieldset,figure,td— это всё элементы, относящиеся к sectioning roots.Не использовать, если не уверен на 100% в их необходимости.
Содержание в этих блоках является самостоятельным и не влияет (или почти не влияет) на суть блока-предка в который вставлен этот блок.