Верстаем сайт на HTML5 и CSS3. Часть 1

разметка сайта

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

html5css

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

demo

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

demo

Выше на изображении вы видите контент папки, содержащей финальную демоверсию страницы – как и обещано, ни одного изображения. У нас имеется страница HTML с «продвинутой» разметкой, файл CSS, содержащий стили, управляемые CSS3 и папка, содержащая несколько шрифтов, которые мы собираемся вставить, применив правило @font-face.

Как обычно, я советую расположить все содержимое сайта в файле index.html еще до того, как вам в голову придет перейти к CSS, так что давайте прямиком к этому и приступим.

Верстка на HTML5 — разработка быстрее, а код гибче

Вдобавок к размещению новых семантических элементов HTML5 еще и сильно укорачивает код.

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=UTF-8>
    <title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 &amp; CSS3</title>
    <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]-->
    <link href=styles.css rel=stylesheet />
</head>

Заметно, что они вышли гораздо аккуратнее, чем то, что у вас получилось бы, если писать HTML4 или XHTML. Объявление doctype занимает всего четыре буквы.

А вот как это было раньше:

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

Способ HTML5 гораздо лучше, правда? Далее мы открываем тэг html и устанавливаем язык документа. (Подтэг своего языка можно найти в IANA Language Subtag Registry). Еще одно заметное тут изменение – отсутствие кавычек, окружающих значение en. Вам приходилось для подтверждения правильности включать кавычки в XHTML, но исходя из того, что это HTML5, они больше не необходимы.

Может, это покажется совсем небольшим выигрышем: сколько (кило)байт вы сэкономите на нескольких кавычках? Но ведь страница грузится не единожды; со временем она вам за все отплатит. У вас в действительности может приключиться другая сложность — по привычке вы продолжите добавлять кавычки. Если в своем любимом текстовом редакторе вы пользуетесь великолепным плагином Zen Coding, то он добавляет кавычки автоматически. Единственное решение проблемы – найти и убрать их все после окончания работы над файлом.

В элементе head мы сначала определяем набор символов и добавляем заглавие. Весьма стандартно, без кавычек. Двигаясь дальше, вставляем условный комментарий, внутрь которого загружаем файл JavaScript, который поможет нам работать с Internet Explorer (IE) 8 и более ранними его версиями.

Условный комментарий – это вид HTML-комментария, который Microsoft использует в IE, по сути, для реализации отдельных (или всех) версий своего браузера.

Используемый нами здесь комментарий проверяет, является ли браузер, открывающий страницу, Internet Explorer’ом с номером версии менее 9. Другой комментарий, который мы бы использовали, это: < !-- [if lte IE 8] -- >; он проверил бы, является ли открывающий страницу браузер IE версией ниже или равной 8. По существу, между этими двумя комментариями нет разницы; они оба направлены на один ряд версий IE, так что можете взять любой.

Причина включения скрипта HTML5Shiv Реми Шарпа (Remy Sharp) кроется в отсутствии у Internet Explorer’а поддержки элементов HTML5. Проблема IE в том, что он не применяет никаких стилей CSS к элементам, которые не распознает. Таким образом, чтобы заставить более старые версии IE правильно выполнять элементы HTML5, нам нужно при помощи JavaScript создать незнакомые элементы.

Продвигаясь к тэгу body, размечаем область заголовка своей страницы, где полно элементов HTML5:

<body>
<header>
    <hgroup>
        <h1>Fictive Company Blog</h1>
        <h2>a blog showcasing the übercoolness of HTML5 &amp; CSS3</h2>
    </hgroup>
    <nav id=global>
        <ul>
            <li><a href=#>Home</a></li>
            <li><a href=#>About</a></li>
            <li id=services>
                <a href=#>Services</a>
                <ul id=subMenu>
                    <li><a href=#>Whatever</a></li>
                    <li><a href=#>Your Heart</a></li>
                    <li><a href=#>Desires</a></li>
                </ul>
            </li>
            <li><a href=#>Portfolio</a></li>
            <li><a href=#>Contact</a></li>
        </ul>
    </nav>
</header>

Элемент Header

Сразу же после открытия тэга body мы воспользуемся одним из новых элементов HTML5 – header. Вот какое определение дает элементу заголовка консорциум Word Wide Web (W3C):

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h1 и h2.

Элемент hgroup используется для группирования набора элементов h1-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h1).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как "Untitled Section" (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как "Navigation" (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

Использование nav для создания основной навигации сайта – это нечто вроде данности, но обстоятельства таковы, что на вашем сайте будет больше областей, содержащих ссылки; вопрос в том, которые из них вам следует обернуть тэгом nav. Вот некоторые примеры использования, которые, я считаю, могут подойти:

Таблица содержания (TOC) в длинном документе;

Навигация «ссылки-цепочки»;

Нумерованные ссылки типа «предыдущий/следующий» и

Связанные посты.

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

Элемент Article

Следующий элемент, который я хочу вам представить – article. Основная область нашей демо-страницы содержит три цитаты из постов, и каждую из них мы обернем в тэг article.

<article>
    <header>
        <div class=time>
            <div class=year>2010</div>
            <div class=date>16<span>apr</span></div>
        </div>
        <h1>Sample Post 1</h1>
        <div class=comments>38</div>
    </header>
    <p>Curabitur ut congue hac, diam turpis[…]</p>
    <footer>
        <em>Written by:</em> <strong>Author Name</strong>
        <span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span>
        <a class=button href=#>Continue Reading</a>
    </footer>
</article>

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

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

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

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

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

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

footer

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

Элемент section представляет общую область документа или приложения. Секция в данном случае – это тематическое группирование содержимого, обычно при помощи заголовка.

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

Как видно из спецификации, один из примеров идеального использования элемента aside – это боковая колонка. Ниже на графике можно увидеть расположение иерархии элемента aside нашей демо-страницы.

aside

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

Итак, вот и подошла к завершению первая часть нашей статьи посвящённой верстке сайта на HTML5 и CSS3. Я старался сделать ее настолько короткой, насколько можно, и не тратить слишком много времени на неопределенности в спецификации HTML5, потому что она еще не закончена. Тем временем нам придется полагаться на сообщество и труд «лекарей» HTML5, что станут нашими проводниками по внедрению новых элементов в сайты.

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

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

киберсант-вебмастер

Автор: Marko Randjelovic

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (38)

  1. Владимир

    ВЕСЬМА!!!…Очень ценный материал.Приложу максимум усилий, и обязательно его освою.Проявляеться интерес к вашим dvd…

  2. Отец Виктор

    Спасибо огромное! Попытаюсь применить на практике.

  3. Pocherk

    Спасибо за статью!
    Очень порадовала информация о скрипте HTML5Shiv Реми Шарпа. Раньше я с прохладцей относился к HTML5, т.к. в IE все эти красивости не прокатывали. Теперь буду плотно осваивать HTML5/CSS3.

  4. Андруша

    Невероятной красоты с различного рода причендалими и наворотами супер-мега-сайт вряд ли
    когда сможет занять место в топ поисоквых систем. Из за своего гнилого кода, от которого
    поисковики Яндекс и Google блевать воротят.
    В сравнение — лёгкий мини-сайт index.html — идеальна страница для поискового продвижения в
    сети интернет, в любое время способная запрыгнуть в топ, обеспечив продажи продукта в сети.

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

    • Andrey Bernacki

      В данном уроке мы не о SEO говорим, а про html5 и CSS3, которые потихоньку можно начинать применять у себя на сайтах.
      По поводу «гнилого кода»:
      1. У вас есть замечание к чистоте кода? Ну так приведите примеры, что конкретно вас не устроило — мы с удовольствием почитаем;
      2. Разметка — в общем-то стандартная для wordpress-овской темы;
      3. По поводу «лёгкий мини-сайт index.html – идеальна страница для поискового продвижения»:
      3.1. Все «различного рода причендалы и навороты» (так вы их назвали) сделаны только на CSS3 без явасриптов — то есть размер тут минимален.
      3.2. На странице нет ни одной картинки при всех его «различного рода причендалах и наворотах» — я думаю размер тут тоже снизился, особенно если учесть, что все картинки с закругленными углами и для этого нужен прозрачный png24
      4. Файл index.html валиден на 100%.
      Единственное — не валиден файл стилей. Не валиден из-за приставок для некоторых свойств под определенные движки браузеров (-moz-, -webkit-, -o-). Но я думаю решение этой проблемы не за горами.

  5. Артем

    Здравствуйте.

    Я правильно понял, что благодаря скрипту для IE, в нем будет все отображаться так-же, как и в нормальных браузерах?(имеются в виду градиенты, скругления и т.д). А статья просто клас, с нетерпением ждем вторую часть.

  6. Alex

    Просмотрел результат в opera 10.0 и ничего не работает, никаких скруглений и градиентов- почему? или как с этим бороться?

    • Andrey Bernacki

      Нужна опрера 11 — она уже давно вышла, ну или вот сейчас посмотрел в 10.51 — работает прекрасно. Так что опрера не ниже 10.51.

      • Alex

        Понятно, спасибо! Но как же быть с версиями ниже 10.51, просто не писать на html5 и CSS3 или есть какой-то выход из ситуации. Просто прикольная статья, но не хотелось бы забывать о кроссбраузности.

        • Максим

          Если не хочется забывать о кроссбраузерности, то стоит закрыть этот сайт и идти верстать под IE 5.5 )))

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

          А то что какие то эффекты не видны, так ты зайди на любой свой сайт через старый телефон, вот насмеешся то…

    • Артем

      А в opera 11.01 вроде все работает, только не большой косяк в меню навигации.

  7. Алексей

    Уважаемые Виктор и Андрей!
    Огромное спасибо за ваши мини-курсы. Найти в Астрахани разработчика веб-сайтов реально за 25 тыс. рублей за вебсайт и дальше за поддержку сайта по договорённости с разработчиком отстёгивать (это будет сайт-визитка с возможностью администрирования). Для чего мне нужен сайт? Дабы не делать рекламу на этой странице скажу пространственно. Мне нужна в интернете кнопка «Сделать деньги» — именно так и работают все инфо-бизнесмены интернета. По сути все их сайты и бесплатные рассылки ведут на скромную такую кнопку «Сделать деньги» (Оплатить заказ, купить книгу, заплатить за тренинг, перечислить деньги и т.д.) Но я решил пойти в мыслях дальше. Есть сайт, предлагающий зарабатывать и терять деньги (ссылку на него можно найти на моём сайте). Топорный интерфейс не правда ли, но здесь крутятся миллионы долларов? Вот было бы здорово получать доступ через средства интернет непосредственно на сервер к информации, передаваемой через этот сайт, по-моему удобный лишь для того, чтобы терять деньги.

  8. Ярик

    Спасибо, Андрей. У вас самые классные, обучающие статьи во всем инете. (лучше не нашел)

  9. Людмила

    Большое спасибо! Очень полезная информация.

  10. Лёха

    Интересное решение, но это заслуга только CSS3 и специфических свойств -moz-border-radius;-webkit-border-radius и пр. HTML5 здесь не причём.
    Если подумать, то чем отличается
    и от и
    я сам использую кавычки только по необходимости, если в атрибуте есть пробела и ни разу из-за этого не было никаких проблем. вадидатор не в счёт.

  11. Юлия

    Из чего напрашивается вывод: лучше по традиции html и css

  12. Сергей

    Спасибо за материал! Я считаю, что это не стандартная, а потому очень ценная информация! Я как раз сейчас начинаю разбираться со всем этим. Очень кстати!

  13. Devil_Shurik

    Интересно, как в это нарядить например блог на wordpress или сайт на joomla.
    Как из этого сделать тему?

  14. Евгений

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

  15. Алексей

    Красиво, полезно но тормозит отрисовка страницы или мне кажется? )

  16. Юлана

    Увы, красота в IE не работает.

  17. Роман

    Потормаживает динамика в разных браузерах.

  18. Евгений

    Хотелось бы на источник поглядеть!

  19. Андрей

    Большое спасибо за статью, жду продолжения.

  20. Игорь Юрьевич

    Огромное спасибо за материал. Вчера с учениками на факультативе разбирали. В Мазилле работает идеально.
    Ждём продолжения.

  21. Виктория

    Андрей! Спасибо за статью, очень интересный материал.. К сожалению, поспешила и отписалась, а теперь жалею.

  22. Лилия

    Здравствуйте! Объясните пожалуйста, как разрешается проблема со вставкой текста нестандартного шрифта и его отображения в браузерах пользователей, у которых нет на ПК этих шрифтов. Я поняла по исходникам, что шрифты встраиваются в Web. Но каким образом (процедура преобразования)?
    с уважением, Л.А.

    • Andrey Bernacki

      Про нестандартные шрифты подробно рассказано во второй части этого урока. Она уже практически готова, потерпите до следующего выпуска рассылки. Ну, если совсем срочно то на E-mail пишите.

  23. Наталия

    А с чего начать если вообще ничего не понимаеш .

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree