Введение в семантические элементы HTML5

В HTML5 появилось множество новых элементов, которые привнесли в HTML-разметку еще семантики.

Чтобы было понятней как осуществляется поддержка этих элементов, я буду использовать один и тот же пример на протяжении всей этой части. Примером будет статья о муке, которую я позаимствовал здесь.

Перед тем, как мы продолжим, вам стоит взглянуть на то, как разметка этой статьи могла бы выглядеть без использования элементов HTML5. В статье много элементов <div>, и я покажу вам как их можно было бы заменить на семантически более подходящие.
Взгляните на разметку с обычным HTML, и если вы готовы принять этот вызов, сравните ее с разметкой HTML5. В противном случае двигайтесь дальше по главе, и я покажу вам как и зачем мы будем делать разметку более семантически верной. (Обратите внимание, что статья не стилизована. Это все чистый семантический HTML!)

Новые элементы HTML5 могут использоваться множеством способов. Важно заметить, что не смотря на то, что я попытался охватить максимальное количество вариантов их использования, оно не ограничивается лишь этим.

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

Я буду описывать одно, два, а порой и три разных варианта использования элементов. Но не дайте этому вас напугать. Используя новые элементы вы защищаете свой веб-сайт от преждевременного старения. А это всегда хорошо. Кроме того, не стоит вырабатывать привычку использования элемента <div> повсеместно, так как такой способ верстки уже отмирает.