html и css для начинающих

кнопка удаления
кнопка удаления
кнопка меню

Семантическая разметка, макет в HTML5


В HTML5 есть элементы, которые разделяют страницу на части в зависимости от типа контента, который в них располагается. Основная задача, чтобы контент был семантически связан, то есть связан по смыслу. Эти элементы не изменят внешний вид страницы, но логически струкруируют текст. Кроме того, облегчают использование CSS.

Элемент div


Элемент <div> является элементом общего назначения. Его цель заключается в группировке контента, который семантически не связан между собой. Использовать <div>, по рекомендациям, стоит тогда, когда для группировки контента нет подходящего элемента. Все об элементе div

Элементы <header> и <footer>


С элементами все понятно - это шапка и подвал страницы. Элементы <header> и <footer> ипользуются в качестве:

Элемент <header> может содержать название сайта, логотип и основное меню навигации.
Элемент <footer> может содержать информацию об авторских правах, ссылки на положения политики конфиденциальности, ссылки на социальные сети и правила использования сайта.

Пример:

header footer

Каждый элемент <article> и <section> также может иметь собственные элементы <header> и <footer> для размещения в них информации, касающейся конкретного раздела страницы.

В элемент <header> можно поместить название и дату сообщения, а в элемент <footer> - ссылки для размещения статьи в социальных сетях.

Меню навигации. Элемент <nav>


В элементе <nav> располагается основное меню навигации сайта.

nav

Элементы <section> и <article>


Признаюсь честно, сначала я запуталась. Какая разница какой элемент использовать? Я люблю докопаться до сути вещей и нашла одну хорошую статью, которая мне помогла понять, когда использовать div, а когда section и article:

table

Можно несколько тегов <article> разместить внутри <section>. И каждый индивидуальный тег <article> может содержать в себе раздел section. А теперь, подробнее про элементы:

Элемент <section>


Элемент <section> применяется к общему разделу контента, который может быть сгруппирован семантически, т.е. по смыслу, часто каждый раздел имеет собственный заголовок.

Например, на главной странице может быть несколько элементов <section>:последние новости, самые популярные товары и подписка на рассылку.

Если страница содержит длинную статью, то элемент <section> может использоваться для разбивки ее на отдельные разделы. Допускается вкладывать один тег <section> внутрь другого.

Элемент <section> не следует использовать в качестве оболочки для всей страницы (если только страница не содержит один независимый фрагмент контента). Если вам нужен контейнер для всей страницы, то для решения этой задачи лучше всего подойдет элемент <div>>.

section

Элемент <article>


Элемент <article> это контейнер для любого независимого раздела страницы, он так же применяется к семантически связанному разделу контента и должен иметь заголовок. Тем не менее его содержимое должно быть самодостаточным. Это означает что будучи изолированным от остальной части страницы оно по прежнему должно иметь смысл.

Элементы article можно вкладывать друг в друга. И хотя они по прежнему являются самодостаточными, предполагается, что содержимое внутреннего <article> связано с внешним.

Если страница содержит несколько статей, то каждая отдельная статья заключается в собственный элемент <article.

Элементы <article> бывают вложены друг в друга. Например, сообщение в блоге может находиться в одном элементе <article>, а каждый комментарий к сообщению - в отдельном дочернем элементе <article>.

article

Сторонний контент. Элемент <aside>


Элемент <aside> определяет блок сбоку от контента для размещения рубрик, ссылок, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель» и имеет две цели, в зависимости от того, находится ли он внутри элемента <article> или нет.

Когда элемент <aside> расположен внутри элемента <article>, он должен содержать информацию, относящуюся к статье, но не обязательно к ее общему смыслу. Например врезка с цитатой или глоссарий может выступать в качестве стороннего содержимого для статьи, к которой они относятся.

Когда элемент <aside> расположен за пределами элемента <article>, он выступает в качестве контейнера для контента, относящегося ко всей странице. Например он может содержать ссылки на другие разделы сайта, список последних сообщений, строку поиска или последние твиты, добавленные автором.

aside

Группировка заголовков. Элемент <hgroup>


Элемент <hgroup> предназначен для группировки элементов <hl> - <h6>, чтобы они рассматривались как один заголовок.

Например, элемент <hgroup> может содержать заголовок внутри элемента <h2> и подзаголовок внутри элемента <hЗ>.

Этот элемент неоднозначен. Когда он был впервые предложен людьми, создающими HTML5, поступил ряд жалоб,и этот элемент исключили из HTML5. Тем не менее, он довольно популярен среди разработчиков, считающих целесообразным группировку основного заголовка и подзаголовка, поскольку оба могут быть неразрывны по смыслу.

Рисунки <figure> <figcaption>


Элемент <figure> может содержать контент, относящийся к содержимому статьи (причем не только изображения).

Важно отметить, что статья должна по-прежнему иметь смысл в случае перемещения содержимого элемента <figure> в другую часть страницы или вообще на другую страницу.

По этой причине данный элемент стоит использовать только тогда, когда контент просто ссылается на элемент, а не тогда, когда он является неотъемлемой частью содержимого страницы.

Примеры использования включают:

Элемент <figure> также должен содержать элемент <figcaption>, обеспечивающий описание для его контента.

figure

Все вместе


table