Семантическая структура для HTML5 страницы. Семантика в HTML5

Опубликовано: 21.05.2017

видео Семантическая структура для HTML5 страницы. Семантика в HTML5

Семантическая верстка макета html

Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про новые семантические теги в HTML5 . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.


Курс HTML и CSS Как создать сайт? Урок 4 - Семантическая структура html страницы

 

В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.

Рисунок — Семантическая структура для HTML5 страницы.

 

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:


HTML. 5. Структура страницы

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Заголовок страницы</title>     <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">     <meta name="description" content="Описание контента страницы, 1-2 предложения."> </head> <body>

Я добавил тег <meta name="keywords" content=""> который отвечает за ключевые слова. И тег <meta name="description" content=""> который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега <title>. Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.

 

Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.


Понравилась статья? Вы можете оставить отзыв или подписаться на RSS, чтобы автоматически получать информацию о новых статьях.

Комментариев пока нет.

Ваш отзыв

Деление на параграфы происходит автоматически, адрес электронной почты никогда не будет опубликован, допустимый HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*

*