Skip to content

Instantly share code, notes, and snippets.

@aktaumag

aktaumag/semanticheskaya-verstka

Created September 10, 2020 10:17
Show Gist options
  • Save aktaumag/29bc38582cfbe59e851eaa1cefe62b93 to your computer and use it in GitHub Desktop.
Save aktaumag/29bc38582cfbe59e851eaa1cefe62b93 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
semanticheskaya-verstka
Семантическая верстка
@aktaumag
Copy link
Author

aktaumag commented Dec 27, 2020 •
edited
Loading

Блок с основным содержанием нужно делать как можно выше по коду, а заголовок 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>

@aktaumag
Copy link
Author 

<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