Верстка сайта на HTML5 с примерами

Верстка сайта на HTML5 с примерами

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

Немного лирики, via wiki. HTML5 — это пятая версия основного языка разметки веб-страниц, разработка которой началась еще в 2007 году. В настоящее время спецификация HTML5 находится в стадии разработки, закончить которую планируют в 2014 году. Все современные браузеры уже поддерживают основные элементы HTML5, за что им честь и хвала.

Прежде чем переходить к примерам верстки сайта на HTML 5, рассмотрим: теги, атрибуты и структуру HTML 5.

Полный список тегов HTML5

Для наглядности в таблице ниже представлен полный справочник тегов HTML, новые теги HTML 5 выделены.

Таблица 1. Справочник тегов HTML5
Тег Краткое описание
Определяет комментарий
Определяет тип документа
Определяет гиперссылки
Определяет аббревиатуру
Не поддерживается. Определяет акроним
Определяет элемент с адресом
Не поддерживается. Определяет апплет
Определяет область внутри изображения карты
Определяет статью
Определяет контент в стороне от основного контента страницы
Определяет аудио контент
Определяет жирный текст
Определяет базовый URL для всех относительных ссылок на странице
Не поддерживается. Используетя вместо CSS для задания шрифта
Определяет направление отображения текста
Не поддерживается. Определяет большой текст
Определяет длинную цитату
Определяет элемент тела документа

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

по

Определяет заголовок с 1 по 6 заголовок
Определяет информацию о документе
Определяет область заголовка раздела или страницы

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

      Определяет параграф (абзац)
      Определяет параметр для объекта
      Определяет выровненный (форматированный) текст
      Определяет ход выполнения задачи любого рода
      Определяет краткую цитату
      Определяет правила для обновления шаблонов
      Не поддерживается. Определяет зачеркнутый текст
      Определяет образец программного кода
      • zakladki.yandex.ru
      • google.com
      • bobrdobr.ru
      • facebook.com
      • ВКонтакте
      • twitter.com
      • mister-wong.ru
      • moemesto.ru
      • del.icio.us
      • reddit.com
      • memori.ru
      Автор статьи: 

      Используемый материал:
      • http://html5tutorial.net/
       


      10  комментариев к статье "Верстка сайта на HTML5 с примерами"

      1. Алексей, по большому счету вы можете и не заменять теги DIV на новые из HTML5, но если вам так хочется (добавить больше семантики в код), из примера можете заменить
      2. Алексей
        08.Май. в 13:58
        Подскажите пожалуйста какие теги div блоков заменить на теги HTML5 http://s019.radikal.ru/i604/1205/3b/56722aa5076e.jpg пример вёрстки
      3. Василий
        08.Январь. в 20:01
        Ребят, кто-нибудь видел пример создания водной глади на html 5? я где-то видел.. замучился искать.
      4. Спасибо, Ян и Андрей! Внесу изменения в статью. Хотя на момент написания этой статьи, было правильным считать именно такое использование данных тегов.
      5. К сожалению тег aside неправильно использовать так, как у вас в примере.
        Aside используется для публикации дополнительных материалов, например цитат, для тега articles.
        Пруф: Книга издательства Питер, «HTML5 и CSS3.» Автор: Брайан Хоган. 38 страница.
        А так спасибо за статью.
      6. В примере неправильно используются теги header и section. Вот статья на эту тему: http://habrahabr.ru/blogs/html5/124993/
      7. Отличная статья! За Html5 будущее, есть небольшие сложности, которые не любят разработчики сайтов (да и их заказчики), т.к. весь офисный планктон зачастую сидит на IE6.
      8. Спасибо. Как раз вовремя попалась статья. Удачи.
      9. Дмитрий
        07.Июнь. в 12:37
        Наоборт верстка на HTML 5 проще намного проще чем просто верстка на таблицах или дивах)) не каждый разберется в таблицах с многочисленными тэгами и блоками вечно разъезжающимися.
      10. Артиом
        07.Март. в 22:42
        Мне кажется вёрстка сайта на ШТМЛ5 сложна для начинающих. Я ещё даже на таблицах верстаю,конечно уже перехожу на блочную, но всётаки ШТМЛ для профи =).

      Добавить комментарий






      Ваша оценка:

      Свежие статьи

      • 08 апреля 2012г. –  Кодинг

        Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев

        Всем привет.

        Сразу хочу отметить, что если мы говорим об иконках, их можно масштабировать двумя способами (других я просто не знаю): конвертировать иконки в шрифт и подключать их через @font-face, либо использовать SVG в качестве формата для этих иконок.

        Немного отойду от темы и расскажу предысторию.

        Предыстория

        Я было решил использовать у себя на сайте шрифтовые иконки, казалось бы все хорошо: и размер менять можно, и цвет задавать и запрос к серверу всего один (на подключение шрифта). Другими словами, подключаемый шрифт это и есть своеобразный «CSS спрайт», верно?

        Я давай проверять, везде ли все красиво выглядит. Оказалось, что не все так хорошо как хотелось бы, потому как в некоторых размерах иконки выглядели кособокими, а при отключенном сглаживании вообще противно смотреть на них стало. Что делать? Использовать второй вариант — SVG, о чем и пойдет речь.

        Читать далее →
      • 11 февраля 2012г. –  Кодинг

        Realtime xRTML — новый html-подобный язык разметки

        Речь пойдет о новом запатентованном HTML-подобном языке разметки — xRTML, который позволяет редактировать функции сайта в реальном времени без использования Ajax.

        Читать далее →
      • 10 марта 2011г. –  Интернет

        Рамблер Нихром. Коротко о главном

        В начале февраля 2011 года компания Rambler выпустила в свет свой собственный браузер — Нихром, созданный на базе движка Chromium от Google.

        На первый взгляд Rambler Нихром ничем не отличается от Google Chrome, разве что панелью закладок сервисов Рамблера, однако, при близком рассмотрении, можно увидеть кое-что еще.

        Читать далее →
      • 22 февраля 2011г. –  Кодинг

        Верстка сайта на HTML5 с примерами

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

        Читать далее →
      • 30 января 2011г. –  Кодинг

        Блочная верстка сайта

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

        Читать далее →
      • 30 января 2011г. –  Кодинг

        Ручная верстка: преимущества и недостатки

        В этой статье рассмотрим преимущества и недостатки ручной верстки страниц сайта, а так же узнаем как верстают профессионалы. Набор инструментов, помогающих быстро верстать «руками». В чем основные сложности ручной верстки. Стоит ли использовать фреймворк и какой он должен быть?

        Читать далее →

      Статьи по тегам