Чёртова дюжина советов начинающим верстальщикам. Часть первая

    Доброго времени суток!

    Введение


    Я являюсь фрилансером. Раньше я не особо задумывался над тем, как и что делают верстальщики. Я делал серверную часть, а мой друг верстал и набивал контент. Совсем недавно мне захотелось попробовать «что и как». Пару дней назад мне на глаза попался материал, который мне очень понравился. Он наглядно обЪяснял, что и как нужно писать. К сожалению, сылку дать не могу, так как я не запаомнил, где располагался сей мануал, но… Казалось бы, можно это и запомнить, но я пошёл ещё одним путём — законспектировал это дело. Собственно, добро пожаловать в мою записку.


    Новый Doctype


    Вы ещё используете этот старый, дряхлый, покрытый морщинами доктайп?

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


    Если да, то почему? Пора бы уже перейти к новому доктайпу, который пришёл к нам вместе с HTML5:

    <!DOCTYPE html>
    

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

    Элемент figure


    Ранее вы не раз использовали подобную разметку:

        <img src="path/to/image" alt="Не видно? Включите просмотр изображений в настройках!" />  
        <p>Image of Mars. </p>  
    

    Но, к сожалению, здесь мы не видим лёгкого способа добавить заголовок к нашему изображению. При разработке стандарта HTML5 это учли и решили эту проблему путём добавления элемента figure. В сочетании с figcaption мы можем легко присвоить заголовок или подпись к нашему изображению без дополнительных танцев с бубном. Вот так, например:

        <figure>  
            <img src="path/to/image" alt="Не видно? Включите просмотр изображений в настройках!" />  
            <figcaption>  
                <p>Здесь изображено что-то очень интересное.</p>  
            </figcaption>  
        </figure>  
    


    Поехали дальше.

    Больше никаких типов для элементов script и link


    Раньше многие писали следующую разметку:

        <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />  
        <script type="text/javascript" src="path/to/script.js"></script>  
    

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

        <link rel="stylesheet" href="path/to/stylesheet.css" />  
        <script src="path/to/script.js"></script>  
    


    Кавычки или без кавычек — вот в чём вопрос


    Действительно, вопрос. Помните, HTML5 — не XHTML. Вам не следует оборачивать ваши атрибуты в кавычки, если вы не хотите этого делать. В этом нет ничего постыдного и неправильного, если вы чувствуете себя в таком коде, «как рыба в воде»:

    <p class = myClass id= someId>Что, чёрт возьми, вы здесь делаете?</p>
    


    Сделаете ваш контент редактируемым на ходу


    HTML5 представляет web-разработчикам новую, не менее прекрасную возможность. Такой возможностью является изменяемый контент. Представьте, мы читаем Википедию и вдруг замечаем, что кто-то из авторов ошибся (ну, с кем не бывает). С использованием сей возможности у нас появляется возможность просто тапнуть по тексту и буквально «в два щелчка» в два клика этот текст исправить. Вот пример разметки:

        <!DOCTYPE html>  
         <html lang="en">  
        <head>  
            <meta charset="utf-8">  
            <title>untitled</title>  
        </head>  
        <body>  
            <h2> To-Do List </h2>  
             <ul contenteditable="true">  
                <li> Проснуться. </li>  
                <li> Выпить кофе. </li>  
                <li> Пойти куда-нибудь наконец! </li>  
             </ul>  
        </body>  
        </html>  
    


    Или сделать это в таблицах стиля:

        <ul contenteditable = true>  
    


    Вуаля:



    Поле для ввода E-mail


    Раньше всем приходилось предоставлять обычные поля для ввода и проверять верность данных на серверной части. Теперь же это делается на клиентской стороне, не загружая лишними запросами наш сервер. Старые же браузеры (все догадываются, о ком это я) при встрече с новым видом инпута упадут и попросят прикончить их отрендерят обычный текстовый инпут. Делается это очень легко. Так, например:

    <!DOCTYPE html>  
      <html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <title>untitled</title>  
    </head>  
    <body>  
        <form action="" method="get">  
            <label for="email">Email:</label>  
            <input id="email" name="email" type="email" />  
            <button type="submit"> Submit Form </button>  
        </form>  
    </body>  
    </html>
    


    И выглядеть это будет так:



    Или вот так. Пфф…



    Данное поле сразу предупредит вас о том, что вы ввели не валидный e-mail адрес. В случае же, если всё хорошо (а у IE всегда всё хорошо), данные отправляются к нам на сервер.

    Тёмная лошадка aka placeholders


    Опять же, ранее мы путём дикого скриптования на JavaScript делали подсказку в текстбоксе. По нажатию на этот текстбокс подсказка исчезала. Сегодня нам не нужно об этом заботиться — ведь у нас есть placeholders.
    Использовать, нельзя помиловать. Вот так:

    <input name="email" type="email" placeholder="Здесь можно что-то написать!" />
    


    А что?



    Заголовок и подвал


    Теперь нам не нужно городить огороды с id, чтобы указать, где находится шапка нашго сайта (или же заголовок, что одно и то же), а где — подвал. По типу таких:

       <div id="header">  
         <p>Ничего</p>  
       </div>  
      <div id="footer">  
         <p>Всё ещё ничего</p>
       </div>
    

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

        <header>  
         3000 км над землёй.
        </header>  
          
        <footer>  
         -3000 км под. Под землёй.
        </footer>  
    


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

    Internet Explorer и HTML5 — реальность или выдумка


    Старые версии IE не хотят дружить с HTML5. Хоть убей, чем сейчас и заняты в Microsoft. Наша задача — их подружить.
    Первый способ — испольовать для этого JavaScript и CSS. Сначала нужно стилизовать новые элементы. Вот так, например:

    header, footer, article, section, nav, menu, hgroup {  
       display: block;  
    }
    


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

    document.createElement("article");  
    document.createElement("footer");  
    document.createElement("header");  
    document.createElement("hgroup");  
    document.createElement("nav");  
    document.createElement("menu"); 
    


    Вот и всё, Сид. Ты попался Теперь мы можем использовать данные теги где нашей душе захочется. Чтобы не повторять написание этого велосипеда от раза к разу, Реми Шарп предложил это, чтобы упростить процесс обучения строптивого IE. Включать данный скрипт в наш проект следует следующим способом:

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


    На данный момент IE обновляется и уже в некоторых Developer Preview версиях, вы можете тестировать поддержку HTML5 в Internet Explorer. Да, да, вы не ослышались — именно HTML5.

    Элемент hgroup


    Опять семантика. Представьте, что у вас на сайте есть блок с категориями блога, а ниже сами темы. Разумеется, при нажатии блока с категориями вылезают существующие темы. Легко заметить, что эти самые блоки находятся в роственных отношениях. Да, да — семейка Адамсов.
    Теперь, на уровне семантики, мы можем это доказать. Вот так:

        <header>  
            <hgroup>  
                <h1> Пфф... </h1>  
                <h2> Как я провёл это лето. </h2>  
            </hgroup>  
        </header>  
    


    Комментарии излишни.

    Атрибут Required


    Представьте, что мы имеем форму регистрации. Нам непременно нужно дать пользователю понять, что есть поля ввода, которые обязательно нужно заполнить.
    Ранее это делалось так: пользователь вводил данные, отправлял их на сервер путём нажатия на кнопку «Пуск», а дальше за дело брался скрипт, который проверял валидность формата введённых данных и если какое-либо из обязательных полей заполнено не было, то мы выдавали пользователю ошибку.
    Теперь же это легко осуществляется на клиентской стороне клиента. Просто добавьте атрибут required к текстбоксу. Так, например:

        <form method="post" action="">  
            <label for="someInput">Ваше имя: </label>  
            <input type="text" id="someInput" name="someInput" placeholder="Bill" required>  
            <button type="submit">Оке</button>  
        </form>
    




    А что я? Я ничего!

    Заключение


    В данном топиеке я хотел и дал советы начинающим web-программистам, а если быть точнее верстальщикам, как надо писать код.

    До скорых встреч!
    Метки:
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 186
    • +39
      В случае же, если всё хорошо (а у IE всегда всё хорошо)

      Это прекрасно
      • +2
        И не говорите.
        • +7
          Недавно переписывал с нуля одно свое старое приложение. Просмотрел статистику использования новых браузеров и решился применять различные HTML5 изыски, вроде placeholder, type=«email» и им же подобные. В итоге выяснилось, что у 10% пользователей были проблемы с регистрацией. Причем они пользовались судя по логам не IE, а Opera, только не обновлялись.

          Мне кажется, что в данном случае нужно быть более решительным. Дописывать костыли к неработающему placeholder очень не хочется, потому что за этими костылями посыпятся и другие. Все, что я сделал это редирект для браузеров не поддерживающих HTML5 с ссылками на последние обновления.
          • +1
            Ну зачастую подобные костыли представляют собой готовые решения, которые достаточно только подключить к вашей страничке.
            • +5
              пока именно прикручивание этих костылей и останавливает меня от использования HTML5 в том объеме, в каком хочется.
              CSS 3 испльзую, т.к. всякие тенюшечки и скругленные уголки не смертельны (если их не видно), а вот те же проблемы с регистрацией, увы, критичны
              • +1
                Абсолютно согласен с Вами, но тогда просто пропадает смысл в использовании HTML5 как чего-то современного и лишающего гемороя разработчика и верстальщика.
                • +1
                  Стандартизация костылей это тоже профит ;)
              • +2
                А вы переводите пользователей в деньги, потеряв 10% пользователей вы теряете 10% денег, решительности станет намного меньше. Ну а заставить пользователя обновлять браузер чтобы он имел возможность отдать вам часть своих денег (ну или просто помог зарабоать) тоже не вариант, пользователь лучше пойдет к конкуренту.

                Это конечно все грустно, да, но это реальность, против нее не попрешь.
                • 0
                  Тут не поспоришь. Но в идеале, лучше было бы, если бы большая часть разработчиков делала, как я и не пускала на свой сайт со старым браузером. Все стандарты быстрее бы ужились и головной боли стало бы меньше.
                  • +2
                    А вы рассматривайте потерю 10% денег — как инвестиции в будущее
                    • 0
                      Нет, это инвестиции в конкурентов. Если пользователь не может пользоваться вашим сайтом он уйдет к конкуренту, и друзьям скажет «туда не ходите, там нифига не работает, а вот там все отлично»
                      • 0
                        Да блин, те кто ходят покупать что-то с 9-й оперы и 6-го осла — явно, ммм..., не хабровчане. Так дайте им скидку 1-3% за то что они БЕСПЛАТНО обновят свой браузер. Они поведутся, я гарантирую это :) (доказательства? пожалуйста, в подъезде: уже несколько лет в бесплатных газетенках торговых сетей ТОЛЬКО ОДИН АРГУМЕНТ — скидки!)
              • +9
                >> Раньше я не особо задумывался над тем, как и что делают верстальщики. Пару дней назад мне на глаза попался материал, который мне очень понравился.
                >> В данном топиеке я хотел и дал советы начинающим web-программистам

                Не рановато ли советы решили давать? Может поразбираться вначале все же стоило бы?
                • +6
                  Этой записке уже несколько лет. И опыта достаточно. Но спасибо за конструктивную критику.
                  • +5
                    Пожалуйста.
                    В свое время усвоил одну вещь: нельзя начинать выступление со слов «я не готовился, меня тут попросили и т.п.» — это вызывает отторжение у публики. Если не готовился, не знаешь, не умеешь — тогда и незачем выступать. А вы как раз и начали статью в тоне «я тут не спец, но вчера сел и разобрался, а теперь хочу всех вас научить...».
                    • +3
                      Решил передать оригинал. Ок, спасибо за действительно дельное замечание. Буду исправляться.
                    • 0
                      Так вот почему про IE9 ничего нет, который новые стандарты вполне себе поддерживает.
                  • +2
                    Как много у вас перечеркнутого текста!
                    А за топик спасибо, да.
                    • +2
                      Юмор. Всегда пожалуйста.
                    • 0
                      Спасибо! Очень просто и наглядно!!!
                      Ждем продолжения )
                      • +4
                        Спасибо. Продолжение обязательно будет. Около трёх частей всего. :)
                      • +11
                        Раньше всем приходилось предоставлять обычные поля для ввода и проверять верность данных на серверной части. Теперь же это делается на клиентской стороне, не загружая лишними запросами наш сервер. Старые же браузеры (все догадываются, о ком это я) при встрече с новым видом инпута упадут и отрендерят обычный текстовый инпут. Делается это очень легко. Так, например:


                        Фишка как раз не в валидации, а в том, что на мобильных устройствах появится специальная клавиатура для ввода эмела, за "@" не нужно будет никуда лезть, они будет рядом с буквами.
                      • +4
                        Самое главное используя html5 думать о том, как это всё уживется со старыми браузерами и все равно не забывать проверять все еще раз на стороне сервера (я про формы).
                        • +6
                          Сервер в любом случае должен проверять правильность данных, даже если это же делает и клиент. Хотя бы потому, что не всегда есть уверенность, что с вашим сервером работает ваш клиент, а не кто-то другой.
                        • 0
                          В статье говорится что у сервера больше не будет ajax валидации email (впрочем это решалось и раньше через javascript)
                          • 0
                            Я прекрасно понимаю, но кто-то может решить что всё, с валидацией справится клиент, а потом будет волосы в разных местах рвать
                        • +5
                          пользователь вводил данные, отправлял их на сервер путём нажатия на кнопку «Пуск», а дальше за дело брался скрипт, который проверял валидность формата введённых данных

                          И сейчас тоже так нужно делать. Толпы хакеров школьников, желающих пощупать сайтики на предмет уязвимостей c вводом НТМL никто не отменял.
                          • +1
                            Скажем так, требование серверной проверки дополняется проверкой «на лету», что позволяет пользователю заметить ошибку до отправки данных.
                          • –1
                            Если переходим с XHTML на HTML5 то тогда и закрытие конечных тэгов убираем!
                            вместо
                            <link rel="stylesheet" href="path/to/stylesheet.css" />

                            в статье пишем
                            <link rel="stylesheet" href="path/to/stylesheet.css">
                            • +26
                              Вот что привычка делает — для меня теперь незакрытый тег ваш кошмарно выглядит!
                              • +1
                                Это обязательно? За счёт привычки (XML, XHTML, XSLT) мне трудно писать <link> и <br> вместо <link/> и <br/>. Понятно, что дело привычки, но нужно ли?
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • +4
                                    Мне всегда строгий синтаксис нравился больше, чем нестрогий. Я представляю себя на месте интерпретатора.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • 0
                                        Именно поэтому мне строгий синтаксис xml и нравится больше. С ним проще работать как интерпретатору, так и программисту. Как побочный эффект свободы нестрогого синтаксиса html, разные браузеры генерируют разный текст в режиме визуального редактирования, например. И w3c не запрещает использовать xml-совместимые теги.
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                      • 0
                                        А я на месте того кто будет писать браузер и материться «доктайп вроде HTML а теги из XHTML понапихали, и как это парсить...» а за одно буду думать «может там ещё ASM вместо JS надо поддерживать чтоб хоть основные сайты работали»…
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                          • 0
                                            Вот именно что «пока»
                                            • 0
                                              Вы не на Chrome native client сулчйно намекаете?
                                              • +1
                                                Я не намекаю, я говорю что верстальщики должны придерживаться одного стандарта, а не использовать джедайские техники времён HTML3 и мешать их с XHTML и всё это под доктайпом HTML5.

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

                                                В итоге любой браузер надо 20 лет тестировать перед релизом, попутно внедряя все новинки которые за эти 20 лет выйдут.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                      • +3
                                        Доклад Вадима Макеева «Доктайп. Точка», прозвучавший на встрече Web Standards Days 16 декабря 2010 года в Москве
                                        vimeo.com/channels/wstdays#19072506
                                        Кому интересно конечно %)
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                        • +2
                                          Да ладно, тут дело привычки. Я бы предпочел как раз-таки XHTML5, как то он «стандартнее» выглядит :) То есть, глаз наметан на «незакрытые теги».
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                          • 0
                                            За что минусуем-то народ?
                                            Привычка сильнее?
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                          • +13
                                            Верстальщик умрёт от разрыва барабанных перепонок, если принесёт мне вот это:
                                            Что, чёрт возьми, вы здесь делаете?
                                            • +21
                                              <p class = myClass id= someId>Что, чёрт возьми, вы здесь делаете?</p>
                                              
                                              • +2
                                                Как они вообще до этого додумались?
                                                • +7
                                                  Есть мнение, что учли заявки криворуких верстаков трудящихся, которых некоторые строгости синтаксиса xhtml утомили. Думаю, на очереди — автоисправление ошибок в именах аттрибутов.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                    • +5
                                                      Примерно как разрешить всем писать парашют через букву у.
                                                      • 0
                                                        Боюсь, что те которые так пишут разрешения у вас спрашивать не будут.
                                                    • +1
                                                      Если посмотреть код страницы Google, то там тоже такое время от времени встречается. Где-то видел предположение, что это связано с экономией трафика, но с чем это связано на самом деле не знаю.

                                                      Вот пример с главной страницы Гугла:

                                                      <span id=gbgs5 class=gbts><span id=gbi5></span></span>
                                                      
                                                      • +1
                                                        И даже вот так:

                                                        <div id=ss-bar style=white-space:nowrap;z-index:98></div>
                                                        
                                                        • 0
                                                          Вполне возможно, это уже результат работы минификатора, а в исходнике вполне человекочитаемая разметка.
                                                      • 0
                                                        Раньше так и верстали — не особо задумываясь о кавычках и прочем. Помню, когда начинал учить HTML году этак в 2002-м, в книге, которую тогда читал, так всё и обстояло. И чтобы обеспечить максимальную обратную совместимость кода — в том числе и с таким, доктайп html5 разрешает запись атрибутов любым способом.
                                                        • +3
                                                          Тем временем шёл 2012 год…
                                                          • 0
                                                            Не все сайты переделываются, но, тем не менее, браузер должен понять и правильно обработать любую запись кода. Выше в ветке вам привели пример кода с главной Гугла.
                                                            • +4
                                                              Браузер-то безусловно должен. А мастера не должны писать, как можно было 10 лет назад.
                                                              • +4
                                                                Это не повод начинать писать, как в тыщедевятьсотлохматом году.
                                                                • 0
                                                                  Где вы прочли, что так надо писать?) Речь об обратной совместимости.
                                                                  • 0
                                                                    Совместимость должна быть в браузерах. А это — стандарт. Тут наоборот нужно отрезать всякие неоднозначности.
                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                      • –2
                                                                        Раз уж есть новый доктайп — так почему бы не записать в стандарте, что при таком доктайпе браузер должен жёстко материться на аттрибуты без кавычек.
                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                              • 0
                                                                Вы так говорите, как будто кавычки — это что-то прогрессивное и великолепное. Это просто привычка, не более. Когда-то все обходились без этих кавычек и это тоже было нормально и привычно.
                                                                • +1
                                                                  Парсить c кавычками гораздо проще и удобнее.
                                                                  • 0
                                                                    Проще и удобнее парсить XML, а так как его всё равно нет, всё равно HTML приходится пропускать через tidy, а там уже кавычки появятся.
                                                                    • 0
                                                                      C некоторым мусором даже tidy не справляется. Из-за этого приходилось часть HTML вырезать.
                                                                      • –1
                                                                        Да, только речь о кавычках.
                                                                        • +1
                                                                          Он из-за них и спотыкался. Точнее из-за их отсутствия.
                                                                          • 0
                                                                            У меня совсем иной опыт — никогда не спотыкался. Можете ситуация описать?
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                    • 0
                                                                      Привет потенциальная дыра в безопасности.
                                                                      Привет выход за границы аттрибута.

                                                                      Я бы за такое руки отрывал.

                                                                      • 0
                                                                        Вы ерунды-то не говорите. Кавычки сами по себе не спасают ни от чего. Ну и используйте фреймворки уже, там все проблемы решены давно.
                                                                        • 0
                                                                          В каком фреймворке все проблемы решены? -))

                                                                          А вообще, внедрение js путем выхода за границу аттрибута, одна из очень известных техник.
                                                                          Различные браузеры могут воспринимать вместо пробела отличные от пробела символы.
                                                                          А фильтры не ловят их. Соответственно использовав этот символ, мы сможем выйти за границу аттрибута.

                                                                          • 0
                                                                            В любом, где есть вменяемый шаблонизатор. «Вменяемый» в том смысле, что не позволяет внедрять HTML без явного указания.
                                                                            Различные браузеры могут воспринимать вместо пробела отличные от пробела символы.
                                                                            А фильтры не ловят их. Соответственно использовав этот символ, мы сможем выйти за границу аттрибута.
                                                                            Вы мне будете рассказывать. Когда-то я участвовал в разработке HTMLSafe: pear.php.net/package/HTML_Safe там мы это учитывали ещё 7 лет назад.
                                                                            • 0
                                                                              Окей, какой из фреймворков не позволяет внедрять HTML без явного указания?
                                                                              Желательно популярные, т.к. они используются в интернете.
                                                                              • 0
                                                                                Ну давайте я сейчас всё брошу и буду рыться и исследовать.

                                                                                Два примера, которые я помню сходу: язык Parser, фреймворк RoR, остальные ищите сами.
                                                                                • 0
                                                                                  Я клоню к тому, что на данный момент ни Zend ни Symphony ни Yii н? ни CodeIgniter и т.д. по списку используют данную фичу.

                                                                                  Поэтому говорит: «Ну и используйте фреймворки уже, там все проблемы решены давно» — не правильно. Ничего там не решено.

                                                                                  Обычная кавычка при использовании атрибута может защитить сайт от внедрения js в страницу, если на каком то другом слое разработки была допущена ошибка.
                                                                                  • 0
                                                                                    блин, куда торопился:
                                                                                    «и т.д. по списку НЕ* используют данную фичу.»
                                                                                    • 0
                                                                                      Я клоню к тому, что на данный момент ни Zend ни Symphony ни Yii ни CodeIgniter и т.д. по списку используют данную фичу.
                                                                                      А что, у них у всех собственные шаблонные движки?

                                                                                      Тот же Symphony 2 использует Twig, у которого есть автоматические экспейпинг. А там где эскейпить надо вручную, будут экспейпиться не только кавычки, то и знаки больше/меньше.

                                                                                      Я говорил, кстати, о фреймворках, где вменяеймый шаблонизатор, не приписывайте мне лишнего.
                                                                                      • 0
                                                                                        Я понял вашу позицию, но говорю сейчас о другом.
                                                                                        На данный момент совет не заключать в кавычки значения атрибутов в HTML — вредный совет.

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

                                                                                        И если сейчас фильтровать кавычки при вводе значений, как правило никто не забывает. То, о остальных кейсах, большинство и не задумывается.
                                                                                        • 0
                                                                                          На данный момент совет не заключать в кавычки значения атрибутов в HTML — вредный совет.
                                                                                          Я такого совета и не давал. Просто не надо относиться к этому, как к чему-то прогрессивному.
                                                                      • 0
                                                                        вы до сих пор пользуетесь электрическими машинами, СКОЛЬКО МОЖНО? УЖЕ 2012 ГОД!
                                                                    • 0
                                                                      Как пишут выше, разработчики HTML5 следуют правилу «pave the cowpaths», т.е. ориентируются на существующие практики. Видимо, существуют такие практики и есть их поддержка со стороны браузеров.
                                                                    • 0
                                                                      А как в этом случае указать элементу несколько классов одновременно? всегда делали так class=«class1 class2» Без кавычек такое не прокатит вроде.
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                  • 0
                                                                    … Пару дней назад мне…
                                                                    … К сожалению, сылку дать не могу, так как я не запаомнил…


                                                                    Не можете или не хотите? История браузера успешно хранит ссылки до месяца и более.
                                                                    • –2
                                                                      не согласен.
                                                                      • 0
                                                                        С чем именно, если не тайна?
                                                                        • 0
                                                                          с тем что я зачастую не могу найти ссылку ютуба которую открывал часа 2 назад. Кэш браузера нестабилен.
                                                                          • 0
                                                                            Youtube хранит собственную историю: www.youtube.com/my_history
                                                                            конечно же, если залогинены и видео было просмотрено со его страниц
                                                                            • 0
                                                                              я про кеш браузера отвечал. А где вы эту ссылку нашли?
                                                                              • 0
                                                                                все нашел. Спасибо, как то не замечал никогда. Эти вечные обновления интерфейсов ютуба…
                                                                    • +1
                                                                      Новые элементы это хорошо, но серверная проверка как была, так и останется
                                                                      Особенно интересно видеть стандартные ошибки браузера вперемешку со своими кастомными (заказчик хочет как у гугла сверху, хорошо если их можно перехватить евентами)
                                                                      Новые тэги — хорошо, но различия технически нет между <head> и <div id='head'>
                                                                      Ну учитывая что эти две строки укладываются в 80% всей статьи, то надеяться на них рановато =)
                                                                      • 0
                                                                        > Новые тэги — хорошо, но различия технически нет между и Технически — возможно, но насколько я знаю, хотели сделать семантику а не технику.
                                                                        • +3
                                                                          На самом деле разница в устойчивости к ошибкам.
                                                                          Одно дело </div></div></div> <!--чорд, не обсчитался ли я?-->
                                                                          Совсем другое </p></head></article>
                                                                          Во втором варианте, даже если один закрывающий тэг случайно потеряли (или еще хуже — добавили лишний), — у страницы намного меньше шансов развалиться в браузере.
                                                                          Поскольку контент внутри может быть user-generated — совсем не лишняя предосторожность.
                                                                          • 0
                                                                            различия технически между <head> и <div id='head'> огромные.
                                                                            А если говорить про различия между <header> и <div id='head'> то различия в семантическом значении
                                                                          • 0
                                                                            Еще бы какой-нибудь добрый верстальщик написал топик про первые шаги в мире дивной верстки )
                                                                            А то я тоже в основном серверным программированием занимаюсь, верстать только на таблицах умею, а это все таки дурной тон.
                                                                            Сейчас конечно по-маленьку перехожу на дивы, 99% задание оформления в CSS, но есть ооочень много тонкостей в дивной верстке, частенько браузеры ведут себя неочевидно, а гугление дает очень мало результатов.
                                                                            В одном из последних проектов успел наловить такую кучу шикарных багов поймать в ИЕ, что плохо стало)
                                                                            • 0
                                                                              Чикуёнок где-то уже упомянался. Почитайте. Дивная вёрстка сразу покажется чем-то родным и знакомым. Что же касается интересного ИЕ, то половина багов лечится указанием доктайпа, ещё процентов 40 вполне заменяемы тем, что ИЕ умеет, ну а оставшиеся 10 можно и нагуглить.
                                                                              • 0
                                                                                доктайп у меня html))
                                                                                нет, я не про тривиальные баги. так уж повелось, верстаю я в основном что нибудь хитрое, с JS анимацией и прозрачностями. вот пара примеров последних встреченных багов в ИЕ8:

                                                                                1.
                                                                                Берем див, фон транспарент (или не указан), вешаем filter: alpha(opacity=100);
                                                                                Кладем в него картинку. Любую. Достаточного размера.
                                                                                Поверх кладем другую картинку с filter: alpha(opacity=0);
                                                                                Результат: сквозь верхнюю картинку просвечивает не нижняя… а фон страницы оО
                                                                                впрочем, это проявляется не только с фильтром альфа… можно и с шадоу получить такой же баг.
                                                                                причина скорее всего в том, что ИЕ не умеет в одном месте страницы отображать поверх друг друга более одного элемента с фильтром. Нижние элементы с фильтрами просто исчезают.
                                                                                Так, кстати, можно получить прикольный эффект просвечивающего под картинкой фона страницы в форме текста…

                                                                                2.
                                                                                Берем див с position: relative;
                                                                                Кладем в него картинку с position: absolute и z-index: 1;
                                                                                Кладем поверх картинки ссылку () с position: absolute и z-index: 2; задаем ей ширину и высоту на полкартинки
                                                                                внутри ссылки — спан, который при :hover меняет фон. (стрелочка там была)
                                                                                Результат в ИЕ: ссылка попадает под картинку.
                                                                                Это НЕ известный легко гуглимый баг с z-index в ИЕ, у меня оба элемента вложены в 1 див, а не в разные.
                                                                                Решается проблема заданием background-image с полупрозрачной картинкой для ссылки…

                                                                                • 0
                                                                                  1. Как то писал колорпикер, взял за основу способ с 4 картинками и прозрачностью. В IE8 проблем таких не видел. Все картинки друг на друге и меняют прозрачность от 0 до 100.
                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                    • 0
                                                                                      Я решил немного иначе, но не суть уже) Просто привел примеры нетривиальных багов)
                                                                                  • 0
                                                                                    А за отсылку к блогу Чикуенка спасибо, уже читаю, весьма познавательно)
                                                                                  • 0
                                                                                    Моя первая верстка в дивах корректно отображалась только в том браузере, с помощью которого ее делал — FF3. В IE была фееричная картина разбросанных блоков:) Потом я взял первый попавшийся сайт с дивной версткой и делал «все как там». Много вещей не понимал, например: _height:100% :) но зато уже на третий развсе было уже полностью кроссбраузерно. Так что был бы гугл под рукой да желание
                                                                                  • +27
                                                                                    Это не советы начинающим верстальщикам, извините. Я даже не знаю каким словом это можно назвать.
                                                                                    Начинающий верстальщик должен сначала разобраться в том, что такое блочные элементы и инлайновые элементы
                                                                                    Что такое поток, и какие css свойства вырывают элемент из потока
                                                                                    Что такое создание контекста форматирования
                                                                                    Как ведут себя внешние отступы при наложении друг на друга, и относительно чего они высчитываются
                                                                                    Какие есть стандартные подходы к решению типовых зачач, как то: создание многоколоночных макетов, различные способы выравнивания элементов и т. д.
                                                                                    Классические несоответствия в рендринге между различными браузерами и как свести их к минимуму

                                                                                    Список можно продолжать очень долго. Начинать изучение с экспериментов с новыми HTML5 тегами это путь в никуда.

                                                                                    P.S. Отсутствие кавычек — это моветон невероятный.
                                                                                    • +4
                                                                                      Если вы знаете что нужно начинающему верстальщику, то может напишите статью по вышеуказанным темам?
                                                                                      • +2
                                                                                        Дело в том что на эти темы написано уже достаточно статей. Нужно только поискать. Почитать Сергея Чикуенка например или Акеллу. Ну а западных блогов просто не счесть.
                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                          • 0
                                                                                            А разве не позволяет? w3 с Вами не очень согласно и пишет что свойства элемента меняются.
                                                                                            • 0
                                                                                              Поставьте картинке display: block. Посмотрим как она у вас расстянется на всю ширину контента.
                                                                                              • 0
                                                                                                «The display property specifies the type of box used for an element.»
                                                                                                Возможно мой английский хромает, но мне кажется картинки не попадают под это описание. Это свойство для контейнеров. www.w3.org/TR/CSS2/visuren.html#propdef-display.
                                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                  • 0
                                                                                                    Причем тут парсер к свойствам элемента? Парсер не учитывает свойства, он учитывает структуру.
                                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                      • 0
                                                                                                        Сверстайте страничку, поместите h3 внутрь p и посмотрите как он прекрасно там будет содержаться. Валидатор проверяет структуру, ему сказали что _<тут некое перечисление тегов>_ не должно быть в <тут другое перечисление тегов> и он отлавливает такие ситуации, независимо от свойств данных цсс.
                                                                                                        А технически див и спан с инлайновым свойством ведут себя одинаково (поведение а не валидация)
                                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                          • 0
                                                                                                            Да, Вы были правы, оставляют всеравно себе некоторые свойства и ведут себя не полноценно =)
                                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                            • 0
                                                                                              Интересный у вас пример с placeholder — в коде одно значение плейсхолдера, в примере — другое )
                                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                • +2
                                                                                                  Моё мнение, что кавычки в атрибутах, указание типа скрипта и соответствие xhtml еще никому не повредили, а начинающим верстальщикам нужно в первую очередь учиться верстать независимыми минималистичными блоками и глубже изучать CSS. А то иногда оказывается, что начинающий верстальщик может много рассказать о достоинствах html5, а как взаимодействуют margin-ы не знает.
                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                    • 0
                                                                                                      С каких это пор они валидные? Все три выдают ошибку, только что проверил
                                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                        • –1
                                                                                                          Три варианта.
                                                                                                          И проверяйте в xhtml 1.1
                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                            • +1
                                                                                                              Прошу меня извинить, был не прав. Видно при валидации ткнул не туда.
                                                                                                        • 0
                                                                                                          Это да, но я имел в виду соответствие html -> xhtml, а не наоборот :) Другими словами, если писать всегда <br/> и <div> </div>, все парсеры будут довольны.
                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                            • 0
                                                                                                              HTML4 — да, конечно. А вот HTML5 (там же) никаких предупреждений не показал.
                                                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                        • 0
                                                                                                          Вот! Наконец реально дельный коммент.
                                                                                                        • +3
                                                                                                          contenteditable — а кто и как это потом обрабатывать будет, на сервер что-то передаётся? Или страница закрылась, и все изменения потеряны?
                                                                                                        • +6
                                                                                                          > Если новый доктайп встретится старому браузеру, то он просто останется
                                                                                                          > в стандартном режиме совместимости.
                                                                                                          Дак в стандартном режиме, или в режиме совместимости?
                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                            • 0
                                                                                                              Compliance не имеет такого перевода.
                                                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                            • 0
                                                                                                              quirks mode уже давно нельзя назвать стандартным.
                                                                                                              • +1
                                                                                                                quirks mode никогда нельзя было назвать стандартным.
                                                                                                                • 0
                                                                                                                  ну, в смысле он имитирует некое стандартное поведение браузеров 90-ых годов.
                                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                              • 0
                                                                                                                Вот-вот, просто взрывает мозг.
                                                                                                              • 0
                                                                                                                Атрибуты без ковычек? Нет уж, увольте.
                                                                                                                С ковычками код намного читабельнее, да и редакторы с подсветкой синтактсиса настроенные на html корректно подсвечивают только код с ковычками в атрибутах.
                                                                                                                • 0
                                                                                                                  Комментарии без орфографических ошибок намного читабельнее, уж простите:)
                                                                                                                  По существу: нормальные html-редакторы нормально подсвечивают html-код, в том числе атрибуты без кавычек. Да, html сложнее парсить, чем xhtml, но это проблемы разработчиков редакторов.
                                                                                                                • +1
                                                                                                                  Как-то не похоже, что это предназначено для начинающих. «Если вы раньше делали так...»

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

                                                                                                                  Статья похожа больше на пометки для себя «чтобы не забыть»
                                                                                                                  • +1
                                                                                                                    Сложно представить более холиварную статейку, уж простите. Как минимум с половиной утверждений можно спорить, а ко второй — придираться.
                                                                                                                    • 0
                                                                                                                      В крупном проекте, над которым сейчас работаю, пробовал внедрять новые теги. Чтобы старые ИЕ их увидели, пришлось вставить соответствующий js. Но обнаружилось, что если на странице вставлены коды социальных сервисов, блоки снова перестают восприниматься и все уезжает. Пришлось срочно все выпилить, т.к. решения не нашел.
                                                                                                                      • 0
                                                                                                                        Вы использовали html5shiv, для реализации поддержки HTML5 тегов в старых IE?
                                                                                                                        • 0
                                                                                                                          Нет, взял скрипт html5.js из яндекса, но смысл тот же. На html5shiv тоже жалуются.
                                                                                                                      • +1
                                                                                                                        В Chrome если использовать opacity у тега input то всплывающая подсказка появляется за input'ом
                                                                                                                        image
                                                                                                                        <form action="/?p=ads">
                                                                                                                        <input type="text" style="opacity:0.9" required="required"><br>
                                                                                                                        <input type="text" style="opacity:0.9" required="required">
                                                                                                                        <input type="submit">
                                                                                                                        </form>
                                                                                                                        Опять нужны костыли ((
                                                                                                                        • +4
                                                                                                                          Может нужно написать баг-репорт?
                                                                                                                        • +1
                                                                                                                          Вот чего еще не хватает html5, так это латеховских вставок для размещения формул. А то приходится либо всякие latex2html использовать, либо каждую формулу вручную скриптиком в картинку превращать.
                                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                            • +1
                                                                                                                              MathML — жуткая дрянь. Вручную писать замучишься — все равно нужен конвертер.
                                                                                                                              Поэтому вопрос остается открытым.
                                                                                                                          • –1
                                                                                                                            Ну кстати в документе может быть несколько элементов header и footer, поэтому, в некоторых случаях, без id все же не обойтись.
                                                                                                                            • 0
                                                                                                                              «Если да, то почему? Пора бы уже перейти к новому доктайпу, который пришёл к нам вместе с HTML5:»
                                                                                                                              после этой фразы мое чтение данной статьи прекратилось =/
                                                                                                                              • +2
                                                                                                                                Только одному мне показалось, что статья опоздала года эдак на три? Неужели есть люди которые почерпнули что-то новое? Прочитайте Dive Into HTML5, печатная версия вышла в 2010 и уже есть кучи переводов на русский язык, например htmlbook.ru/html5
                                                                                                                                • –4
                                                                                                                                  Один из самых полезных топик для меня за неделю. Может подскажет кто ссылки на материал по теме, но пообъемнее?
                                                                                                                                  • –1
                                                                                                                                    Интересно, добавляю в избранное, на работе просят изучить сей магию.
                                                                                                                                    • +5
                                                                                                                                      На протяжении чтения всего материала меня никак не могло покинуть чувство, что это лишь перевод чьей-то чужой статьи, старательно выдаваемый за собственное творение. Автор сделал свои скриншоты и какое-никакое вступление понаписал. Однако конструкции языка, встречающиеся только в английском и неумело переведенные на русский меня доканали и я таки начал гуглить.

                                                                                                                                      После недолгих поисков нашелся и оригинал, в котором затронуты аж 25 интересных особенностей HTML5. Видимо автора на все 25 не хватило и смог осилить только 11 из них, хотя заголовок статьи нам говорил о цифре 12 (дюжина).
                                                                                                                                      • +2
                                                                                                                                        Чёртова дюжина = 13.
                                                                                                                                        • +1
                                                                                                                                          Ах да, пардон, она еще и чертова. Значит «советов» написано аж на 2 меньше, чем заявлено в заголовке.
                                                                                                                                        • +1
                                                                                                                                          В оригинале 3 штуки еще добавили. :) так что автору видимо не угнаться
                                                                                                                                        • 0
                                                                                                                                          Под админской учеткой работаете? Атата.
                                                                                                                                          • 0
                                                                                                                                            А как CSSить инпуты required и отображение placeholder?
                                                                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                                            • 0
                                                                                                                                              Я понимаю, что оговорка, но очень уж насмешило «осуществляется на клиентской стороне клиента» :)

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