валидный HTML-документ

    А вы знаете, что по-настоящему валидному HTML-документу не требуются теги <HTML>, <BODY>, <HEAD>, которые многие считают обязательными атрибутами HTML-документа. И вот такой документ:
    <!DOCTYPE html>
    <title>Валидный HTML-документ</title>
    


    на ура пройдет валидацию. Хотя желательно добавить <meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»>, чтоб было меньше warnings, но тоже необязательно.
    Так что, если вам лень набирать лишние буквы или вы экономите каждый байт, заботясь о пользователе и снижая объем потребляемого им траффика, то можете использовать вот такой шаблон HTML-документа (уже HTML5 документа):
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Валидный HTML-документ</title>
    


    И далее, соблюдая семантику элементов
    P.S. Написать заметочку решил по прочтении поста, посвященного HTML5. В одном комментарии упомянули, что BODY опционален, но почему-то не рекомендовали этим пользоваться. Не вижу причин. Кстати, в коде страницы яндекса упомянутые теги отсутствуют)

    UPD: одна из самых веских причин написания постов на хабре для меня — это возможность узнать новое в процессе дискуссии. Вроде и пост простенький, а и здесь в комментах есть жемчужины для меня.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 110
    • +2
      Вообще-то, такие документы можно писать уже сейчас. В качестве примера, валидный HTML 4.01 Strict:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <meta http-equiv=Content-Type content='text/html; charset=utf-8'>
      <title>Hello, world!</title>
      • +2
        я не утверждал обратного — а как продолжение темы про HTML5
        получается очень краткая запись шаблона
        • 0
          Да не валидный он, почему вы так пишите?
          lovejournal.eu/valid.html
          • 0
            то, что по ссылке, действительно невалидно:

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
            <meta http-equiv=Content-Type content='text/html; charset=utf-8'>
            <title>Hello, world!</title>Hello, world!</title>

            Смотрим внимательно на последнюю строчку.
            • 0
              нет, нет, видимо так быстро увидел ответ на коммент, что может не сохранилось что-то
              В общем по линку, ваш выше предоставленный html — он не валидный
              • +1
                Извиняюсь, действительно невалидный. Вот исправленный вариант:

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
                <meta http-equiv=Content-Type content='text/html; charset=utf-8'>
                <title>Hello, world!</title>

                <p>Hello, world!
                • 0
                  А теперь можно небольшо пояснение?
                  То есть тег BODY HTML HEAD отсутствуют — и это нормально, только тогда когда есть незакрытый тэг P +))))) Я понимаю что логика не такая +)) Но ситуация показывает обратное. Почему так?
                  почему тэг не закрыт? (наверное для многих очевидный вопрос, но хотя бы в двух словах)
                  и второе, почему тэг спас ситуацию с валидацией. Спасибо.
                  • +1
                    Элемент <p>, вместе с некоторыми другими, например, <tr> и <td> в HTML — самозакрывающийся. Браузер, следующие спецификации, автоматически ставит закрывающий тег в соответствии с правилами, определёнными в спецификации. Например, <td> закроется, когда браузер встретит открывающий тег ещё одного <td>, а <p> — открывающий тег любого блочного элемента, например, <div> или ещё один <p>.

                    Также, я бы не сказал, что здесь нету <body>, <html> и <head>. Они создаются в памяти браузера (или другого HTML-парсера) в тот момент, когда встречаются элементы, которые могут в них содержаться. Например вот этот документ будет невалидным, так как <title> не может быть внутри <body>:

                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
                    <meta http-equiv=Content-Type content='text/html; charset=utf-8'>

                    <p>Hello, world!
                    <title>Hello, world!</title>
                    • +1
                      А <p> спас валидацию потому, что без него все остальные элементы, что есть в этом документе, предназдначеня для <head>, поэтому парсер в процессе разбора документа никогда и не создаёт <body>. А он должен быть.
                      • 0
                        Спасибо. Да я к последнему комментарию уже понял, почему cпасает ситуацию.
                        И ещё. Будет ли верно моё замечание, если я скажу, что сам по себе этот документ не валидный. Так как в нём нет HTML BODY и HEAD, а то что их дописывает парсер, он бы мог этого и не делать? Тогда получается, что документ не вылидный сам по себе без парсера. Эм ай райт?
                        • НЛО прилетело и опубликовало эту надпись здесь
                      • 0
                        Да и значит ли то, что если я к такому html'у пропишу в ссs, что-нибудь аля BODY { background-color:lime; } у меня экран покраситься в ярко-зелёный цвет?
                        • НЛО прилетело и опубликовало эту надпись здесь
          • +3
            яндекс кстати уже)
            • 0
              где?
              у них вроде все еще
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            • +4
              Об этом Кирсанов писал в своей книге «веб-дизайн» 8 лет назад :)
              • 0
                все уже сказано до нас. и это тоже
                )
              • +24
                Вы сговорились сегодня верстальщиков до психушки довести?
                • +9
                  Элементы <head> и <body> позволяют разделить логику HTML документа. Именно поэтому я никогда не откажусь от их использования.
                  • +1
                    Вы можете отказаться от одного из них, например, <body>. Разделение логики останется наглядным.
                    • +6
                      Не вижу смысла. Сразу почему-то возникает ассоциация с внутренними органами, не собранными в тело. Более того, любой <div> верхнего уровня чисто интуитивно начинает казаться по смыслу аналогичным тегу <head>, хотя роль у него другая и никак не просто группировочная, как в случае тега <body>.
                      • 0
                        Да, если подумать, то лучше от <head> отказаться.
                    • 0
                      porgz +1 нужна хоть какая то организация…
                      • +2
                        Мсье, я пишусь через «q», а не через «g». ;)
                      • +1
                        в вас говорит привычка, как мне кажется.
                        например, скрипты большинство по привычке подключают в HEAD, хотя их можно подключать где угодно (но в пределах html). при этом рекомендуется подключать скрипты ближе к концу документа. страдает ли при этом логика и структура документа? отнюдь нет.
                        • 0
                          Во мне говорит любитель семантического веба и XML (читай: XHTML), а отнюдь не привычка.
                          • +2
                            XHTML — это язык разметки, просто-напросто синтаксис, и он не заслуживает ровно никакой славы за «семантичность» и «разделение содержимого и оформления», что ему предписывают. Всё это было ещё задолго до изобретения XHTML и называлось HTML 4.01 Strict.
                            • –1
                              Ну XHTML документ намного проще распарсить чем HTML документ, написанный вами (я об отсутствии закрывающих тегов). Вот вам и разделение содержимого и оформления.
                              • 0
                                Во-первых, какое отношение имеет скорость парсинга к разделению содержимого и оформления?

                                Во-вторых, HTML-парсеры браузеров на самом деле ожидают, что эти теги могут быть незакрыты. Им это предписывает делать стандарт HTML 4.01, а теперь и HTML5. Для них это не исправление ошибок. Гораздо менее приятно браузеру приходится, когда он ожидает HTML-синтаксис, а Вы пихаете ему в рот XHTML, например, вот это: <br />. В этом легко убедиться, открыв почти любую якобы-XHTML страницу в Firefox, нажать на «Посмотреть исходный код» и посчитать выделенное красным цветом. В этих местах парсер обнаружил ошибку и вынужден был её исправлять.
                        • 0
                          Разделение логики останется нетронутым, пока содержимое и будет на своих местах. Если вы поместите между <meta> и <title> какой-нибудь <div>, то вот уже тогда разделение логики будет потеряно. Считайте, что браузер сам дописывает эти теги.

                          Я же предпочитаю писать поменьше тегов: меньше шанс допустить ошибку.
                          • 0
                            По-моему это несостоятельный довод. Я про ошибку. Поясню: за энное количество лет, что я занимаюсь веб-штуками, я ни разу не сделал ошибку из-за <head> и <body>.
                            • 0
                              А вдруг завтра сделаете? ) Просто это общий принцип, я применяю его везде. В том числе и в закрывающих <td> вместе c <tr> (не нужны никогда) и закрывающих <p> (не нужны в 90% случаев). Я сторонник минимализма.
                              • 0
                                Как раз отсутствие закрывающих тэгов скорее приведет к ошибке. Особенно тех, кто будет ваш код после вас править…
                                • 0
                                  Все намного хуже. Отсутствие закрывающего может и не привести к фатальной ошибке, но может существенно осложнить поиск реальной ошибки в верстке или в JS. Типовой пример — когда в xHTML вываливается невалидизированный код из древних визивигов.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • 0
                                      А я про это и говорю. C 99% вероятностью этот код — порождение rich text editor. Как его MS запустил в 99 так он и работает до сих пор без изменений. По хорошему нужно пропускать это через tidy, но там уже другие проблемы возникают. Да и не делает этого никто.
                                      • НЛО прилетело и опубликовало эту надпись здесь
                          • 0
                            Ничто не мешает вам использовать разный код при разработке и в продакшене.
                          • 0
                            оу, зато при этом яндекс сверстан таблицами.
                            шаг веперед, два назад.
                            • +3
                              Я никогда не понимал эзотерического страха перед таблицами.
                              • +3
                                да нет же страха.
                                вот куда шагает стандарт html, особенно в преддверии пятой версии? как мне видится, — в сторону семантическую. вы же ниже спрашиваете про пауков, а им семантика для правильного веса очень важна. а если один документ — одна большая таблица, то как это понимать?
                                • 0
                                  Вспоминая всевозможные извращения по выравниванию высоты блоков, их позиционированию и прочие кроссбраузерные хаки, на… я вертел такую семантику. И не говорите о HTML5. Все мы верим в светлое будущее, однако даже шестым IE кто-то еще пользуется, хотя он публично признан еретическим браузером. Стандарты HTML4 и CSS2 еще не до конца поддерживаются, а мы уже рассуждаем о, пока еще, набросках HTML5 и CSS3?
                                  Я искренне верю в светлое будущее и православную блочную верстку, но то, с чем нам всем приходится работать, ничего, кроме уныния пока не вызывает.
                                  Кстати, связь семантики и веса в поисковиках, мне кажется, достаточно условна. В нашем-то веке. Кто-то уже сказал, что тот же Яндекс сверстан не без помощи таблиц.
                                  Не хочу разжигать холивар. Просто ИМХО.
                                • +1
                                  И не говорите. Верстаешь таблицами — еретик, немедленно на костер. Пишешь некошерныйвалидный код — на кол. Тьфу…
                                  • +1
                                    Ну насчет невалидного кода, в принципе, правильно. Стандартов и рекомендаций нужно все-таки придерживаться.
                                    А вот того, что верстка таблицей является признаком дурного тона я, почему-то, в рекомендациях не встречал. Может, плохо смотрел?
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                  • –1
                                    О! Можете перевестать Яндекс без таблиц с сохранением всего поведения, что есть сейчас? Посмотрю с превеликим удовольствием. Гы-гы.
                                    • +5
                                      динамическому контенту живется лучше в блоках.
                                      • 0
                                        Really?
                                        • +1
                                          угу. что вы скажете про появлине таблицы для автозаполнения поля?
                                          тот же яндекс сделал это блоком. вы поклонник другого способа? js попап окна с помощью тега tfoot? что у вас на десерт?
                                          • 0
                                            А что Вы, собсна, под динамическим контентом понимаете? Фенечки и рюшечки или контент в классическом понимании этого слова?
                                            • 0
                                              Если говорить о контенте в классическом понимании, то с помощью таблиц сложно или невозможно пустить левый сайдбар в коде позже центральной колонки с собственно содержанием статьи. Каждый элемент имеет свое семантическое предназначение. Поэтому собственно таблицы я использую для табличных данных.
                                              • 0
                                                с помощью таблиц сложно или невозможно пустить левый сайдбар в коде позже центральной колонки с собственно содержанием статьи

                                                А зачем?
                                                • 0
                                                  исключительно для SEO.
                                                  очень часто для этого же приходится переносить даже главное навигационное меню вниз за основной контент.
                                                  в итоге получается очень красиво для роботов: h1 — заголовок сайта, h2 — заголовок статьи, затем контент статьи, а потом остальные неконтентые рюши.
                                                  • 0
                                                    Очень и очень спорный вопрос. На практике, сверстав не один десяток сайтов и так и эдак я не ощутил приоритета блочной верстки перед табличной в плане SEO-оптимизации. Потому считаю перемещение контентного блока в начало документа танцами с бубном.
                                                    Кроме того, считаю, что логически верно было бы ставить навигацию в начало документа.
                                                    Ну а лучше всех всё это знают поисковые роботы. Знают, но молчат.
                                                    • 0
                                                      вы же сами написали, что робот все видит как lynx. а для lynx выглядит именно так, как я рассказал. тем более это задача тривиальна.
                                                      • 0
                                                        Не всегда. Далеко не всегда.
                                                        Повторюсь (или нет?) у каждого свои убеждения. Вы не обязаны переубеждать меня так же, как я не обязан переубеждать Вас. :)
                                                        В конце концов, я сам больше тяготею к блочной верстке, но иногда действительно приходится некоторые вещи делать таблицами.
                                                    • +2
                                                      это не вопрос СЕО, а вопрос доступности содержимого для людей с ограничениями: скринридер читает ведь код: и представим верстку на таблицах, где сверху еще и объемное меню, а слева колонка с рекламой и прочим — пользователь устанет ждать, когда начнется собственно содержание.
                                                      P.S. хотя это мое видение работы скринридеров, более чем голос в опере, я не сталкивался с ними
                                                      • 0
                                                        >исключительно для SEO. очень часто для этого же приходится переносить даже…
                                                        Вы питаетесь SEO-методичками десятилетней давности. Поисковики давно научились определять где контент, где заголовок, где навигационные и рекламные блоки независимо от того где в HTML они располагаются.
                                                • 0
                                                  Ничего не понял. Можете развернуть мысль?
                                          • 0
                                            Таблицы не так часто, но иногда нужны. css со своей задачей справляется не всегда.
                                            • 0
                                              ну свертан он таблицами, и дальше-то что? вот, на /www.yahoo.com/ вообще в html-коде 80% высоты кода — css стили =)))
                                            • 0
                                              А как на это отреагируют пауки поисковиков?
                                              Валидная верстка, как уже сказано выше, не отменяет логики описания HTML-документа.
                                              Или я просто слишком консервативен в своих суждениях?
                                              • 0
                                                не сеошник, точно не скажу, но рассуждение такое: меньше тегов, контент ближе к началу документа → хорошо)))
                                                • 0
                                                  Вы хотите сказать, что обилие мета-тегов, ссылок на JS-скрипты и стили «удаляет» контент от начала?
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                  • 0
                                                    Кстати, вспомнилось мне тут кое-что.
                                                    Поисковые роботы видят контент сайта так же, как видит его Lynx. В этом самом месте все старания верстальщика идут коту под хвост потому что он не понимает ни CSS, ни Javascript.
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                      • 0
                                                        Не совсем. Google давно насобачился исполнять JS. Что он с этим делает неизвестно, но по невидимым для Яндекса и Lynx ссылкам он очень бодро ходит.
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                          • 0
                                                            Гугл — это и есто «обычный» поисковик. Остальные типа Яндекса или Байду — необычные :)
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                              • 0
                                                                Вы правы. С точки зрения диалектики лет через 10 обычным поисковиком станет Байду
                                                • +5
                                                  Мдя, как говорится «вот и выросло поколение...» :)

                                                  • 0
                                                    Если нужно применить какие-то стили, то body, как тег верхнего уровня, более семантичен (и православен), чем. К тому же, можно вспомнить еще и javascript c его и так далее
                                                    • +2
                                                      Простите, забыл что Хабр питается тегами.
                                                      Если нужно применить какие-то стили, то <body>, как тег верхнего уровня, более семантичен (и православен), чем <div id=«body»>. К тому же, можно вспомнить еще и javascript c его <body onload=«»>, и так далее.

                                                      • 0
                                                        Вообще-то, правослевней событие domready, которое вызывается намного раньше события load и поэтому не вызывает моргания.

                                                        Впрочем, никто не мешает поставить открывающий тег элемента <body>. И это даже не обязывает ставить закрывающий. Главное, чтобы он, в случае, если Вы его таки напишете, стоял в правильном месте.
                                                      • +1
                                                        <body onload=«»>? помилуйте, это до сих пор используется? старый, добрый олдскул:)
                                                        • 0
                                                          Я давно уже не интересовался данным атрибутом, просто на ум пришло
                                                        • +4
                                                          Если в документе нет body, это не означает, что его нет в DOM. Конечно, он генерится автоматически и стили на него применяются.
                                                          • 0
                                                            Спасибо, не знал.
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                        • 0
                                                          Смущает вот что: по правилам xml нельзя что бы в корне было несколько элементов, поэтому я так понимаю для xhtml это уже не прокатит, если что поправьте
                                                          • +2
                                                            Наличие доктайпа говорит о том, что это не xml, а sgml-вариант HTML5 (хотя не совсем корректно употреблять слова «HTML5» и «SGML» вместе, так как в пятой версии SGML убрали, но суть Вы поняли). Дело в том, что корневой элемент на самом деле один, просто его необязательно писать.
                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                            • –1
                                                              хоч сайт і валідний але бажано писати html тег для того щоб сайт був xml документом і з ним можна було б працювати за допомогою SimpleXML та інших подібних XMLок

                                                              Хотя сайт и валидный, но желательно писать html тег для того, чтобы сайт был xml документом, и с ним можно было бы работать с помощью SimpleXML и других подобных парсеров XML.
                                                              • +4
                                                                Kial vi uzas Ukraina lingvo tie ĉi?
                                                                • 0
                                                                  Если бы в статье шла речь про XHTML, то не было бы смысла описывать нарушение его правил. От добавления <html> html-страница вместе со своими html-ными <br> и &input> не превратится магическим образом в xml.
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                  • 0
                                                                    Ну и добавляйте body в этом случае, в чём противоречие-то?
                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                    • 0
                                                                      Есть одно «но»: пока страница не загрузилась, объекта document.body не существует. А его частенько используют различные баннеры/информеры. После вставки такого информера на страницу можно потом долго искать ошибку :)
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                        • 0
                                                                          Это проблема, скорее всего, в голове верстальщика, отквазывающегося от body ради священных 13 байт.
                                                                          Смысл? Где в этом смысл? Здравый смысл.
                                                                          • +1
                                                                            Где Вы видите проблему? Её нет. Как Вам уже сказали, обьект document.body будет существовать вне зависимости от наличие тега <body>.
                                                                            • +1
                                                                              вы не смотрели серию смешариков, где они играли в секретики? бараш тоже спрашивал, в чем смысл, в чем смысл. а ежик ответил:"приятное ощущение тайны"
                                                                            • 0
                                                                              Связь очень простая: объект document.body доступен в скрипте сразу после открывающего тега body; если тега нет, то после полной загрузки страницы (пробовал в ie, ff, opera).
                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                • –1
                                                                                  МБ input button?
                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                          • –2
                                                                            Предлагаете экономить на спичках?
                                                                            • +3
                                                                              пример, кажется про eBay. увеличение загрузки страницы на 1 десятую секунды (!!!) привело к снижению доходов на несколько процентов. точных цифр не помню, кроме одной десятой, а ссылка потерялась=(
                                                                              • –3
                                                                                и вы правда в Это верите?
                                                                                т.е. на раз-два закроем глаза на работу:
                                                                                — сейлзов;
                                                                                — рекламу;
                                                                                — парней из отдела маркетинга
                                                                                — инет каналов
                                                                                да? а может это вообще сравнивали пятницу с воскресеньем.
                                                                                и станем верить в 1 десятую секунды?
                                                                                Вы Идиот?
                                                                                Попробуйте хотя бы себе ответить откровенно на этот вопрос.
                                                                                • –1
                                                                                  «Несколько процентов» — это явно завышенный перегиб, но теоретически прибыль массовых сервисов действительно может быть зависимой от времени загрузки страницы за счет того, что:
                                                                                  — нужно будет больше серверов чтобы обеспечивать приемлемое время загрузки страниц;
                                                                                  — баннеропоказов (и соответственно кликов) за единицу времени будет меньше.

                                                                                  И не нужно называть кого-то идиотом, даже если он и ляпнул что попало. Если не понравился комментрарий — поставьте минус, этого достаточно. Если минусов наберется много, то все и так все поймут.
                                                                                  • 0
                                                                                    отвечать на оскорбление не буду — ответить значит опуститься на Ваш, милостивый государь, уровень, но я привел цифры из исследования eBay. да, я не помню на какой именно странице я это читал, потому и не дал ссылку, но на цифры у меня память хорошая. и я склонен больше верить eBay, а не Вашим «кагбэ» логичным рассуждениям
                                                                                    • +3
                                                                                      Тхахаха!
                                                                                      Вы достаточно емко ответили на мой вопрос.
                                                                                      Спасибо.
                                                                              • +1
                                                                                <head>
                                                                                <object id=«xxx»></object>
                                                                                <body onload=" alert( document.getElementById('xxx').parentNode.nodeName ) ">

                                                                                только ие отработал правильно…
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                • НЛО прилетело и опубликовало эту надпись здесь

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