Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов). Что такое DOCTYPE и зачем он нужен? Что будет если не писать doctype
Сегодня, уважаемый читатель, мы поговорим о такой загадочной вещи, как объявление стандарта, в соответствии с которым написан HTML-документ. Выполнять поставленную задачу призвана первая HTML-директива в коде веб-страницы, под названием !DOCTYPE .
Вот пример этой строки:
Если вы не знаете, зачем нужна такая абракадабра и какой DOCTYPE выбрать в вашем случае, то в данной статье вы найдете ответы на эти вопросы, я, по крайней мере, постарался осветить проблему подробно 🙂
Первое, что может сделать добросовестный начинающий веб-мастер, пытающийся разобраться в назначении директивы DOCTYPE, это сходить на сайт htmlbook.ru и прочитать , из которой станет ясно, что доктайпов существует несколько (строгие и не очень, для HTML и XHTML). Ясно, что данная директива необходима для уведомления браузера о том, в соответствии каким стандартам сверстан HTML-документ, а вот какой стандарт выбрать и на что это влияет – большой вопрос.
Для того, чтобы большой вопрос превратился в подробный ответ, давайте познакомимся с интереснейшей историей появления всех этих стандартов (не пугайтесь, я кратенько).
История стандартов HTML
Давным-давно, когда интернет только зарождался, обозначилась проблема каким образом превращать набор букв, передаваемый по сети, в заголовки, абзацы, ссылки . Ответ нашел физик Тим Бернерс-Ли придумав язык гипертекстовой разметки HTML (обратите внимания, товарищи блондинки, HTML – это не язык программирования). Документацию к языку HTML опубликовали в 1991 году.
HTML прижился на столько, что стал стандартом разметки документов в интернете, и был одобрен международной организацией по стандартам W3C , которая была основана и возглавляется, как не странно, все тем же создателем HTML сером Тимом Бернерсом-Ли.
В своей первой редакции HTML представлял язык разметки содержимого web-страницы, сообщающий браузеру – где заголовок, где абзац, где ссылка при помощи наших добрых знакомых, HTML-тегов. Браузеры, при этом, самостоятельно должны были решать, каким образом им визуально представлять все элементы содержимого, структурированные тегами. Иными словами, первая редакция HTML не имела никакой власти над визуальным представлением гипертекста на стороне клиента, эта функция полностью ложилась на плечи браузера.
Прошло немного времени буйного развития интернет-технологий, как в интернет хлынул бизнес. Бизнес-сайтам совсем не хотелось быть похожим один на другой, им нужна была яркость, запоминаемость.
Популярные в то время браузеры (конечно IE и, тогда еще живой, Netscape) начали придумывать свои собственные теги, которые позволяли задавать индивидуальные свойства дизайна веб-документу. Да, уважаемый читатель, никакой кроссбраузерности в то время не было. Я еще помню те времена, когда по сайтам можно было лазить только с помощью IE, все остальные браузеры показывали страшные вещи. Но сейчас не об этом.
W3C принимает новый стандарт HTML, в который уже входят средства визуального представления.
Семимильными шагами начинает развиваться технология CSS, призванная восстановить порядок и отделить представление (выравнивание, цвета, шрифты, которые теперь будут задаваться CSS-стилями) от структуры (заголовки, абзацы, ссылки, которые идеологически задаются в HTML).
Начинающий веб-мастер спросит зачем отделять визуальную часть от структуры , и мы ему ответим:
- В простеньком сайте необходимость этого не очевидна, но если проект крупный, то разделением удастся избежать путаницы и каши в HTML-коде.
- Не нужно повторять один и тот же код на разных страницах, если визуальное представление блоков одинаково. Достаточно воспользоваться CSS-файлом, где один раз указать стиль отображения для данного семейства блоков.
- Отделив инструкции, касающиеся внешнего вида, в кешируемый файл, можно избежать бессмысленных нагрузок на мировую паутину (хе-хе, какое нам дело до мировой паутины, свой сервак не перегружать бы; CSS спасает сервера высоконагрузочных проектов).
- Теперь уже мощность CSS неоспоримо больше, в плане работы с логикой представления, чем у искусственно впертвых в HTML инструментов изменения внешнего вида страницы.
Так, о CSS достаточно, вернемся к HTML.
Актуальный, на данный момент, стандарт HTML 4.01 запрещает использовать HTML для манипуляций с отображением элементов. Попрощайтесь с HTML-директивами align, font ; внешний вид нужно задавать при помощи CSS-стилей. Все возвращается на круги своя.
Но, интернет продолжает свое развитие и вместе с ним развиваются и перерождаются стандарты.
Организация W3C решила, что наиболее удовлетворяющим современным веяниям будет новый расширяемый стандарт XHTML . Данная штуковина – это некий симбиоз HTML с принципами XML.
XML – это способ хранения структурированных данных в текстовом файле. Придуманные теги, определенным образом, в соответствии стандартам XML, формируют структуру данных:
При помощи простенькой программы, легко можно разделить данные, структурированные средствами XML. При этом данные могут быть проанализированы в любой операционной системе, на любом устройстве (ведь это всего-на-всего текстовый файл, структурированный соответствующими разделителями-тегами, согласно известному стандарту).
Организация W3C посчитала вышеописанную особенность очень крутой и раздумья о тупике в развитии HTML, привели к рождению XHTML. Это будет такой язык разметки, который безболезненно должен расширяться новыми тегами и сможет обрабатываться любым устройством (мобильник, компьютер, телевизор), ведь в основе лежит XML, который это пропагандирует (думали наивные сотрудники организации W3C).
Сказано, сделано – в мае 2001 года появился новый стандарт расширяемой гипертекстовой разметки XHTML 1.0 . Он впитал в себя строгости XML, теперь HTML-код должен соответствовать следующим требованиям:
- Все теги, должны быть закрыты. Если тег одиночный, например
, то он должен выглядеть вот таким образом:
.
- Должна строго выполняться иерархия. Вот так нельзя: …. Можно только так:…. Нельзя забывать про теги , – все должно быть аккуратно.
- Атрибуты тегов нужно обязательно заключать в кавычки. Так нельзя: . Можно только так: .
- Теги и CSS-свойства можно писать только маленькими буквами.
- В случае присутствия ссылки, содержащей знак & , его нужно преобразовать в &.
- У изображений, формируемых тегом
, обязательно нужно указать свойство alt .
И, также как в HTML 4.01, никаких воспоминаний о внешнем виде в XHTML-коде быть не должно.
Конечно, это не полная спецификация языка XHTML, в нем есть ряд ограничения, связанный со скриптами и еще Бог знает с чем. С полной спецификацией можно ознакомится в соответствующем разделе сайта W3C (хоть там все и на английском, но с красочными примерами правильного и ошибочного синтаксиса, так что желающий понять – поймет).
Как я говорил ранее XHTML – это расширяемый язык гипертекстовой разметки. Однако, вся эта расширяемость плохо воспринимается поисковиками, некорректно работает в IE6 и IE7, возникает необходимость настраивать заголовки, передаваемые сервером и выполнять строгие правила формата XML, чтобы все достоинства XTML работали в полную силу.
Достоинства языка XHTML – это вовсе не строгость синтаксиса, а возможность использовать хитрые теги разметки, например, принадлежащие пространству имен MathML (пример , который нужно запускать только в нормальных браузерах; IE6, вместо интерпретации XHTML кода, поднимет диалог сохранения файла) или придумывать теги самостоятельно в своем собственном пространстве имен (этот процесс детально описан на сайте W3C , анг. язык).
Дальнейшее развитие революционной ветки XHTML – это выход стандарта XTML 2.0 , значительно отличающегося от привычного HTML и несовместимого с XHTML 1.0. Окончание работ над XHTML 2.0 планировалось на 2009 год.
Стандарт XHTML 2.0 был заброшен и организация W3C переключил на разработку HTML 5.
Утвердить стандарт HTML 5 планируется не ранее 2020 года.
Какой DOCTYPE выбрать
Теперь, вооружившись знаниями истории стандартов, снова вернемся к статье на htmlbook.ru про DOCTYPE .
Мы знаем, что такое HTML 4.01 и XHTML 1.0. Остаются открытыми три вопроса:
- Что такое строгий и переходный синтаксис?
- Какой стандарт выбрать?
- Как научится верстать в соответствии с выбранным стандартом?
Теперь я последовательно отвечу на все поставленные вопросы.
Что такое строгий и переходный синтаксис
Оказывается, чтобы ломка при переходе на новый стандарт не была такой уж болезненной, придуманы переходные синтаксисы .
Вы же помните, что в стандарте HTML 4.01 запрещены HTML-инструкции, касающиеся внешнего вида? Да, помните конечно, я просто хотел в этом убедиться.
Теперь поэкспериментируем.
Сначала я выберу строгий синтаксис формата HTML 4.01 и укажу соответствующую директиву DOCTYPE:
Эта абракадабра означает, что HTML-код, идущий ниже, соответствует стандарту 4.01, принятому организацией W3C (вот этот кусок абракадабры "-//W3C//DTD HTML 4.01//EN" ). Инструкции, написанные организацией W3C, касательно данного стандарта, находятся вот там: "http://www.w3.org/TR/html4/strict.dtd" и браузер может прогуляться по этому адресу для уточнения.
Экспериментировать будем с вот таким HTML-кодом:
Немного текста
Основное внимание нужно обратить на присутствие в коде запрещенных элементов: align="center" и тега .
Теперь проверим этот код на соответствие стандартам. Как я неоднократно говорил ранее, есть замечательное расширение для FireFox под названием . Програмулина показывает две ошибки в HTML-коде:
Все оказалось предсказуемо. Валидатор ругается на атрибут align и тег , такие вещи запрещены в стандарте HTML 4.01, который мы декларируем первой строчкой HTML-кода.
Заменим первую строчку на доктайп стандарта HTML 4.01 переходного синтаксиса :
Теперь абракадабра сообщает браузеру, что HTML документ написан в соответствии с переходным синтаксисом стандрата HTML 4.01, потому что автору документа, периодически, непреодолимо хочется использовать запрещенные стандартом директивы. Поставив этот DOCTYPE в код, приведенный выше, повторим валидацию.
Вуаля, уважаемый читатель, тех двух ошибок как не бывало:
Я думаю, что теперь должны быть ясны все отличия строгого и переходного синтаксиса.
Переходный доктайп стандарта XHTML 1.0 позволит использовать HTML-директивы для задания внешнего вида, но за соответствием идеологии XML будет следить пристально и реагировать ошибкой валидации на каждый незакрытый одиночный тег или отсутствие alt-свойства у картинки.
Какой стандарт выбрать
Я считаю, что нужно верстать валидно в соответствии со строгим синтаксисом стандарта. Это заставит использовать HTML по его прямому назначению и не мешать котлеты с мухами в одной тарелке. Кроме того, если сайт сверстан валидно и неправильно отображается в каком-либо браузере – то это проблема браузера, новые версии которого все лучше и лучше соответствуют стандартам организации W3C и исправляют ошибки интерпретации валидного кода. А вот если вы реализовали какую-то сложную структуру извращенным, невалидным способом, то где гарантии того, что новые версии браузеров не порвут вашу верстку в клочки?
Так что, никаких переходных синтаксисов, только строгое соответствие стандартам .
За строгое соответствие стандартам выступает еще один довод. Ноги этого довода растут из нашего спора с Takobus, разгоревшегося в комментариях к статье о . Оказывается, IE8, все-таки, прекрасно понимает назначение CSS-свойства display: table-cell , правда в случае, если объявлен строгий синтаксис стандарта HTML 4.01. В переходном синтаксисе IE8 отказывается работать с данным CSS-свойством.
Теперь определимся с выбором между актуальными стандартами: HTML 4.01 и XHTML 1.0.
Вы собираетесь расширять язык HTML? Если нет, то и не нужно использовать гнилую ветку XHTML, которая так и не переродилась в версию 2.0.
Если вы хотите защитить свой продукт на будущее, чтобы в дальнейшем не возникло проблем при расширении функционала, из-за несоответствия HTML-кода стандартам XML, то помучайте себя слешами в одиночных тегах и обязательными alt-параметрами картинок. Но не делайте это напрасно, просто так использовать XHTML-стандарт не вижу никакой необходимости.
Есть еще DOCTYPE директивы, предназначенные для HTML-документов, использующих фреймы. Что-то я сомневаюсь, чтобы вы использовали древнюю технологию фреймирования 🙂
Для тех, кто не в теме:
Фреймы – это независимые браузерные окна, отображаемые на одной Web-странице. Каждое окно связано с независимым файлом HTML.
Теперь ясно, какой!DOCTYPE оказывается максимально подходящим:
Строгий синтаксис формата HTML 4.01
Как научится верстать в соответствии с выбранным стандартом
Оказывается, очень просто. Нужно установиться рекомендованное мной расширение для FireFox , которое популярным образом, с примерами, объяснит причину ошибки в HTML и покажет как ее устранить. Вот вам и валидный код.
Веселое видео в тему
P.S. Продолжается бессрочная акция по обмену постовыми. Я с радостью обменяюсь ссылками с тематическими блогами и сайтами. Если у вас есть желание, пишите в .
В продолжении к вышесказанному размещаю постовой.
Интересуешься веб-дизайном? Создаешь сайты? Тогда на Web 2.0 Portal ты найдешь много интересного.
Дата добавления: 2009-01-25
Если вы хоть раз заглядывали в код других страниц, то наверняка, замечали, что многие из них начинаются со строчки . Это так называемое «объявление типа документа» или Document Type Declaration (не путать с DTD - Document Type Definition).
В своей практике я пару раз столкнулся с такой ситуацией, когда, скопировав исходный код для изучения, я видел в своем браузере совсем другую картинку нежели на странице-образце. И долго не мог понять, почему это происходило - вроде скопировал весь код примера, а результат получался другой. В конце концов я обращал внимание на ту самую первую строчку кода с DOCTYPE, которую раньше всегда игнорировал. Это заставило меня внимательно обратиться к этой проблеме и, наконец-то, разобраться с данным термином.
Что такое DOCTYPE?
Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает "объявление типа документа") - это способ указать браузеру, как правильно отображать документ и по какой схеме. На сегодняшний день существует несколько типов HTML: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict и другие. DOCTYPE указывает браузеру структуру, элементы и их атрибуты для каждого типа HTML. Существует список DOCTYPE, рекоммендованых к использованию W3C .
Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.
При отсутствии DOCTYPE в документе браузер попытается отрендерить документ так как он считает нужным, а не так как этого планировал разработчик или требуют стандарты. Естественно, ни о какой валидации и речи быть не может.
Типы документов
Объявление типа документа (DOCTYPE) включает название (характерное для распознавания) корневого элемента и ссылку на DTD (document type definition - определение типа документа), которое в свою очередь, содержит информацию о синтаксических правилах для документа. В спецификации HTML объявление типа документа содержит информацию о версии HTML. Отсутствие объявления типа документа и информации о его версии не позволяет правильно обрабатывать этот документ.
Quirks Mode - Неопределенное состояние
При Quirks Mode в браузерах нарушаются рекомендации W3C для обеспечения нормального отображения страниц. Для разных браузеров существуют различные варианты совместимости с предыдущими версиями. Собственно цель Quirks mode - корректное отображение страниц, написанных для старых браузеров. При создании новых, современных страниц следует выполнять требования стандартов и рекомендаций и придерживаться Standards mode.
Standards Mode - Стандартный режим
При Standards Mode современные браузеры должны одинаково правильно представлять соответствующую стандартам страницу.
Almost Standards Mode - Почти соответствует стандартам
В браузерах Mozilla, Safari и Opera 7.5 еще существует третий вариант "the Almost Standards mode" (почти соответствующий стандартам), который не достаточно строго следует рекомендациям W3C. У Mac IE 5, Windows IE 6, Opera до 7.5 и Konqueror отсутствует Almost Standards mode, потому что они и так не могут работать в соответствии с CSS2, поэтому они будут находиться в этом случае в Standards modes. Фактически, их Standards modes это Almost Standards mode браузера Mozilla, а не полноценный Standards modes. Важно помнить: браузеры имеют одинаковые основные состояния, но даже при одинаковых состояния они все равно работают по-разному.
Как декларация DOCTYPE влияет на отображение браузерами?
В интернете и по сей день многие сайты вообще не указывают DOCTYPE. И может показаться, что ее наличие не так уж и важно. Один из авторитетных экспертов в этой области Джеффри Зельдман говорит, что если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, браузер перейдет в «загадочный» режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов. В этом режиме браузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще непонятно во что.
Рассмотрим такой пример: на некоторых сайтах веб-мастера используют цветную вертикальную полосу прокрутки, чтобы она вписывалась в общий стиль сайта. Однако изменения цвета полосы прокрутки являются нарушением стандартов CSS2. В браузерах IE 6 и Opera 9 это работает, если в HTML указан неполный DOCTYPE стандарта HTML 4.01 Transitional (). В других случаях правила в таблице стилей перестают работать, и полоса прокрутки приобретает стандартный вид. В Mozilla Firefox цветные полосы прокрутки никогда не работали.
Особенно важно наличие полной декларации DOCTYPE в блочных сайтах с использованием
Тип документа: объявлять или не объявлять?
Многие эксперты и автоматические валидаторы считают, что тип документа объявлять нужно всегда. Но сли учесть тот факт, что многие сайты прекрасно отображаются в браузерах и без него, возникает резонный вопрос: «А нужен ли на самом деле?». Последнее слово за вами, но лучше прислушаться к экспертам и следовать стандартам.
Ошибки при использовании DOCTYPE
На многих сайтах можно встретить в страницах следующий вариант тега DOCTYPE, который был без всяких изменений перенесен с сайта w3.org:
Посмотрите на последнюю часть тега DOCTYPE ("DTD/xhtml1-strict.dtd"). Обратите внимание, что это относительная ссылка на документ, расположенный на сайте W3C. Так как целевой документ находится на сайте W3C, а не на вашем, этот URI для броузера бесполезен.
А выглядеть DOCTYPE должен вот так:
Этот вариант DOCTYPE содержит в конце полный вариант URI, а значит браузер знает, где этот документ надо найти в сети, и следовательно выведет вашу страницу в том стандарте, который вы упомянули в DOCTYPE.
Использование DOCTYPE в Expression Web
Если для создания будущих веб-страниц вы используете стандартный Блокнот, то вам придется вручную вставлять объявления типа в начале каждого документа. Современные веб-редакторы типа Adobe DreamWeaver или Microsoft Exression Web делают это автоматически.
Кстати, Expression Web использует DOCTYPE для валидации и для завершения кода по технологии IntelliSense, контролируя процесс написания документа. В настройках программы вы можете установить, какой тип документа будет использоваться по умолчанию. Для этого в меню Tools выберите Page Editor Options, далее выберите вкладку Authoring и установите Document Type Declaration.
Вот как можно быстро вставить нужный тип документа на старой странице с отсутствующим объявлением:
- Нажмите клавиши CTRL+HOME – курсор переместится в начало страницы (Line 1, Column 1)
- Нажмите CTRL+ENTER – появится меню с выбором DOCTYPE
- Выберите необходимый DOCTYPE из выпадающего списка
При написании статьи использовались материалы с других сайтов.
Каждый, кто имеет дело с кодом, верстает или пока еще только учится верстать сайты, просто обязан знать о том, что в начале каждой HTML страницы перед тегом HTML должен стоять DOCTYPE.
Строчка с DOCTYPE (Document Type Definition) в начале HTML страницы указывает на тип документа, который вы будете использовать при написании HTML кода для вашего сайта. Это непарный тег, то есть у него нет закрывающего тега.
Нужно понимать, что строчка, в которой прописывается DOCTYPE - это не просто очередной HTML тег. Это важная инструкция, с помощью которой мы говорим браузеру, какая версия HTML использовалась при написании страницы.
Главным преимуществом использования DOCTYPE является то, что ваш сайт будет правильно работать и одинаково ровно и красиво смотреться во всех браузерах.
Какие существуют виды DOCTYPE?
Cуществует несколько видов DOCTYPE. Есть строгие виды (strict ), которые работают на основе только определенных тегов, есть переходные (transitional ), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset ).
Подробно в этой статье я не буду рассматривать каждый из них, так как это не является моей целью, просто перечислю:
Подробную информацию по каждому виду DOCTYPE вы можете найти в интернете, просто введя в поиск нужную фразу, поэтому останавливаться на этом мы не будем.
Что касается использования разных видов DOCTYPE, следует иметь ввиду, что если вы изначально писали свой сайт в одном DOCTYPE, то не рекомендуется его менять в будущем на какой-то другой, потому что могут возникнуть проблемы с правильным отображением сайта из-за того, что вместе со сменой DOCTYPE вы автоматически поменяете правила обработки тегов браузерами.
Когда вы выбираете тот или иной DOCTYPE, вы автоматически выбираете определенные правила, по которым должен анализироваться код в браузерах.
Поэтому DOCTYPE нужно выбирать для сайта, изначально хорошенько подумав, в соответствии с тем, какой вам будет нужен вид обработки HTML кода браузерами, и впоследствии уже его не менять.
Только представьте, сколько проблем раньше (почему раньше, объясню ниже в статье) несло верстальщику наличие нескольких видов DOCTYPE, между которыми приходилось постоянно выбирать, какой лучше использовать, и думать, не ошибся ли ты в своем выборе.
Можно ли вообще обойтись без DOCTYPE?
У тех, кто не любит заострять свое внимание на разных мелочах, может возникнуть вполне естественный вопрос: "А зачем мне все это нужно? Может, мне вообще не использовать DOCTYPE?"
Конечно, теоретически можно его и не указывать, но тогда вы сидите на пороховой бочке замедленного действия, не зная точно когда она рванет (а рванет она 100%).
Короче говоря, если вы не используете DOCTYPE совсем, то рискуете лицезреть созданный вами сайт не в самом приглядном виде в браузере, причем, в каждом браузере будут возникать разные проблемы с правильностью отображения, а решить все их вам будет, мягко говоря, сложновато.
Так что же делать, если не хочется во все это вникать в подробностях?
Преимущества использования DOCTYPE HTML5.
Хорошая новость состоит в том, что с выходом последней версии HTML5 (которая, кстати, все еще находится в процессе разработки, по некоторым данным окончательный стандартный вариант обещают предоставить в 2014 году) стало намного удобней выбирать DOCTYPE для своих сайтов.
Дело в том, что правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и, насколько я понимаю, объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
Поэтому сейчас, когда я верстаю, то уже не задумываюсь, какой тип DOCTYPE мне выбрать, а ставлю на первой строчке
.
Это все, что нужно написать, чтобы указать что это DOCTYPE HTML5. По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки) , поэтому там нет тех данных, которые указывались до этого, а следовательно - в нем присутствует только короткая команда. И дальше уже идет сам документ:
Согласитесь, что намного проще запомнить такую короткую строчку, чем каждый раз напрягаться , пытаясь вспомнить или найти где-то длинный код, который должен быть написан при использовании других версий.
Что касается браузеров: как старые браузеры относятся к DOCTYPE HTML5? Не возникнут ли проблемы с этим?
По этому поводу хочу сказать, что:
- Во-первых, мы должны равняться на прогресс и на будущее, а будущее - за новыми браузерами, и сейчас становится все-таки меньше и меньше людей, использующих старые браузеры.
- А во-вторых, Doctype HTML5 так устроен, что даже браузеры, которые в принципе не были созданы для того, чтобы поддерживать его (IE (начиная с IE8), старые версии FireFox, Opera, Safari), увидев команду, сразу же переключают содержимое в стандартный режим.
Это значит, что если вы сегодня начнете создавать свои страницы на основе DOCTYPE HTML5, то можете быть уверены в том, что им обеспечена долгая жизнь.
Выводы.
Какой из всего вышесказанного мы можем сделать вывод?
Использовать DOCTYPE необходимо, если не хотите впоследствии решать всяческие проблемы, связанные с его отсутствием (нужны они вам? ).
И использовать лучше всего последнюю версию DOCTYPE HTML5.
Очевидно, что многое изменилось и продолжает меняться к лучшему в этом направлении. Все это делается для того, чтобы облегчить нам с вами жизнь и сделать нашу работу максимально удобной, что рисует довольно яркие картины в перспективе!
А потому желаю вам успехов!
Сегодня приступим к изучению html и css. Данную тему я постараюсь раскрыть максимально понятно, для любого читателя. И не имеет значения: знакомы вы с этой темой или только имеете желание изучить код, который довольно широко используется в сайтостроении. И чтобы затронуть, как можно больше примеров применения и использования кода, я планирую написать весьма внушительный список статей, посвященных , без использования, каких либо cms, или же комбинируя html-странички с движками dle и wordpress. Разбирать вопросы мы будем по мере их поступления, а не в традиционном стиле, сначала теория, а потом практика. Я сразу покажу все на практике, подкрепляя все теорией.
Но начнем, конечно же, сначала. То есть с того, что такое html? И другого немаловажного вопроса: «Зачем нужен doctype и какой выбрать?» Собственно, это и тема, сегодняшнего поста.
Что такое html?
Html — это аббревиатура языка разметки гипертекста: «HyperText Markup Language», которая определяет расположение элементов на веб-странице и их оформление. Данный язык никак не ограничивает вебмастера, в его фантазии и позволяет создавать практически любую структуру и оформление страницы. Вообщем, если вы решили посвятить себя созданию сайтов, вы должны обязательно знать html-код. Сложного в нем ничего нет, и я надеюсь, что по итогам цикла статей, вы в этом убедитесь.
Любой код веб-сайта начинается с определения типа документа (DTD — document type definition(описание типа документа)) браузерами, для корректного отображения сайта на экранах наших мониторов. А чтобы помочь браузеру определиться, необходимо указать тип документа, который используется на сайте. Для этого, существует тег
| DOCTYPE | Описание |
| HTML 4.01 | |
| Строгий синтаксис HTML. | |
| Переходный синтаксис HTML. | |
| HTML-документ, с применением фреймов. | |
| HTML 5 | |
| Для всех документов. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| XHTML-документ, с применением фреймов. | |
| XHTML 1.1 | |
| Такой же, как и строгий синтаксис XHTML, но допускается добавление модулей. | |
Теперь, попробуем разобрать по кусочками, что же содержит DOCTYPE.
html — указывает элемент верхнего уровня, то есть самую основу кода. Для HTML, это тег .
PUBLIC — определяет публичность документа. Данный тип документа является публичным.
«-» — указывает, зарегистрирован или нет разработчик типа документа в международной организации по стандартизации (International Organization for Standardization, ISO). Имеет два значения: минус или плюс. Минус — не зарегистрирован. Плюс — зарегистрирован. Но для W3C, указывается «-»
W3C — организация разработавшая DTD.
DTD — тип документа. Для HTML и XHTML указывается DTD.
HTML 4.01 Transitional (как пример) — имя документа, его версия и синтаксис, который он использует.
EN — язык на котором написан документ. И естественно, HTML и XHTML используют английский язык.
http://www.w3.org/TR/html4/loose.dtd — адрес документа с описанием документа (DTD).
Вот столько информации несет в себе самая первая строка HTML или XHTML кода. Но все же могут возникнуть проблемы с определением насколько соответствует наш документ выбранному синтаксису или нет. Для этого, существует валидатор разметки, который поможет нам определить на сколько валиден (правильный) наш код. Валидатор предоставляется той же организацией. которая является официальным разработчиком DTD. Находится он на сайте http://validator.w3.org/ .
Итак, нам остается только определиться с выбором. И выбрать
На этом у меня все. Надеюсь, данный пост будет полезен И поможет разобраться в вопросе, о DOCTYPE.
Здравствуйте, уважаемые читатели блога сайт. Я хочу продолжить рассказывать об основах работы с Html с самого начала, последовательно и ничего не опуская. Сегодня мы поговорим о специальном теге (декларации) Doctype, узнаем как правильно оформлять комментарии в ХТМЛ коде, как прописывать заголовок веб документа Title и постараемся разобраться в отличиях блочных и строчных элементах.
В предыдущей статье из рубрики (в которой в основном рассказывалось про то, ) мы закончили на том, что любой документ в интернете должен иметь определенную структуру.
Директива Doctype для Html, Xhtml и ХТМЛ 5
Первым элементом языка разметки, который вы встретите в любом правильном Web документе (странице сайта), будет специальная директива Doctype. Она начинается с угловой скобки и проставленного сразу же за ней восклицательного знака
Сам по себе элемент Doctype служит для объявления типа данного документа и помогает браузеру понять, на какую версию Html или XHTML (по классификации валидатора W3C) ему следует опираться при разборе кода загружаемой веб страницы.
Если тип документа не будет указан в этой директиве в соответствии с общепринятыми правилами, то браузер, скорее всего, все равно правильно отобразит ваш документ, но не факт, что тоже самое сделают и другие популярные тысяч ваших читателей. Поэтому Doctype должен присутствовать в исходном коде страницы обязательно и составлен он должен быть правильно.
Но давайте на этом остановимся чуть поподробнее. Сейчас мы с вами наблюдаем некий дуализм или же два типа документов в сети — как делали раньше до выделения CSS из лона языка ХТМЛ и как делают сейчас по принятым современным стандартам.
Естественно, что после принятия новых стандартов в сети интернет оставалось все равно огромное множество документов, созданных по старым принципам чистого ХТМЛ (без CSS) и браузеры должны были с ними как то работать. Корпорация Майкрософт в свое время предложила использовать эту самую директиву Doctype из нового языка разметки XML.
Выглядеть она может по разному (читайте об этом ниже), но проще всего использовать такой вариант (чуть ниже по тексту объясню почему):
Таким образом браузер будет понимать, по каким именно стандартам ему разбирать код документа. Если данная декларация имеет место быть, то браузер переходит в режим работы по стандартам (standarts mode). Если же ее браузер не найдет в самом начале документа (или она будет не соответствовать правильному варианту написания), то тогда браузер включит хитрый режим уловок (quirks mode).
Документ в этом случае будет отображаться таким образом, как будто бы этот браузер очень старый (старинный). Если в этот же документ добавить декларацию, то браузер будет осуществлять разбор кода с учетом всех имеющихся на текущий день стандартов.
Правда, понятие старого браузера очень уж расплывчатое. Все тот же лидер по скорости работы и скорости западания в сердца пользователей Google Chrome появился-то только в 2008 году.
Давайте начнем со стандарта языка гипертекстовой разметки 4.01 (ХТМЛ 5 пока что еще только разрабатывается). Для этого случая существует три варианта Doctype: строгий, переходный и с поддержкой фреймов:
Чаще всего используют второй вариант (Transitional), т.к. он допускает больше вольностей в написании кода документа, ну, а вариант с фреймами вам вряд ли пригодится, в силу неактуальности их использования на сегодняшний день.
Собственно, имеются такие же три варианта Doctype для XHTML — строгий, переходный и с поддержкой фреймов:
Но давайте посмотрим откуда берутся эти варианты правильного написания декларации. Помните, мы в первой статье рассматривали таблицу допустимых :
И отдельную таблицу возможных :
Как вы можете видеть, в обеих этих таблицах присутствует столбец «Depr», в котором буквой «D» помечены устаревшие и не рекомендуемые к применению теги и атрибуты языка ХТМЛ. Это мы с вами уже рассмотрели. Но обратите внимание, что напротив каждой буквы «D» в соседнем справа столбце «DTD» стоит либо буква «L» (Loose DTD), либо буква «F» (Frameset DTD).
Т.о. все теги и атрибуты, которые не помечены буквами «D» (не рекомендуемые) входят в строгую декорацию Doctype (только рекомендованные элементы и ничего более). Если же вы все-таки будете допускать использование не рекомендованных тегов и атрибутов языка Html (они помечены литерой «D»), то нужно будет объявлять для таких документов декларацию переходную.
Некоторые элементы и атрибуты, помеченные в столбце «DTD» буквой «F» (например, FRAME, FRAMESET), будут входить в декларацию Doctype для фреймовых структур. Она базируется на основе переходной, к которой добавляются теги и атрибуты для создания , о которых вы можете почитать по приведенной ссылке.
А теперь давайте попробуем разобраться, а из каких частей состоит декларация Doctype?
Сначала идет название — «Doctype». Тут, думаю, все понятно. Дальше идет «Html» — корневой элемент данного языка разметки. Затем идет указание — публичная данная декларация или же системная. Все варианты Doctype являются публичными, что обозначается словом «PUBLIC».
А дальше идут два идентификатора документа. Первый из них называется публичным идентификатором («-//W3C//DTD HTML 4.01//EN»). Минус означает то, что данная декларация не зарегистрирована в стандарте ИСО. Затем следует название консорциума, ее название и язык, на котором она написана. Во втором идентификаторе указывается путь до файла строгого варианта.
Ну, а теперь давайте раскрою вам всю правду про Doctype . Браузерам важно только формально правильное ее написание, но они ни в коем разе не полезут на сайт консорциума, чтобы скачать указанный в ней файл.
Даже если вы выберите вариант строгой декларации и при этом будете использовать не рекомендуемые в современной версии Html теги и атрибуты, то любой браузер все равно вас правильно поймет — это факт проверенный и подтвержденный.
Поэтому, чтобы не мудрствовать лукаво, в Html 5 написание Doctype будет выглядеть уже вот так:
И все. Оставили только «Html». И несмотря на то, что ХТМЛ 5 еще не полностью внедрен, данный вариант поддерживается всеми современными браузерами и вы можете смело им пользоваться. О как, а вы говорите...
Html комментарии в исходном коде страницы и тег Title
В служебной области Web документа (между тэгами Head) обязательно должен быть прописан заголовок этого самого документа (веб страницы), заключенный в элементы Title (см. на приведенном рисунке).
Переоценить значимость заключенной в нем информации очень трудно (я не преувеличиваю). Когда вы будет подбирать ключевые слова в Яндекс Wordstat (используя для этого ), то после составления семантического ядра вам обязательно нужно будет упомянуть выбранные ключевые слова в заголовке Title.
Про то, насколько важны слова заключенные в Тайтле для будущего успешного продвижения проекта, вы можете узнать из статьи , а про то, как прописать нужные вам слова в Title для Joomla и WordPress, вы узнаете из статьи .
Теперь давайте прежде, чем переходить к рассмотрению конкретных тегов, остановимся на таком понятии, как комментарии в Html коде . Они довольно часто проставляются для того, чтобы потом было проще найти нужные участки или же для того, чтобы другим было проще понять задумку автора. Само собой разумеется, что текст этих комментариев ни в коем случае не должен отображаться на веб странице, поэтому они специальным образом оформляются в коде.
Особенно актуальны комментарии в Html были во времена господства табличной верстки (читайте про ), ибо тогда, по сравнению с современной блочной версткой (тут описана на примере), очень просто было запутаться, что и в какой ячейке таблицы выводится:
Наверное, из приведенного выше примера вы уже поняли, что все комментарии в языке Html начинаются точно так же, как и любые другие элементы — с угловой скобки, но сразу же после нее, при формировании комментария, нужно будет поставить восклицательный знак (при описании Doctype я упоминал, что комментарии тоже являются декларациями , которые обязательно начинаются с
Весь текст комментария, который будет находиться между этими двойными дефисами, будет рассматриваться браузерами как служебная информация и никак обрабатываться не будет. Корректность его написания можно наглядно оценить при использовании описанного :
Но внутри комментария можно размещать не только текст, но и все что угодно. Например, довольно часто встречаются закомментированные фрагменты Html кода и этот участок браузерами обрабатываться не будет. Что примечательно, комментарий можно открыть на одной строке кода, а закрыть хоть через сотню строк, и заключенный таким образом кусок кода для браузера просто перестанет существовать.
Все довольно просто и думаю, что с ними у вас проблем не возникнет. Хотя есть одна тонкость в работе с многострочными комментариями в ХТМЛ. Внутрь одного комментария нельзя помещать другой , иначе часть закомментированной информации может быть отображена браузером на веб странице. Давайте для примера рассмотрим такую конструкцию:
продолжение внешнего коммента-->
Итак, браузер при разборе кода веб страницы обнаружит открывающие символы декларации комментария и начнет поиск закрывающих. Найдет его после слов «Вложенный коммент», а вот все остальное (в нашем случае это продолжение внешнего коммента-->) будет обработано браузером и выведено на веб странице.
В принципе, если вы пользуетесь при написании Html кода редактором с подсветкой, то сразу же заметите неладное по изменению цвета вашего комментария:
Понятие блочных и строчных элементов (тегов) в Html
Все теги, которые возможно использовать внутри элементов Body (то, что отображается на веб странице и список которых вы можете найти в валидаторе W3C), можно разделить на две группы: строчные и блочные теги.
Блочные элементы используются для построения структуры Web документа, а строчные используются для оформления кусков текста (строк). Причем, всегда нужно соблюдать одно незыблемое правило — не заключать внутрь строчных блочные теги .
Самыми яркими и показательными представителями строчных и блочных тэгов являются, соответственно, Div (блочный элемент — отсюда и пошло название блочной верстки) и Span (строчный). Эти теги языка гипертекстовой разметки являются парными, т.е. у них есть открывающий и закрывающий тэг.
Вообще, теги Div и Span не имеют абсолютно никакого предназначения и смысла в чистом Html без использования таблиц каскадных стилей CSS. Они являются контейнерами, позволяющими изменять свойства заключенных в нем элементов через CSS.
Если вы пропишите в исходном коде страницы подряд несколько элементов Div, то на веб странице каждый из них, скорее всего, попытается занять все доступное ему пространство по ширине, и поэтому расположены такие контейнеры будут друг под другом. Контейнеры Div при нормальных условиях рядом друг с другом стоять не будут, если принудительно не заставить их делать это.
Например, такой вот Html код будет отображаться в трех блоках расположенных друг под другом:
В браузере Firefox наряду с очень полезным я еще использую плагин , который очень помогает при . Среди всего прочего он может показывать блочные элементы, обводя их рамочкой. Именно этот плагин developer создал синие рамочки вокруг контейнеров Div на приведенном скриншоте.
В теги же Span можно заключать куски текста (строки) Html кода для придания им определенных свойств через CSS, и такие элементы могут размещаться в одной строке рядом друг с другом. Например, такой вот код в браузере будет иметь следующий вид:
Содержимое Span здесь тоже было подсвечено с помощью плагина Web developer. Т.к. элементы Span являются строчными, то не следует внутрь них заключать блочные теги, например, все те же Div контейнеры.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Списки в Html коде - теги UL, OL, LI и DL
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Как создать гиперссылку (А, Href, Target blank), как открывать ее в новом окне на сайте, а так же сделать картинку ссылкой в Html коде
Iframe и Frame - что это такое и как лучше использовать фреймы в Html