14 августа 2009 в 17:14

валидный 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: одна из самых веских причин написания постов на хабре для меня — это возможность узнать новое в процессе дискуссии. Вроде и пост простенький, а и здесь в комментах есть жемчужины для меня.
oknechirik @oknechirik
карма
0,0
рейтинг 0,0
Похожие публикации
Самое читаемое Разработка

Комментарии (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, а то что их дописывает парсер, он бы мог этого и не делать? Тогда получается, что документ не вылидный сам по себе без парсера. Эм ай райт?
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • +1
                      спасибо (bow) +)
                • 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>. И это даже не обязывает ставить закрывающий. Главное, чтобы он, в случае, если Вы его таки напишете, стоял в правильном месте.
        • 0
          s/не вызывает/вызывает меньше/
      • +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 ) ">

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

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