Верстка на HTML5

    html5

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

    Итак, новый doctype выглядит превосходно! Можно выучить наизусть.
    <!DOCTYPE html>
    * This source code was highlighted with Source Code Highlighter.

    В HTML5 введены некоторые структурные элементы, о которых многие наверное слышали, но все же кратко:

    <section>

    Элемент группирует тематические блоки. section могут быть вложены друг в друга.

    <header>

    Содержит в себе заголовок какой либо секции, таблицы и т.д.

    <footer>

    Обычно включает в себя копирайт или контактную информацию.

    <nav>

    Определяет область навигации, обычно список ссылок.

    <article>

    Отдельная запись в блоге или статья на сайте.

    <aside>

    Вторичный контент, обычно находится в стороне от основного.

    В последних версиях всех современных браузеров, кроме, всеми любимого, Internet Explorer эти элементы поддерживаются по умолчанию. Но при помощи волшебного пендаля небольшого javascript и он начинает понимать.
    <script>
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
    </script>

    * This source code was highlighted with Source Code Highlighter.

    Тот же код можно загрузить с google:
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    * This source code was highlighted with Source Code Highlighter.

    По умолчанию, во всех браузерах новые элементы будут инлайновыми, поэтому еще нужно добавить такой CSS:
    header,
    nav,
    section,
    article,
    aside,
    footer {
      display: block
    }


    * This source code was highlighted with Source Code Highlighter.


    Подготовка закончена, приступим:

    Сделаем классическую схему для блога:

    В реализации на html5 это выглядит примерно так:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <title>Simple HTML5 blog</title>
        <!--[if IE]>
            <script>
                document.createElement('header');
                document.createElement('nav');
                document.createElement('section');
                document.createElement('article');
                document.createElement('aside');
                document.createElement('footer');
            </script>
        <![endif]-->
        <style>
            styles
        </style>
    </head>
    <body>
    <header>
        blog header
    </header>
    <nav>
        navigation
    </nav>
    <section>
        <article>
            <header>
                Article header
            </header>
            Article
        </article>
        <article>
            <header>
                Article header
            </header>
            Article
        </article>
    </section>
    <aside>
        sidebar content
    </aside>
    <footer>
        copyright
    </footer>
    </body>
    </html>


    * This source code was highlighted with Source Code Highlighter.


    Рабочий пример



    P.S.: С валидацией все ок!
    Стандартный валидатор уже понимает html5.
    Share post

    Similar posts

    Comments 122

      +91
      Каждый раз, как вижу эту шестипалую руку, вздрагиваю.
        –2
        Я тоже, но ничего симпатичнее на тему html5, так сходу не нашел
        +2
        html мутировал =)
          0
          и распальцевался :)
            0
            Когда все таки заработает, то точно будет распальцовка, в хорошем смысле.
              0
              да, я тоже очень жду внедрения html5 и css3 в реальную практику web-разработки. однако, памятуя о Майкрософте и планируемой цифре 2022…
          0
          А что вы хотели, времена сейчас голодные, надо же какие — то более существенные преимущества на рынке труда, так раз, а у тебя по 6 пальцев, начальник отдела кадров закинет голову, в попытке подсчитать насколько же больше ты кода напишешь по сравнению с твоим пятипалым собратом, подумает, подумает да и возьмёт тебя на работу, так что даёшь эволюцию!
            0
            Это концепт HTML 5 долой стандарты :)
              0
              будущее гредёт =)
              правда страшное оно… шестипалое =)
                0
                У меня эта рука ассоциируется с чемто неочень хорошим, например с ie6…
                +9
                ХТМЛ5 в массы, разработчиков ИЕ на кол, больше сайтов хороших и валидатных. Когда собственно стандарт этот примут уже? Я уже 5 лет жду когда css3 будет повсеместно, однако воз и ныне там.
                  0
                  по слухам примут в 2022 году, так что долго еще ждать :(
                  А про цсс3 ты зря так, он уже достаточно активно используется
                  • UFO just landed and posted this here
                      0
                      ИМХО подобная аналитика зависит от одного параметра, когда IE(n) с поддержкой HTML5, вытеснит браузеры без оной.
                        +2
                        вытеснит IE без оной
                        • UFO just landed and posted this here
                      +2
                      А я вот все жду, когда css 2 нормально начнет поддерживаться, по стандартам — без сюрпризов
                      +14
                      А я вздрогнул, когда увидел, что в новом доктайпе упоминается Source Code Highlighter.
                        0
                        Это Хабр стандарт :~D
                        –2
                        У кулака на рисунке шесть пальцев 0_0
                          +5
                          Ой уже об этом сказали, простите…
                            –11
                            Спасибо, кэп!
                            0
                            Довольно удобно становится верстать… И с новыми тегами разметка будет выглядеть логично и понятно.
                            За обзор, спасибо.
                              –6
                              да, все очень круто в плане этого стандарта, но все как будто забыли про ie6, да и вообще про старые браузеры… на самом деле и в них всех это будет работать, только прийдется прописывать не только display: block; но и overflow: show; и ещё много всего, мне кажется этот стандарт — неболее чем заготовка на будущее, сейчас его ещё рано эксплуатировать ;)
                                –1
                                Извините, может я чего не понял, но причем тут старые браузеры и html5?
                                  –1
                                  да при том, что они к сожалению ещё очень у многих и реально ie6 умрет не раньше чем через лет 5-7 а пока мы должны делать сайт для всех, а не накласть на «лошьё» которое юзает старье…
                                    0
                                    0
                                    Полтора — два года осталось ему (ie6), не больше.
                                      0
                                      да Вы оптимисты с уважаемым s_a_p такие разговоры уже года 3 идут… ну 3 года это я за ними наблюдаю, а так может и гораздо больше :)
                                      а принуждение пользователя — дикий метод, 10 лет верстальщики старались сами стать умнее, чтобы все было хорошо, а теперь решили пользователей учить, но это врядли поможет… к сожалению Вы идеалисты и судите пользователя по себе, а он на самом деле совсем другое существо…
                                      Ещё раз: у меня в универе почти 2000 компов, 90% это IE6 и они пойдут на другой аналогичный сайт, но не станут ставить другой браузер, потому что это почти непостижимо для их сознания, и никто никогда не станет менять эту традицию… тут людям проще купить веб-студия, благо денег куры не клюют, как-никак ОАО РЖД, но браузер менять не станут…
                                        –2
                                        достаточно новой популярной винды. такой же популярной как и хр
                                  0
                                  велкам из анабиоза, ие6 уже официально похоронили как производитель, так и прогеры и пользователи. Еще две недели назад как минимум
                                    +1
                                    Подскажите что за столь знаменательного было две недели назад. Я просто был в отпуске и все пропустил видимо.
                                      +3
                                      А сам похороненный в курсе?:)
                                        0
                                        да знаем-знаем, только Вы наверно думаете что 1% пользователей — цифра ничтожная и их можно похоронить, а ведь IE6 пользуется гораздо больше пользователей, тем более на постсоветском пространстве
                                          –1
                                          Но позвольте! Разве на selector.habrahabr.ru/blog/67027/ не сказано, что разработчик IE поведал, что Microsoft намерен поддерживать IE, входящий в состав Windows, на протяжении расширенного жизненного цикла Windows XP — то есть до апреля 2014 года?
                                            0
                                            Пускай поддерживают хоть вечно, но когда пользователи IE6 не смогут пользоваться самыми распространенными сайтами, и каждый второй обычный сайт будет посылать их, им придется поставить более современный браузер.
                                            0
                                            Хабропионэры такие пионэры…
                                            0
                                            Когда выйдет стандарт, ie6 будут пользоваться максимум 1-2%
                                              –1
                                              откуда такие глупости? — у нас в стране ие6 будут пользоваться ещё очень и очень долго, у меня в университете стоит почти 2 тысячи компов — 90% пользователей это ie6 и так почти во всех крупных компаниях…
                                                0
                                                У вашего админа работы на 15 минут в универе: настроить автоматическое обновление по сети у всех компов. Это возможно сделать удалённо и для всех машин сразу. После этого дать задание администраторам компьютерных кабинетов нажать на кнопочку обновить на каждом компе (тетёнька это сделает, эй за это деньги платят, тем более в кабинете штук 10 компов всего). И, вуаля, на следующий день 2000 компов с Internet Explorer 8.

                                                А если автоматическое обновление настроено, то тогда админу надо только администраторам о кнопочке сообщить и всё. Проблема надумана.
                                                  0
                                                  Вы плохо представляете себе крупную компанию, тем более универ… там не меняют не потому что это сложно для компов… это сложно для людей, они не могут с 8 попыток сменить пароль в Novel'е а Вы хотите чтобы они понимали что такое браузер ;)
                                                    0
                                                    странный довод, IE6 появился вроде не до нашей эры. Как же ваш универ умудрился перейти на WinXP, а не остался на Windows 3.1? Или раньше компьютеров было меньше? 2-3 года и от браузера IE6 останутся воспоминания, как это было с IE 3.0, 4.0…
                                              +1
                                              overflow: што?
                                                0
                                                visible конечно, я в данный момент на jQuery просто кодю :)
                                                  0
                                                  [зануда mode]
                                                  окститесь, батенька. на jQuery нельзя кодить. Можно кодить с помощью jQuery на javascript :)
                                                  [/зануда mode]
                                                    0
                                                    Я обычно на ssh кодю, но щас перешел на putty.
                                            +4
                                            и в чем профит кроме семантики? стили такие же, как были бы с н-ным количеством дивов и классов.
                                            даешь примеры с нововведениями хтмл5! (video, audio, border-radius, ой, я уж и на css3 замахнулся)
                                              +1
                                              вот-вот, а css3 вообще ещё очень далек от реального внедрения в массы…
                                            • UFO just landed and posted this here
                                                0
                                                Да точно, совсем забыл ;)
                                                Спасибо
                                                +2
                                                По моему в коде не хватает открывающего <body>
                                                  0
                                                  спасибо, поправил
                                                  • UFO just landed and posted this here
                                                    +1
                                                    Отлично, хочу еще статью про остальные элементы html5. Про основные теги header, footer, nav, и.т.д уже наслышан.
                                                      0
                                                      Было бы круто, если footer имел параметр типа «прижать к низу». Доктайп тоже здоровский :)
                                                        0
                                                        Это к семантике не относится :-P
                                                          0
                                                          Css sticky footer гуглите.
                                                            0
                                                            Это понятно: css, фиксы, но было бы удобнее одним параметром это делать.
                                                          –3
                                                          Не советую пользоваться, пока что div#header дает больше гибкости, да и поддержки этих тегов толком нет.
                                                            +1
                                                            вы про что? какая гибкость, какой поддержка нет?
                                                              –3
                                                              Поддержки нет в ИЕ например, яваскрипт — уродливый костыль, а дивы не ограничивают только указанными разделаит, можно добавить свой например div#comments, хотя в общем то я за HTML 5, но когда он будет нормально поддерживаться и отображиться даже в links.
                                                                +2
                                                                Товарищ, вы в курсе что многие люди не знают английского и русского языка (не поддерживается мозгом). Так что, теперь английский и русский запрещать?
                                                                  0
                                                                  Прочитаите пожалуйста ещё раз ветку.
                                                              +2
                                                              Тут можно посмотреть как обстоят дела с поддержкой текущих и будущих веб-технологий в браузерах.
                                                                0
                                                                Эта страница погрузила меня в глубокую депрессию. Этот мир безнадёжен. Waiting for IE8 to expire, убейте меня кто-нибудь, я уже буду дряхлым стариком :/
                                                                0
                                                                Открыл пример в IE6 — и он там работает… я наверно Коперфильд? :)
                                                                • UFO just landed and posted this here
                                                                    +2
                                                                    Хм, так а в чем тогда заключается его поддержка? После
                                                                    with(document) {
                                                                    	createElement('shapka');
                                                                    	createElement('valenki');
                                                                    }

                                                                    Он и эти теги начинает понимать :)
                                                                      0
                                                                      вот именно, не поверете, но все браузеры кроме ie6 и без JS понимают теги, просто есть новый стандарт, который есть и все тут и он стандарт, исходя из него будут делаться новые браузеры, но это не значит что мы должны и сайт писать пользуясь этим стандартом…
                                                                        0
                                                                        теги,
                                                                          0
                                                                          да что же это такое =)
                                                                          теги: <shapka></shapka> и <valenki></valenki>
                                                                      0
                                                                      CSS немного не сработал только, но в принципе всё сверсталось правильно. Жду не дождусь утверждения HTML5.
                                                                        0
                                                                        а толку-то от утверждения… Вы чисто для себя верстки собираетесь делать и Вам просот хочется чтобы все было по стандартам, но как можно проще или верстка все таки для пользователя и ему смотреть Ваши сайт, причем ему смотреть их не в Chrom'e и не в Safari а в IE6 ;)
                                                                          +1
                                                                          Ну, как я выше написал, в IE6 оказалась очень широкая поддержка различных тегов :)
                                                                            0
                                                                            так в том-то все и дело что в любом браузере можно создать абсолютно любые теги, но это же ещё не значит что это новый стандарт, в IE6 грош цена всем этим тегам… и не только в нем эта широкая поддержка есть (ну Вы это тоже примерно писали, просто ещё раз подтверждаю :)
                                                                              +1
                                                                              CSS2 — он стандарт или нет? Напомню, что в IE6 грош цена всем этим селекторам типа «a>a» и «div:hover» =)

                                                                              Стандарт — это то, чему все решили следовать (и производители браузеров, и разработчики). Если все решили использовать CSS2, а в IE6 это выливается в дополнительный файлик со стилями, то CSS2 от этого меньше стандартом не станет.

                                                                              Так что с HTML5 сейчас такая же ситуация, как и с CSS2 года три назад. Хотя нет, даже лучше, потому как при переходе с HTML4 на HTML5 в IE6 проблем должно быть поменьше, чем при переходе с использования визуальных тегов и табличной верстки на CSS — это потому, что custom tags есть документированная возможность всех IE, начиная с пятой версии (ну, например, см. тут: msdn.microsoft.com/en-us/library/ms531076%28VS.85%29.aspx), а недостающий функционал (видео/канвас/прочее) уже давно реализуется и без поддержки оного в браузерах.
                                                                                0
                                                                                а я разве спорю с этим, но вообще-то сейчас с CSS2 ситуация тоже далеко не однозначная, он мне реально очень нравится, но нормально в нем развернуться нельзя, поэтому он существует как стандарт, не спорю, его синтаксис реализован в селекторах jQuery это тоже очень круто, но Вы сами-то им часто пользуетесь во время верстки?
                                                                                  0
                                                                                  > но Вы сами-то им часто пользуетесь во время верстки?

                                                                                  Не поверите, часто =)
                                                                                  Самый логичный путь сейчас в большинстве случаев — заверстать по стандартам (ориентируясь, скажем, на Firefox 3.5), а потом доточить под IE6 (но без фанатизма) дополнительно подключаемыми стилями и js-ом, а экзотику типа «IE6 с отключенными скриптами» рассматривать в вопросах верстки вообще не стоит.

                                                                                  Если есть сомнения, что работает почти всегда — бросьте «невозможным» макетом в личку, на досуге сверстаю =)
                                                                                    0
                                                                                    но действительно ли в этом есть логика… я хочу взглянуть на пару тройку Ваших макетов с CSS2. Ну просто мне кажется гораздо проще делать без него, все получается просто и быстро и без возможностей CSS2 ;)
                                                                            0
                                                                            Если делать сайт чисто для своих целей, то в случае ИЕ6 я просто напишу «Идиотов не обслуживаем» и отправлю на getfirefox.com.

                                                                            Для других же случаев (как-то сайт на заказ) придется немножко наступить на горло собственной песне, к сожалению :(
                                                                              0
                                                                              ну да, у верстальщиков работа такая — наступать себе на горло, это начаялось ещё тогда, когда и я и Вы ещё пешком под стол ходили, а мы должны продолжать традицию, потому что мирного выхода из этого замкнутого круга нет :(
                                                                        0
                                                                        да уж, правила цсс действительно с новыми тегами должны стать понятнее. не говоря уже про поисковики, которые при использовании хтмл5 смогут наконец понимать структуру страниц (например выдергивать контент и навигацию).
                                                                          0
                                                                          ну-ну… смогут понимать… как же. Прям так они и доверились
                                                                            +1
                                                                            +1 Они бы и щас все нормально понимали бы, если б не люди… как всегда в жизни роботов единственным неадекватным звеном является — человек :)
                                                                              0
                                                                              не вижу проблемы. сверстан сайт нормально, с правильно использованными тегами nav, article, aside, footer — берем информацию с них и выводим в сниппете (см. гугл и яндекс). нет — пробуем что-то выудить самостоятельно, получится плохо — проблема владельца сайта. ну и ручную проверку еще никто не отменял.
                                                                                0
                                                                                так все вручную не проверишь, а дело не в том что плохо сверстано, и сами виноваты кто плохо сделал, а начнется флуд в наиболее важные блоки со стороны контентщиков
                                                                        • UFO just landed and posted this here
                                                                            +5
                                                                            Опять aside для сайдбара… ну не для этого он!
                                                                            • UFO just landed and posted this here
                                                                                –1
                                                                                aside — это врезка в текст. Обычно делалась div + float: right или left.
                                                                                • UFO just landed and posted this here
                                                                                    0
                                                                                    Изначально они просто блочные… ну кроме конечно IE, которому надо ещё это задать.
                                                                                    0
                                                                                    На w3c в описании элемента, вроде бы, есть предложение, что aside используется также в качестве секций, которые в печати являются боковыми колонками.
                                                                                      0
                                                                                      Где? Процитируйте, если не трудно.
                                                                                        0
                                                                                        The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

                                                                                        Поправьте, если я не так понял.
                                                                                          0
                                                                                          Ну… немного не так. В вебе и в типограции определения сайдбара разные. Поэтому я и назвал его врезкой. Вот из толкового словаря:

                                                                                          a short news story or graphic accompanying and presenting sidelights of a major story
                                                                                            0
                                                                                            В любом случае списабо. Я почему-то и не думал использовать его в качестве иллюстраций к тесту и подобных элементов.
                                                                                            • UFO just landed and posted this here
                                                                                                +1
                                                                                                Вполне. А вот прямой эфир — уже не то.
                                                                                  –3
                                                                                  Большинство браузеров уже понимают новые структурные...

                                                                                  Вы позор для племени верстальщиков. Честно. «Большинство браузеров» не равно «большинство пользователей». Учитесь работать. Заебали.
                                                                                    0
                                                                                    В данном случае всё же равно — если сосчитать и Explorer, которому дали пинка джаваскриптом.
                                                                                      0
                                                                                      Что-то как-то зло вы реагируете. «Большинство пользователей» все равно тянутся за «продвинутыми пользователями». И успех FF это демонстрирует.

                                                                                      Любой пользователь, средненький, рано или поздно спросит у пользователя продвинутого:

                                                                                      — А как мне защитить свой компьютер от атак из сети?

                                                                                      И получит ответ:

                                                                                      — Откажитесь от ИЕ.

                                                                                      Если ИЕ так и будет пытаться диктовать свои правила, то доля сайтов, на которых будет написано: «данный сайт не для просмотра в ИЕ» — будет расти. На счет «Учитесь работать» — это вы зря так.
                                                                                        +1
                                                                                        Учитесь работать. Учитесь верстать. IE — это не только IE-6. Заели уже. IE8 — вполне нормальный браузер, и я как «продвинутый» не заставляю своих знакомых отказываться от вполне привычной им программы. Хотят пользоваться IE-8, которая у них «случайно сама установилась при обновлении» — пускай пользуются. Когда у них стоял IE-6 — предлагал им установить Оперу или FF, но не из за того, что не умею сверстать под этот браузер, а из за того, что это реально опасно для компьютера.
                                                                                        Все эти вопли про HTML-5 и «IE-6 must die» — от собственного слабосилия.
                                                                                          +1
                                                                                          А какая связь между фразой «Учитесь работать» и темой статьи? У вас что, есть сведения, что автор поста не умеет верстать под ИЕ? Вообще это плохой стиль спора, когда вы переходите от темы на личности.

                                                                                          Я вот например, когда верстаю, примерно 60% времени трачу на собственно верстку, а 40% на борьбу с ИЕ. И я с огромным удовольствием перестану бороться с ИЕ, как только доля ИЕ упадет до 20%. Потому что моя цель делать сайты, а не бороться с непредсказуемостью.

                                                                                            0
                                                                                            Я 80% трачу на созерцание psd-макета. 19.9999999 — на верстку. 0.0000001 — на то что бы поставить «звездочку» (*HTML).
                                                                                        0
                                                                                        Я не знаю в каком племени вы живете, но я живу в обществе. Если вы сравниваете себя с первобытными людьми, пожалуйста, но остальных не надо.

                                                                                        Если взять к примеру эту статистику, то суммарно пользователи ie составляют примерно 37,5%, в то время как пользователи последних версий других браузеров составляют примерно 57%, а это большинство.
                                                                                        Учитесь считать неандерталец.
                                                                                          0
                                                                                          то суммарно пользователи ie составляют примерно 37,5%
                                                                                          И эти 37 с половиной процентов тоже неандертальцы и их в расчет не берем?
                                                                                            +1
                                                                                            Вы статью читали, вообще? Там не говорится о том что ие говно и так далее. Все то о чем написано в статье работает так же и в ие, так что в расчет берем всех ;)
                                                                                        0
                                                                                        Видел эту статью уже с десяток раз на разных ресурсах, странно что здесь она впервой.
                                                                                        Стоило описать вкратце и другие вкусные тэги хтмл5
                                                                                          –6
                                                                                          У кулака на картинке 6 пальцев :)))
                                                                                            0
                                                                                            О, новый стандарт, новые заглушки для IE!
                                                                                            Замечательно!
                                                                                              +2
                                                                                              А никто не обмолвился что MathML и SVG в HTML5 можно инлайнить
                                                                                              • UFO just landed and posted this here
                                                                                                  0
                                                                                                  Да как бы есть давно где хотели
                                                                                              • UFO just landed and posted this here
                                                                                                  0
                                                                                                  Спасибо!
                                                                                                    0
                                                                                                    Пример — 404, даже домен другой.
                                                                                                      0
                                                                                                      да, за четыре года многое может измениться…

                                                                                                    Only users with full accounts can post comments. Log in, please.