Элемент DOCTYPE. Что это такое и зачем он нужен. Дочерние и контекстные CSS селекторы
Только представьте: вы создаете страницу сайта, все делаете по правилам, однако ваш браузер некорректно отображает всю ту информацию, которую вы разместили на вашей странице. С чем это может быть связано?
Некорректное отображение данных, представленных на веб-странице, обуславливается в первую очередь тем, что браузер неправильно определяет тип документа, размещенного на странице – DTD .
В свою очередь это может быть вызвано только тем, что вы использовали неверный заголовок для кода. Для правильного определения типа DTD сегодня существует специальный тег под названием Doctype .
Не лишним будет упомянуть о том, что данный тег имеет достаточно долгую историю. Он был разработан в то время, когда создали Internet Explorer 5 для MacOS и столкнулись с определенными трудностями чтения некоторых страниц.
Дело в том, что новая (по тем временам) версия браузера превзошла все ожидания и просто перестала отображать старые страницы сайтов надлежащим образом. И поэтому, старые страницы, не имевшие в коде на тот момент данного тега, были оснащены Doctype , стоящим перед элементом html .
Почему необходимо указывать именно Doctype?
Как уже было сказано выше, данный тег вставляют в код любого веб-документа для правильного определения его типа. Указание типа документа требуется в первую очередь потому, что сегодня существует сразу несколько версий HTML документов, написанных на разных языках. В том числе существует и расширенная версия – XHTML.
Пример тега Doctype:
Разновидности тега Doctype
Сегодня существует несколько вариантов данного тега, которые используется для разных версий веб-документов:
- Doctype HTML 4.01. Код с использованием данного тега выглядит следующим образом:
.
В данном случае используется строгий html:
- Переходные версии Doctype HTML 4.01.
- HTML5 Doctype выглядит таким образом. Этот тег подходит для любых документов.
...
«http://www.w3.org/TR/html4/strict.dtd»>.Что произойдет, если использовать старые версии тега Doctype?
Значение тега Doctype очень важно, так как именно он позволяет работать всем веб-страницам в соответствии с указанным стандартом.
В том случае, если вы будете использовать неполную версию тега, некорректно его вставите или же не будете использовать его в коде и вовсе, то ваш браузер автоматически перейдет в «загадочный » режим.
Отображение документа в данном случае будет происходить таким образом, будто вы вольно отступали от стандартов.
На сегодняшний день только браузер Opera старается отображать страницы таким образом, как если бы они соответствовали всем стандартам, независимо от того, был ли использован тег Doctype или же нет.
Однако, стоит отметить, что данный браузер пока не полностью поддерживает все стандарты W3C DOM , но работы над этим уже ведутся.
Где можно взять качественный тег Doctype?
Если вы хотите получить и использовать правильный тег Doctype, то вы можете воспользоваться сервисом www.w3.org , что и делают сегодня большинство веб-мастеров.
Здесь вы можете взять DOCTYPE HTML PUBLIC , который потребуется для определения веб-документов типа HTML 4.01 , а также Doctype HTML 5 и многие другие типы тегов, необходимые для создания страниц, соответствующих стандартам.
Пример использования тега для HTML 5 , взятого с www.w3.org :
Text, text, text,text, text, text, text,
Надеюсь, что данная статья оказалась для Вас полезной! Удачи!
Хорошо Плохо
В этом разделе статьи мы расскажем, как использовать тег , а также опишем его синтаксис и приведем практические примеры изменения размера текста в HTML.
Дочерние селекторы CSS - это селекторы, которые используются для применения стилей к элементам только в тех случаях, когда они являются дочерними по отношению к другим (родительским) элементам. Как и селекторы потомков, дочерние селекторы являются составными и складываются из простых селекторов (классы, идентификаторы и т.д.).
И снова, если вы забыли, что такое дочерние элементы, то давайте вспомним, разобрав уже знакомый вам пример.
<тег1> <тег2>... <тег3><тег4>...
Элемент называется дочерним по отношению к другому элементу, если он находится внутри него на первом уровне вложенности. В нашем примере <тег2> и <тег3> являются дочками <тег1> , а <тег4> - это дочка <тег3> .
Дочерние селекторы состоят из двух или более простых селекторов разделенных знаком "> ", где сначала указывается родитель, потом его дочерний элемент, затем дочка этого дочернего элемента и т.д. То есть, как и в селекторах потомков, задается путь прохождения по дереву документа. Стили будут применены только к тем элементам, селекторы которых находятся последними в списке. Общий синтаксис:
селектор1 > селектор2 {
Пробелы с обоих сторон знака "> " можно ставить, а можно и нет, по желанию.
Пример использования дочерних селекторов CSS
Параграф1.
Параграф2.
Результат в браузере
Параграф1.
Параграф2.
В этом примере вам надо обратить внимание на два момента. Здесь имеется три элемента , но только у двух из них есть рамки, отступы и поля. Почему? И второй момент. Только у первого параграфа синий цвет текста.
Internet Explorer 6.0 не понимает дочерние селекторы, поэтому, если вы создаете свой сайт с учетом этого старого браузера - помните об этом.
Дочерние селекторы в HTML-таблицах
Многие новички (а иногда уже и не новички) в создании сайтов сталкиваются с определенными проблемами при использовании дочерних селекторов в HTML-таблицах. Чтобы вы поняли, о чем идет речь, давайте посмотрим на такую обычную таблицу.
| Ячейка 1.1 | Ячейка 1.2 |
| Ячейка 2.1 | Ячейка 2.2 |
А теперь вопрос. Как вы поступите, если вам понадобится с помощью дочерних селекторов пройти от тега к ячейкам? Если вы решили написать вот так, то это неверно:
table > tr > td { свойство: значение; свойство: значение; ... }
А догадываетесь, почему неверно? Нет? Дело в том, что вы забыли еще про один элемент - , который даже если не указан явно, то все равно незримо присутствует в каждой HTML-таблице. Просто у него нет обязательных открывающих и закрывающих тегов, поэтому про него часто забывают. Кстати да, в HTML-учебнике мы его с вами не проходили, так как в реальности его явное указание редко когда нужно. Ну, думаю вы уже догадались, какая будет правильная запись, но я вам все же покажу.
table > tbody > tr > td { свойство: значение; свойство: значение; ... }
Кстати, не только таблицы имеют элементы с необязательными открывающими тегами, есть и еще такие элементы. Просто на практике «проблемы забывчивости» возникают чаще всего именно с таблицами, поэтому я и заострил ваше внимание на этом.
Домашнее задание.
- Установите на странице шрифт Arial с размером 0.9em и какой-нибудь фон.
- Напишите на странице несколько заголовков и параграфов, измените размер и цвет текста заголовков так, как посчитаете нужным.
- Сделайте так, чтобы ссылки непосредственно в параграфах страницы были синего цвета без подчеркивания. Но при этом, если ссылки дополнительно обрамляются любым тегом, например для курсива, то они должны отображаться уже с подчеркиванием и красного цвета. Еще раз заостряю ваше внимание на том, что не надо прописывать стили ссылок с каждым обрамляющим тегом в отдельности, сделайте универсально. Как? Подумайте.
- Создайте небольшое меню в правой части страницы и зафиксируйте его, для этого вам понадобится свойство и еще парочка сопутствующих ему свойств, там разберетесь. При этом, пусть меню не только остается на месте в пределах окна браузера, но и при скроллинге не наползает на содержимое страницы.
Думаю последний пункт урока будет для вас самым сложным, но не пытайтесь сразу полностью погрузиться в освоение позиционирования. Просто сделайте домашнее задание. Кстати, этот пункт не будет работать в Internet Explorer 6.0, так как старичек не понимает фиксированное позиционирование.
С декларации должен начинаться любой HTML документ. Эта декларация должна располагаться перед .
В действительности декларация не является тегом HTML. Это специальная инструкция для браузера, информирующая его о том, какая версия HTML используется на данной странице.
В HTML 4.01 декларация ссылается на DTD (определение типа документа, которое задает синтаксис конструкций разметки), так как HTML 4.01 базируется на SGML (стандартный обобщённый язык разметки). DTD определяет правила для языка разметки, благодаря этому браузер корректно отображает контент страницы.
HTML5 не базируется на SGML и поэтому ему не нужно ссылаться на DTD.
Необходимо всегда добавлять декларацию в HTML документ, чтобы браузер знал, документ какого типа он получил.
Если эта декларация не используется или используется неправильно, браузер будет думать, что вы не знаете, что вы делаете, и переключится в режим "обратной совместимости", при котором вывод многих элементов осуществляется совсем не так, как должно быть на самом деле. Это может показаться жестом гибкости и всепрощения, но на практике приводит к случайным и непонятным результатам.
Декларация должна быть в точности такая, как в примере (включая написание заглавными буквами слова "DOCTYPE"). В отличие от других тегов этот тег не закрывается.
Разница между HTML 4.01 и HTML5
В HTML 4.01 существует три разновидности декларации . В HTML5 есть только один вид декларации.
Виды декларации DOCTYPE
HTML 4.01 Strict
Эта DTD содержит все HTML элементы и атрибуты, ИСКЛЮЧАЯ запрещенные элементы и элементы представления (вроде элемента font). Использование фреймов не допускается.
HTML 4.01 Transitional
Эта DTD содержит все HTML элементы и атрибуты, ВКЛЮЧАЯ запрещенные элементы и элементы представления (вроде элемента font). Использование фреймов не допускается.
HTML 4.01 Frameset
Эта DTD аналогична HTML 4.01 Transitional, при этом допускается использование фреймового контента.
XHTML 1.0 Strict
Эта DTD содержит все HTML элементы и атрибуты, ИСКЛЮЧАЯ запрещенные элементы и элементы представления (вроде элемента font). Использование фреймов не допускается. При этом разметка должна соответствовать правилам XML.
XHTML 1.0 Transitional
Эта DTD содержит все HTML элементы и атрибуты, ВКЛЮЧАЯ запрещенные элементы и элементы представления (вроде элемента font). Использование фреймов не допускается. При этом разметка должна соответствовать правилам XML.
XHTML 1.0 Frameset
Эта DTD аналогична XHTML 1.0 Transitional, при этом допускается использование фреймового контента.
XHTML 1.1
Эта DTD аналогична XHTML 1.0 Strict, при этом можно добавлять различные модули (например, для предоставления поддержки восточно-азиатских языков).
HTML пример
Декларация HTML документа по стандарту HTML5:
Описание
Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Существует несколько видов , они различаются в зависимости от версии языка, на которого ориентированы. В табл. 1. приведены основные типы документов с их описанием.
| DOCTYPE | Описание |
|---|---|
| HTML 4.01 | |
| Строгий синтаксис HTML. | |
| Переходный синтаксис HTML. | |
| В HTML-документе применяются фреймы. | |
| HTML 5 | |
| Для всех документов. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| Документ написан на XHTML и содержит фреймы. | |
| XHTML 1.1 | |
| Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. | |
Синтаксис
верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "">
Параметры
Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег .
Публичность — объект является публичным (значение PUBLIC ) или системным ресурсом (значение SYSTEM ), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC .
Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».
Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C , это название и пишется в .
Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD .
Имя — уникальное имя документа для описания DTD.
Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN ).
URL — адрес документа с DTD.
Закрывающий тег
Не требуется.
Пример 1. HTML 4.01
HTML 4.01 IE Cr Op Sa Fx
Пример 2. HTML 5
HTML5 IE Cr Op Sa Fx
Разум - это Будда, а прекращение умозрительного мышления - это путь. Перестав мыслить понятиями и размышлять о путях существования и небытия, о душе и плоти, о пассивном и активном и о других подобных вещах, начинаешь осознавать, что разум - это Будда, что Будда - это сущность разума, и что разум подобен бесконечности.
Браузеры
Internet Explorer до версии 6.0 требует, чтобы стоял обязательно в первой строке кода. В противном случае браузер переходит в режим совместимости (quirk mode).
Хотя значение URL является не обязательным, браузеры при его отсутствии могут перейти в режим совместимости, поэтому всегда указывайте полный путь к DTD-файлу, как показано в табл. 1.
указывает, в соответствии с каким стандартом HTML написана ваша Web-страница.
| DOCTYPE | Описание |
|---|---|
| HTML5 | |
| Для всех документов. | |
| HTML 4.01 | |
| "http://www.w3.org/TR/html4/strict.dtd"> | Строгий синтаксис HTML. |
| Переходный синтаксис HTML. | |
| В HTML-документе применяются фреймы. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| Документ написан на XHTML и содержит фреймы. | |
| XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов. | |
| XHTML 1.1 | |
| "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. |
Итак, доктайпов существует несколько (строгие и переходные, для HTML и XHTML). Какой стандарт выбрать - вот в чем вопрос.
Стандарты HTML и XHTML
HTML - стандартный язык разметки Web-документов.
В HTML 4.01 и HTML5 внешний вид страницы отделен от ее содержания. Содержание и структура (заголовки, абзацы, ссылки) задаются в HTML. Оформление (выравнивание, шрифты, цвета) задаются CSS-стилями.
Например, тег и атрибут align объявлены устаревшими.
XHTML - расширяемый язык разметки Web-документов, созданный на базе XML . Стандарт XHTML представляет собой перечень различий между HTML 4.01 и XHTML.
Достоинства языка XHTML - не строгость синтаксиса, а возможность придумывать собственные теги.
Однако, 2 июля 2009 года Консорциум Всемирной паутины (W3C) сообщил о прекращении работ над XHTML 2.0, посчитав концепцию XHTML неверной. Группа программистов переключилась на работу над стандартом HTML5. И хотя стандарт HTML5 всё ещё не утверждён, на нём уже написано множество сайтов.
Кому интересно, когда же HTML5 будет закончен, могут ознакомиться с первоисточниками:
Официальная версия стандарта HTML5 находится по адресу: www.w3.org/TR/html5/
Определимся с выбором. Сделать его несложно: использовать XHTML-стандарт не стоит, если вы не собираетесь расширять язык HTML.
На!DOCTYPE, предназначенных для документов, использующих фреймы , останавливаться не будем: позавчерашний день.
Следующий вопрос: какой выбрать синтаксис - строгий или переходный?
Строгий и переходный синтаксис HTML 4.01
Переходные синтаксисы существуют для того, чтобы облегчить переход на новый стандарт. Они пропустят многое из того, что строгий синтаксис посчитает ошибками.
Понять, что тут к чему, проще на примере. Сначала зададим строгий синтаксис.
Строгий синтаксис
Проверка на валидность
красным цветом.
Соответствие HTML-кода объявленному стандарту называют валидностью , а проверку на это соответствие - валидацией .
Чтобы отслеживать ошибки верстки, установим дополнение к FireFox Html Validator .
Откроем нашу страницу в браузере FireFox, наведем мышку на знак валидатора:
Двойной щелчок на знаке валидатора даст развернутый список ошибок:
Поменяем!DOCTYPE на переходный синтаксис:
Переходный синтаксис
Проверка на валидность
Часть текста понадобилось выделить красным цветом.