<
  • Главная<
Не найдено

Семантическая верстка HTML5: Начало будущего

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

видео Семантическая верстка HTML5: Начало будущего

Создаем сайт прямыми руками - 3

2 Декабрь, 2013 - 06:04

Семантическая верстка была основана на той идее, что названия тегов должны совпадать с их смысловым значением и что html разметка должна правильно описывать свой контент. Рассмотрим примеры самых важных и распространенных семантических тегов HTML5:


HTML5: суть, семантика и использование на практике

<header> - Используется для создания шапки сайта, в теге могут быть меню навигации, встречающиеся почти во всех сайтах, логотип и важные ссылки. В header могут быть описаны любые теги кроме самого header, и footer(исключениями являются основные теги <html>, <head>, <style>, <script>, <body>).


CSS препроцессоры — вебинар по Front-End

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

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

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

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

<figure> - этот тег предназначен для группировки элементов, например, картинку и текст с описанием можно взять в figure и только потом поместить в тег <article>.



rss