Как перейти с div вёрстки на разметку HTML5? Html5 шапка


Основы HTML5 или учимся верстать на HTML5

Приветствую Вас, дороги читатели блога. Сегодня мы не много узнаем о основах новой разметке веб страниц HTML5. А так же узнаем как наш уже существующий сайт перевести в этот новый HTML язык.

Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.

Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.

Верстка div (старая)

Друзья, сначала я начну с примеров, так как на примерах всегда понятнее. Как Вы уже догадались, что я перевёл свой блог на HTML5, и по этому возьмём его как пример, рассмотрим старую вёрстку с помощью DIV и посмотри как выглядит новая на HTML5.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU"> <head profile="http://gmpg.org/xfn/11"> <!-- ......... --> </head> <body> <!-- Шапка сайта --> <div> <!-- Навигация --> <div> <!-- ......... --> </div> <!-- Конец навигации --> </div><!-- Конец шапки сайта --> <div><!-- основной блок --> <div><!-- блок там где отображаются посты --> <!-- Начало поста --> <div> <!-- ......... --> </div> <!-- Начало поста --> <div> <!-- блок боковой колонки --> <!-- ......... --> </div> </div> </div> <div><!-- Футер сайта --> <!-- ......... --> </div> </body> </html>

Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.

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

Теги HTML5

Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:

<header> — данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.

<section> — данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.

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

<aside> — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

<footer> — в этот тег должен входить низ Вашего сайта (Футер)

<hgroup> — в данный тег входят групы заголовков сайтов, например <h3>.

<nav> — данный тег включает в себя всю навигацию на сайте (меню).

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

Вот мы и рассмотрели самые основные теги. Теперь давайте посмотрим теги, которые используются не часто или же в зависимости от тематики сайта:

<audio> — данный тег выводит аудио на сайте.

<canvas> — данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.

<menu> — в этот тег должны входить список меню, например ul li.

<time> — сюда входят время и дата на сайте. Например на блогах дата размещения поста.

<video> — вставляет видео на страницу.

<wbr> — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу <br>.

Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

А вот как он выглядит по новому:

<!doctype html>

Ну как Вам разница? :-) По моему существенная. Так же ещё проще стал тег <html>. Он был такой:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">

А стал такой:

<html lang=ru>

Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.

Верстка (новая)

Перед тем как приступить к вёрстке нам между тегами <head> и </head> нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:

footer, nav, header, section, aside { display: block }

Всё, первый шаг готов. Теперь давайте посмотри на готовый уже HTML5 код, который у меня получился, а также подробно разберём его:

<!DOCTYPE html> <html lang="ru"> <head> <!-- ......... --> </head> <body> <!-- Шапка сайта --> <header> <!-- Навигация --> <nav> <!-- ......... --> </nav> <!-- Конец навигации --> </header><!-- Конец шапки сайта --> <section><!-- основной блок --> <aside><!-- блок там где отображаются посты --> <!-- Начало поста --> <article> <!-- ......... --> </article> <!-- Начало поста --> <aside> <!-- блок боковой колонки --> <!-- ......... --> </aside> </div> </section> <footer><!-- Футер сайта --> <!-- ......... --> </footer> </body> </html>

Как видите, что я просто некоторые div поменял на новые теги, опять повторюсь тут ничего сложного нет, главное знать какой класс за какой участок на сайте отвечает.

Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div  с классом headerInner — <div id=»headerInner»>. Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 (<header>) можем смело его использовать вместо div  только с таким же классом. Таким образом у нас получилось следующее:

<header>

И не забываем поставить закрывающий тег </header>, а также удалить закрывающий div.

Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом <section>. В старой вёрстке этот главный блок выглядел так <div id=»wrapper»>, а в HTML5 будет выглядеть вот так <section id=»wrapper»>. И опять же не забудьте поставить закрывающий тег и удалить старый div.

Придерживайтесь такого же принципа и в других тегах на сайте. Таким образом я перевёл свой блог в HTML5. И был приятно удивлён тем, что это совсем не сложно.

Вывод

Друзья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.

Опять рекомендую Вам переходить Вам на новую технологию.

Вот и всё что хотелось сказать по этому поводу. Друзья, если у Вас что то не будет получаться, спрашивайте в комментариях, и я обязательно помогу :-) До скорых встреч.

beloweb.ru

Основы вёрстки HTML5

html5_tumblr.jpg

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

400x3001.png

Начнём работу. Первое, что стоит прописать в новом документе — это DOCTYPE:

<! doctype html>

Сразу же бросаются в глаза длина написания и маленькие буквы. Так теперь можно. От регистра вообще ничего не зависит. В прежнем формате это выглядело примерно так:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Чувствуете разницу?

Идём дальше — меняем обозначение кодировки с вот такого

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

на такое:

<meta charset=utf-8>

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

Определяем язык, пишем вместо

<html lang="ru" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

это:

<html lang=ru>

Упростились также и ссылки на стили — атрибут type исчез, теперь это выглядит так

<link rel="stylesheet" href="style.css" />

Вместо прежнего

<link rel="stylesheet" href="style.css" type="text/css" />

Не нужно добавлять атрибут type для элементов <script> и <style>. Если, конечно rel не однозначный, например, на rel=alternate.

Прежде чем перейти к контенту, стоит остановиться ещё на 1-м моменте. Это хак под IE. Explorer не понимает новых тегов, так что стоит прописать скрипт для фиксации:

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Еще необходимо сделать новые элементы блочными (это уже в css-файле):

aside, nav, footer, header, section { display: block }

Тут вроде всё разобрали, двигаемся дальше. Рассмотрим конструкцию, например, блога, в HTML4 и HTML5, а дальше я поясню различия

HTML4
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ru" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <div> Шапка <div>Навигация</div> </div> <div> <div>Пост</div> <div>Боковая колонка</div> </div> <div>Подвал</div> </body> </html>

И теперь взглянем по-новому:

HTML5
<! doctype html> <html lang=ru> <head></head> <body> <header> Шапка <nav>Навигация</nav> </header> <section> <article>Пост</article> <aside>Боковая колонка</aside> </section> <footer>Подвал</footer> </body> </html>

Как видно, всё порядком упростилось, а также появилось несколько новых тегов, которые более ясно отображают содержимое страницы для поисковых роботов.

  • <header> — шапка сайта.
  • <nav> — блок навигации. Лучше всего подходит для списка главных навигационных ссылок.
  • <aside> — боковая колонка
  • <article> — независимый текст, например, статья или 1-н комментарий.
  • <section> — раздел документа.
  • <footer> — футер сайта (подвал)

Cтоит отметить, что этот тег section во многих случаях заменяет div.

Правила по использованию тега section
  • Не надо его использовать в качестве обёртки для скриптов или как стилистический блок.
  • Не надо его использовать, если по смыслу больше подходят article, nav или aside
  • Не надо его использовать, если внутри нет логического заголовка.

Тут, кстати, интересный момент — в каждом разделе может быть свой h2, то есть теперь их может быть несколько на странице.

Дополню этот список не столь важными, но тоже полезными тегами

  • <figure> — подпись к картинке или видео.
  • <hgroup> — блок заголовков. Например, заголовок и подзаголовок.
  • <mark> — выделение важного слова (желтенький тут не спроста — это <mark> в действии).
  • <output> — вывод программы или результаты вычислений.
  • <time> — время. Время нельзя писать буквами, например, 12 апреля 2012.

У картинок исчез атрибут title (остался alt). Для полей поиска появился полезный атрибут placeholder — если он установлен, то в поле поиска появляется фраза, которая исчезает при клике на него. Например,

<input type="text" name="s" placeholder="Искать" />

Результат вы можете посмотреть у меня в боковой колонке, наверху страницы.

Это, конечно, не весь список, появилось много новых атрибутов, типов <input> и значений rel.

Конечный результат:

<! doctype html> <html lang=ru> <head> <meta charset=utf-8> <title>HTML5</title> <link rel="stylesheet" href="style.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> Шапка <nav>Навигация</nav> </header> <section> <article>Пост</article> <aside>Боковая колонка</aside> </section> <footer>Подвал</footer> </body> </html>

Я уже перевёл свой блог на HTML5, дело за вами!

Naikom » Кодинг » Вёрстка

naikom.ru

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

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

 

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

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

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

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

 

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

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

<!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. Заметьте что заголовок страницы пишем тегом h2.

<!-- Header страницы -->     <header>             <h2>Site title</h2>     </header>

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

<!-- Header страницы -->     <header>             <h2>Site title</h2>             <p>site slogan</p>     </header>

Замечание по поводу тега h2

Следует заметить что в HTML5 тег h2 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок h2! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) h3 использовался для подзаголовков, или для разделов главной статьи. h4 для под разделов и так далее.

 

Навигация на странице

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

<!-- Главная Навигация по сайту -->     <nav>         <ul>             <li><a href="#">Home</a></li>             <li><a href="#">Portfolio</a></li>             <li><a href="#">Gallery</a></li>             <li><a href="#">Contacts</a></li>         </ul>     </nav>

 

Контент на странице

Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!

<!-- Основное содержимое страниц --> <main>          ...основной контент страницы... </main>

 

Оформление статьи

Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55". Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

<main> ... <!-- Статья -->     <article>         <!-- Шапка статьи если в шапке у нас больше чем заголовок -->         <header>                      <!-- Заголовок статьи -->             <h2>Article title</h2>                          <!-- Дата публикации статьи  -->             <time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time>                      </header>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p>         <!-- Подзаголовок страницы -->         <h3>Article sub-title</h3>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p>                  <footer>             <a href="#">Читать далее</a>             <a href="#">Комментарии</a>         </footer>     </article> ... </main>

Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

 

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h2. Так колонка с сайдбаром может выглядеть следующим образом:

<!-- Сайдбар --> <div>         <!-- Виджет в сайдбаре -->         <aside>             <h2>Widget title</h2>             ...         </aside>         <!-- Виджет в сайдбаре -->         <aside>             <h2>Последние записи</h2>             ...         </aside>         <!-- Виджет в сайдбаре -->         <aside>             <h2>Популярные комментарии</h2>             ...         </aside>          </div>

 

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h2> – <h6>) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section>. Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section, наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section, но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

<h2>An Event Apart</h2> <section>     <header>         <h3>Cities</h3>     </header>     <p>Join us in these cities in 2010.</p>      <section>         <header>             <h4>Seattle</h4>         </header>         <p>Follow the yellow brick road.</p>     </section>     <section>         <header>             <h4>Boston</h4>         </header>         <p>That's Beantown to its friends.</p>     </section>     <section>         <header>             <h4>Minneapolis</h4>         </header>         <p>It's so <em>nice</em>.</p>     </section> </section> <small>Accommodation not provided.</small>

 

Подвал сайта — Footer

Подвал сайта оформляется тегом <footer>

<!-- Подвал сайта --> <footer>         <p>© 2015 Rightblog.ru Copyright</p> </footer>

 

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

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

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

 

Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.

 

Статьи и материалы по теме:http://html5forwebdesigners.com/semantics/http://habrahabr.ru/post/214407/http://www.adobe.com/devnet/archive/dreamweaver/articles/understanding-html5-semantics.htmlhttp://www.smashingmagazine.com/2011/11/html5-semantics/http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspxhttp://www.w3schools.com/html/html5_semantic_elements.asp

rightblog.ru

Как перейти с div вёрстки на разметку HTML5? - html(5), css

Предлагаю небольшой обзор стандарта HTML5. Ну есть он, каковы отличия, что нового, чем лучше старого доброго html4?

По мере популяризации стандарта, многие задались вопросом, стоит ли переписывать код разметки действующего/создаваемого сайта под новый стандарт HTML5? Если да, то как?

Заведем здесь небольшой пример для того, чтобы было дальше нагляднее.

Итак, имеем примерно такой код документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="content-type" content="text/html; charset=utf-8">        <link href="style.css" type="text/css">        <script src="script.js" type="text/javascript"></script>        <title>Заголовок</title>            </head>    <body>        <div>            <div>                <ul>                    <li>1</li>                    <li>2</li>                    <li>3</li>                </ul>            </div>        </div>                <div>            <p>Lorem ipsum</p>                    </div>        <div>            sidebar        </div>        <div>            copyright        </div>    </body></html> Стандартный двух колоночный макет, с верхним меню в шапке сайта.

Базовые теги стандарта html5:

<header> - элемент, который обозначает шапку сайта или какой-то секции. На странице может присутствовать сразу несколько элементов.

<footer> - элемент, обозначающий подвал страницы (нижней её части), также может являться нижней частью любой секции секции. На странице может присутствовать несколько таких элементов (например, подвал страницы с информацией о копирайте + элемент в каждой новости).

<nav> - элемент служит для обрамления любого меню сайта. Может располагаться (хотя и необязательно в блоке header).

<main> - элемент для отображения основного контента страницы сайта. Он НЕ должен содержать навигационные и вспомогательные блоки сайта, такие как меню, логотип, сайдбары и т.д.

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

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

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

Некоторые теги, которые могут использоваться по необходимости:

<audio>, <video> - теги для вставки аудио/видео материалов на сайт.

<time> - тег для вставки даты. Например, дата размещения статьи.

<canvas> - элемент используется для рисования двухмерных изображений с помощью скриптов (в частности Javascript). Графики на сайтах, диаграммы и т.д.

Элементы должны содержать открывающий/закрывающий теги. Вообще, это относится не только к элементам стандарта HTML5. Хотя современные браузеры и научились правильно ставить закрывающий тег, в случае отсутствия такового — правилом хорошего тона считается закрытие тегов (если речь идёт не об одиночных) самим разработчиком.

Теперь небольшая подготовительная часть, чтобы переход был минимально ощутим для старых браузеров:

Добавляем в секцию <head>:

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Для понимания неизвестных блочных элементов брузером, в файл со стилями добавляем:

footer, nav, header, section, aside {     display: block;}

Теперь посмотрим, что получится, если переписать код нашего шаблона под стандарт HTML5:

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <link href="style.css" rel="stylesheet">                <script src="script.js"></script>        <!--[if IE]>         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>        <![endif]-->        <style>            footer, nav, header, section, aside {                 display: block;            }        </style>        <title>Document</title>    </head>    <body>        <header>            <nav>                <ul>                    <li>1</li>                    <li>2</li>                    <li>3</li>                </ul>            </nav>        </header>                <main>            <p>Lorem ipsum</p>                    </main>        <aside>            sidebar        </aside>        <footer>            copyright        </footer>    </body></html>

Как видим различия?

  • Доктайп сократился и стал лаконичным. Теперь нет необходимости мучительно выбирать подходящий.
  • Пропали атрибуты type="…", MIME-типы у тегов внутри.
  • Все блоки div были заменены на семантические элементы разметки. Причем если селекторы в файле стилей не были привязаны к тегам (например, не "div.header", а ".header"), то стили без правок применятся к соответствующим элементам.

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

Это оптимизация сайта под поисковики, под всю ту широкую линейку всевозможных современных устройств, с которых могут просматриваться сайты. Новые возможности по вставке медиа материалов, дополнительные стандартные возможности при работе с формами (многие из которых раньше достигались только через подключение скриптов).

Это лишь краткий список новшеств. Надеюсь, данный экскурс поможет Вам разобраться.

Вопросы, уточнения — оставляйте в комментариях.

hellohtml.ru

Семантические элементы HTML5

html5Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div>). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.

Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div>, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны ‎глобальные атрибуты.

Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:

  • Мета содержимое
  • Потоковое содержимое
  • Секционное содержимое
  • Заголовочное содержимое
  • Текстовое содержимое
  • Встроенное содержимое
  • Интерактивное содержимое

Описание HTML5-элементов

1. Элемент <header>

Категории контента: потоковое содержимое.Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

<header> <h2>Site description</h2> <nav> <ul> <li><a href="">About</a> <li><a href="">Forum</a> <li><a href="">Download</a> </ul> </nav> </header>

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

2. Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

<nav> <ul> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> </nav>

В качестве элементов панели навигации можно использовать не только элементы списков:

<nav> <p><a href="">...</a></p> <p><a href="">...</a></p> </nav>

Также можно добавлять заголовки внутрь элемента:

<nav> <h3>...</h3> <ul> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> </nav>

3. Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article> <header> <h3>...</h3> </header> <p>...</p> <footer> Опубликовано в категории<a href="">Музыка</a>. <a href="">0 комментариев</a> </footer> </article>

4. Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article> <h2>...</h2> <section> <h3>...</h3> <p>...</p> </section> <section> <h3>...</h3> <p>...</p> </section> <p>...</p> </article>
<article> внутри <section>

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

<section> <h2>Заметки о природе</h2> <article> <h3>...</h3> <p>...</p> </article> <article> <h3>...</h3> <p>...</p> </article> </section> <section> <h2>Исторические заметки</h2> <article> <h3>...</h3> <p>...</p> </article> <article> <h3>...</h3> <p>...</p> </article> </section>

5. Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое.Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

<aside> <h3>...</h3> <p>...</p> </aside> <aside> <h3>...</h3> <p>...</p> <blockquote> <p>...<cite>...</cite>...</p> <p>...</p> </blockquote> </aside>

6. Элемент <footer>

Категории контента: потоковое содержимое.Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

<footer> <address>...</address> <small>@2014...</small> </footer>

7. Элемент <address>

Категории контента: потоковое содержимое.Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.

8. Элемент <main>

Категории контента: потоковое содержимое.Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

<body> <header> <h2>Пудель</h2> <nav> <ul> <li><a href="index.html">Главная</a></li> <li><a href="about.html">О породе</a></li> <li><a href="health.html">Здоровье</a></li> </ul> </nav> </header> <main> <section> <header> <h3>О породе</h3> <nav> <ul> <li><a href="#basic">Разновидности</a></li> <li><a href="#app">Внешний вид</a></li> <li><a href="#temp">Характер</a></li> </ul> </nav> </header> <section> <h4>Разновидности</h4> <p>...</p> </section> <section> <h4>Внешний вид</h4> <p>...</p> </section> <section> <h4>Характер</h4> <p>...</p> </section> <footer> <a href="#basic">Разновидности</a> <a href="#app">Внешний вид</a> <a href="#temp">Характер</a> </footer> </section> </main> <footer> <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small> </footer> </body>

9. Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содержимое.Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..

<figure> <img src="picture.jpg" alt="Осень"> <figcaption>Осенний лес</figcaption> </figure>

Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

margin-left: 40px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em;

10. Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.

11. Элемент <time>

Категории контента: потоковое содержимое, текстовое содержимое.Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>

12. Элемент <mark>

Категории контента: потоковое содержимое, текстовое содержимое.Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

13. Элемент <bdi>

Категории контента: потоковое содержимое, текстовое содержимое.Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.

14. Элемент <wbr>

Категории контента: потоковое содержимое, текстовое содержимое.Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.

15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое, текстовое содержимое.Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:— один и более текстовых узлов или элементов <rb>;— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

html5book.ru


Смотрите также