Семантика HTML 5

Flexible Box Layout Module
CSS flexbox представляет собой способ компоновки элементов, в основе лежит идея оси.
Flexbox состоит из flex-контейнера и flex-элементов. Flex-элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Flexible Box Layout Module
Шапка сайта
Меню сайта
Основная статья
Текст статьи

Flexible Box Layout Module
a.css:
header { border:1px solid black; margin-bottom:10px; }
main { display:flex; width:100%; justify-content:space-between; }
nav { flex-basis:20%; flex-shrink:0; flex-grow:0;
border:1px solid black;
}
article { flex-basis:78%; flex-shrink:0; flex-grow:0;
border:1px solid black;
}

Flexbox контейнер
Направление главной оси
flex-direction: row | row-reverse | column | column-reverse
Управление переносом
flex-wrap: nowrap | wrap | wrap-reverse
Выравнивание по главной оси
justify-content: flex-start | flex-end | center | space-between
space-around
Выравнивание по поперечной оси
align-items: flex-start | flex-end | center | baseline | stretch

Flexbox элемент
Базовый размер:
flex-basis: величина в любых единицах измерения
Коэффициент роста:
flex-grow: величина в любых единицах измерения
Коэффициент сжатия:
flex-shrink: величина в любых единицах измерения
Порядок элементов
flex-order: число
Выравнивание по поперечной оси:
align-self: flex-start | flex-end | center | baseline | stretch

Преимущества flexbox
Все блоки очень легко делаются “резиновым”, что уже следует из названия “flex”. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов адаптивной верстки.
Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
Есть понятие начала и конца, а не права и лева.
Синтаксис CSS правил очень прост и осваивается довольно быстро.

Введение в медиа-запросы
В CSS3 доступны следующие параметры media:
all Все типы. используется по умолчанию
braille Устройства, основанные на системе Брайля
embossed Принтеры, использующие систему Брайля
handheld Смартфоны и аналогичные им аппараты
print Принтеры и другие печатающие устройства
projection Проекторы
screen Дисплей, экран монитора
speech Речевые синтезаторы
tty Устройства с фиксированным размером символов
tv Телевизоры

Пример
Моя страница
Это моя страница
Пример текста, который не будет выводится на печать не выводится

Пример
comp.css (для экранов):
h1 {color:green;}
p {color:blue;}
print.css (для принтера):
h1 {color:black;}
p {display:none;}

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

Медиа-функции
media=“screen and (min-width:1440px)”>
Логические операторы:
and для объединения
not для отрицания
Медиа-функции:
width
device-width
color
orientation
Resolution
Префиксы:
min-
max-

Пример
Моя страница
media="screen and (max-width:1000px)">
Это моя страница
Пример текста, который не будет выводится
на маленьких экранах шириной меньше 1000px

Пример
comp.css:
p {display:none;}

Альтернативное подключение
Вместо
media=“screen and (min-width:1440px)”>
можно использовать медиа-запросы и медиа-функции в самом css-файле:
@media screen and (min-width:1440px) {
…css-правила…
}

Viewport
Мобильные браузеры отображают страницы в виртуальном «окне» (viewport, вьюпорт), которое, как правило, шире экрана устройства. Поэтому им не нужно сжимать макет каждой страницы в крошечное окно (что может сломать многие сайты, не оптимизированные под мобильные устройства). Пользователи могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.
В мобильной версии Safari появился "мета тег viewport" (viewport meta tag), который позволяет веб-разработчикам контролировать размер окна просмотра и масштаб страницы. Многие другие мобильные браузеры также поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта.

Viewport
content="width=device-width, initial-scale=1">
Width - определяет размер окна просмотра. Он может быть установлен на определенное количество пикселей, скажем,width=600 или на специальное значение device-width, которое означает ширину экрана в пикселях CSS в масштабе 100%.
Свойство initial-scale контролирует уровень масштабирования при первой загрузке страницы.

Реперные точки

Итоговая структура
media=“screen and (min-width:1024px)”>
media=“screen and (min-width:768px)
and (max-width:1023px)”>
media=“screen and (min-width:480px)
and (max-width:767px)”>
media=“screen and (max-width:479px)”>
…

ВЕРСТКА ТИПОВЫХ ЭЛЕМЕНТОВ

«Сложный» логотип
Под сложным логотипом будем понимать элемент, содержащий в себе кроме текста еще и изображение, либо текст, не воспроизводимый стандартным набором шрифтов.
Логотип, как правило, содержит название компании (или товара, которому посвящена страница) и располагается в шапке. Используется в SEO для продвижения компании или продукта путем использования тега h1:
Сибирская корова
Однако, в браузере это будет выглядеть просто текстом без изображения. Замена на
приведет к потере содержательной части тега h1, доступной для обработки поисковыми системами, и, как следствие, ухудшению положения сайта в поисковой выдаче по этой ключевой фразе.

«Сложный» логотип
Для того, чтобы удовлетворить и потребности SEO, и вывести на экран изображение, можно использовать следующее css-правило:
h1 {
display:block; /* определяем контейнер */
width: 200px; /* с шириной и высотой */
height: 150px; /* по размеру логотипа */
background: url(logo.png);
/* далее используем одно из определений */
font-size:0;
text-indent: -10000px;
}

Горизонтальное меню
Меню сайта является аналогом содержания книги, которое, в свою очередь, представляет из себя список глав. С точки зрения верстки для списков есть соответствующие пары тегов ul-li, либо ol-li:
Меню 1
Меню 2
Меню 3
Однако, визуально это выглядит следующим образом: