HTML элементы. Объявление <!DOCTYPE>
Объявление <!DOCTYPE> должно быть самым первым делом в вашем HTML документе, перед <html> тегом.
Объявление <!DOCTYPE> не является HTML тегом; это инструкция для веб-браузера, которая сообщает, в какой версии HTML написана страница.
В HTML 4.01 объявление <!DOCTYPE> относится к DTD, потому что HTML 4.01 базировался на SGML. DTD определяет правила для языка разметки так, чтобы браузеры визуализировали содержание правильно.
HTML5 не основан на SGML, и поэтому не требует ссылки на DTD.
Совет: Всегда добавляйте объявление <!DOCTYPE> к HTML-документам, чтобы браузер знал, какой тип документа следует ожидать.
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <!DOCTYPE> | Yes | Yes | Yes | Yes | Yes |
Отличия между HTML 4.01 и HTML5
Существует три разных объявления <!DOCTYPE> в HTML 4.01. В HTML5 существует тольки один вид объявления:
HTML элементы и Doctypes
Советы и примечания
Совет: Объявление <!DOCTYPE> НЕ чуствительно к регистру.
Совет: Чтобы проверить, правильный ли HTML-код ваших веб-документов, перейдите на валидатор-сервис W3C.
Общие объявления DOCTYPE
HTML 5
HTML 4.01 Strict
Этот DTD содержит все элементы и атрибуты HTML, но НЕ ВКЛЮЧАЕТ презентационные или устаревшие элементы (например, шрифт). Фреймы не разрешены.
HTML 4.01 Transitional
Этот DTD содержит все HTML-элементы и атрибуты, включая презентационные и устаревшие элементы (например, шрифт). Фреймы не разрешены.
HTML 4.01 Frameset
Этот DTD соответствует HTML 4.01 Transitional, но позволяет использовать содержимое фреймов.
XHTML 1.0 Strict
Этот DTD содержит все элементы и атрибуты HTML, но НЕ ВКЛЮЧАЕТ презентационные или устаревшие элементы (например, шрифт). Фреймы не разрешены. Разметка также должна быть записана как хорошо сформированный XML.
XHTML 1.0 Transitional
Этот DTD содержит все HTML-элементы и атрибуты, включая презентационные и устаревшие элементы (например, шрифт). Фреймы не разрешены. Разметка также должна быть записана как хорошо сформированный XML.
XHTML 1.0 Frameset
Этот DTD соответсвует XHTML 1.0 Transitional, но позволяет использовать содержимое фреймов.
XHTML 1.1
Этот DTD соответсвует XHTML 1.0 Strict, но позволяет добавлять модули (например, для обеспечения поддержки Ruby для восточноазиатских языков).
Почему важен DOCTYPE и как его правильно использовать
Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на PHP, MySQL, Javascript. А также другим технологиям необходимым для выпуска качественных сайтов. Начать решил с самого «верха», с HTML тэгов. Буду рад, любым комментариям 🙂
Сразу оговорюсь, что бОльшая часть информации я нашел в интернете, внизу статьи будут приведены ссылки на источники. Часть информации была переведена совместно с google translate.
Итак:
Почему так важен DOCTYPE
Вроде бы вы сделали все правильно, но ваш сайт почему-то не выглядит или не работает, как ожидалось, в последних версиях броузеров.
Вы написали правильный стандартный XHTML код и стандартный CSS. Вы воспользовались стандартной спецификацией для работы с DOM (Document Object Model), чтобы управлять динамическими элементами на странице. И все-таки, в броузерах, которые казалось бы сделаны с соблюдением именно этих стандартов, ваш сайт не работает. Скорей всего, ошибка кроется в неправильном заголовке DOCTYPE.
Эта небольшая статья расскажет вам о заголовках DOCTYPE, которые работают, а также объяснит практическое и теоретическое значение этого, казалось бы отвлеченного от реальности, тега.
Что такое DOCTYPE?
Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE — ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.
Тег DOCTYPE также важен для правильного отображения и работы страницы в броузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win).
Тег DOCTYPE, в атрибутах которого указывается полный URI (полный web-адрес), сообщает броузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта.
Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, броузер перейдет в «загадочный» (quirk) режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т.е. так, как писали в конце 90-ых годов.
В этом режиме броузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще в бог знает что).
Понятно, что для вас эти выкрутасы не желательны. Но именно это вы и получите, если будете пользоваться неполным или неправильным тегом DOCTYPE.
Проблема
Когда создавали NN4, IE4 выполняли правила CSS не совсем в соответствии со стандартом. Реализация Netscape была просто ужасной, IE4 подошел к реализации стандарта лучше, но тем не менее, реализовал его не до конца. Хотя IE 5 Windows исправил множество ошибок IE 4, но оставались другие сбои в CSS (в основном в модели окон (window model)).
Поэтому, когда соответствие стандартам стало важным, W3C поставил производителей браузеров перед жестким выбором.
Приблизится к спецификации W3C было одним из решений проблемы, но если бы производители браузеров просто изменили реализацию CSS, чтобы соответствовать стандартам полностью, многие веб-сайты, «поползли» бы в большей или меньшей степени или оказались полностью неработоспособными. Такое сближение с соблюдением стандарта повлекло бы за собой проблемы. С другой стороны, не приведение к соответствию стандартов могло бы внести вечную путаницу в эпоху войны браузеров.
Решение
- позволить веб-разработчикам, которые знали о стандартах, выбирать какой режим использовать.
- продолжать показывать старые страницы по старым (совместимым) правилам. (quirks mode)
Иными словами, всем браузерам необходимо было работать в двух режимах: режим совместимости для старых правил, и строгого режима для стандарта.
IE Mac был первым браузером использовавшим оба режима, а Windows IE 6, Mozilla, Safari, Opera и последовали его примеру.
IE 5 Windows, а также старые браузеры, как Netscape 4, постоянно заблокированы в режиме совместимости.
Решение о выборе, какой режим отображения требуется вызвать, было найдено в использовании «DOCTYPE» переключения. Согласно стандартам, любой (X) HTML документ должен иметь DOCTYPE который рассказывает всему миру, какой тип (X) HTML документа он использует.
Допустимые DTD
| DOCTYPE | Описание |
| HTML 4.01 | |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd"> | Строгий синтаксис HTML. |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd"> | Переходный синтаксис HTML. |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "www.w3.org/TR/html4/frameset.dtd"> | В HTML-документе применяются фреймы. |
| XHTML 1.0 | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | Строгий синтаксис XHTML. |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | Переходный синтаксис XHTML. |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> | Документ написан на XHTML и содержит фреймы. |
| XHTML 1.1 | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. |
HTML 4.01 DTDs
- HTML 4.01 Strict — Не разрешает презентационной (оформительской) разметки, аргументируя тем, что этоим должен заниматься CSS.
- Transitional DTD позволяет некоторые устаревшие аттрибуты и элементы
- Если используются фреймы — должен быть использован frameset doctype
XHTML 1.0 DTDs
- XHTML Strict DTD самый строгий существующий DTD: устаревшие (см ниже) теги не поддерживаются, и код должен быть написан правильно
- XHTML Transitional DTD такой же как XHTML Strict DTD, но старые теги разрешены. Это НАИБОЛЕЕ ПОПУЛЯРНЫЙ в настоящий момент DTD.
- XHTML Frameset DTD единственный XHTML DTD который поддерживает фреймы.
XHTML 1.1 DTD
Это новый DTD, который имеет строгость как у XHTML 1.0 Strict, и основан на фреймворке и модулях описанных в Modularization of XHTML (не стал искать что это такое :).
Статистика использования различных DTD
Получается что Более 50% сайтов работают в режиме quirk mode — то есть в режиме IE4!
Устаревшие тэги и аттрибуты
Устаревшие тэги в алфавитном порядке
- <applet> Используйте тег<object>.
- <basefont> используйте CSS.
<blockquote>используйте CSS.- <center>используйте CSS.
- <dir>используйте <ul>.
<em>используйте CSS.- <font>используйте CSS.
- <isindex>
- <listing> используйте <pre> или CSS.
- <menu>замените тегом<ul> или CSS.
- <nextid>
- <plaintext> используйте <pre> или <a href=’view-source:http://somesite.com’>Source code</a>.
- <s>используйте<del> или <ins>.
- <strike> используйте <del> или<ins>.
- <u>используйте CSS.
- <xmp> используйте <pre> и CSS стиль.
Устаревшие HTML / XHTML аттрибуты тегов. Все они могут быть заменены CSS стилями.
- align
- alink
- background
- bgcolor
- color
- hspace
- link
- size
- text
- type
- vlink
- vspace
Разница между HTML и XHTML (указаны правила для XHTML)
- Тэги должны быть написаны в нижнем регистре, вместо <IMG SRC="resource/frankisboat.gif" WIDTH="389" HEIGHT="227" BORDER="0" ALT="boat">, как это было в HTML, нужно писать: <img src="resource/frankisboat.gif" width="389" height="227" border="0" alt="boat" />
- Все теги должны закрываться, или с использованием тэга со слешем в паре, как параграф ( <p></p> ) например, или самозакрывающиеся тэги, как например ( <br /> ).
- Все теги должны быть правильно вложены друг в друга, без перекрытий
- Не должны использоваться устаревшие теги
- Все аттрибуты должны быть набраны в нижем регистре
- Все значение аттрибутов должны быть заключены в одинарные или двойные кавычки
- Все аттрибуты должны использоваться в длинной форме, а не в короткой: disabled="disabled" в XHTML против DISABLED в HTML
- Структура должна быть отделена от контента. Например тег <p> — это часть контента (параграф) и вы не можете поместить в него например таблицу, потому что таблица это часть структуры (форматирования).
Совместимость и IE8
IE8 имеет четыре режима: IE 5.5 режим совместимости, IE 7 стандартный режим, IE в 8 стандартном режиме и IE 8 в режиме совместимости.
Выбор способа зависит от данных из различных источников: DOCTYPE, meta элементов, заголовков HTTP, периодически загружаемых данных от Microsoft (!), интрасети, настроек, сделанных пользователем, настроек сделанных администратором, наличия сайта в блеклисте microsoft и прочее!
Doctypes and markup styles
The doctype appears just above the <html> tag, at the very start of each document you write:
The doctype explains what type of HTML is to be expected and therefore what spec validators (for example the W3C HTML validator) should validate your document against. In this article of the Web Standards Curriculum we will explore the different doctypes you are likely to come across on your journey around the Web, as well as looking at how XHTML and HTML differ.
Standards versus quirks mode
The doctype also serves to make the browser render the page in so called «standards mode». In standards mode, browsers generally try to render the page according to the CSS specifications — they trust that the person who created the document knew what they were doing.
On the other hand, if a browser finds an outdated, incomplete of missing doctype at the start of the page, they use “quirks mode”, which is more backwards compatible with old practices and old browsers. Quirks mode assumes that the document is old or that it has not been created with web standards in mind — it means that the web page will still render, but the browser will work a bit harder in doing so, and you’ll likely get a strange or ugly result, which you weren’t quite expecting. The differences are mostly related to how CSS is rendered, and only in a few cases about how the actual HTML is treated. As a web designer or developer, you will get the most consistent results by making sure that all browsers use their Standards rendering mode, hence you should stick to web standards, and use a proper doctype!
The HTML5 doctype
In this course, we are sticking with the HTML5 docype:
There is no disadvantage to using this doctype, and it is certainly a lot easier to remember than the others! This is the one we’d recommend you use going forward, as even if you don’t plan to start using any of the new HTML5 features in your work yet, it will still validate most of the HTML 4/XHTML 1.0 features (there are a couple of exceptions where features have been removed from the spec, but as you’ll learn later, validation is merely a useful tool, and not the be all and end all of everything), and will be future proof for when you do start using new HTML5 features. There are however, other doctypes that you may come across when working on various projects. Let’s look at some of the others you might bump into.
The HTML 4.01 strict doctype
The HTML 4.01 strict doctype validates against the HTML 4.01 spec, although it doesn’t allow any presentational markup or deprecated elements (such as <font> elements) or framesets to be used. It validates loose HTML style markup, such as minimized attributes and non-quoted attributes (eg required , rather than required=»required» ).
The HTML 4.01 transitional doctype
The HTML 4.01 transitional doctype validates against the HTML 4.01 spec. It allows some presentational markup and deprecated elements (such as <font> elements) but not framesets. Again, it validates loose HTML style markup.
The XML 1.0 strict and transitional doctypes
These are the exact XHTML 1.0 equivalents of the HTML 4.01 doctypes we discussed above, so functionally they are the same, except that they won’t validate loose HTML style markup: it all needs to be well formed XML.
The HTML 4.01 and XML 1.0 frameset doctypes
If you want to use framesets and still have your markup validate, you can use one of these two doctypes:
They are functionally the same as HTML 4.01 transitional and XHTML 1.0 transitional respectively, but they allow the use of framesets. But please don’t use framesets: they are evil and outdated. We don’t even tell you have to use them anywhere in this course. Everytime you use a frameset on a web page, a fairy dies. So please don’t. Think of the fairies.
Other doctypes
You may also occasionally see other doctypes on your travels, but they are not mentioned here because they are outdated. Don’t use any other doctypes. Not by choice, anyway.
HTML versus XHTML syntax
Table 1 shows the main syntax differences between HTML and XHTML:
| HTML | XHTML |
|---|---|
| Elements and attributes are case insensitive, eg <h1> is the same thing as <H1> . | Elements and attributes are case sensitive; they are all lowercase. |
| Certain elements don’t need a closing tag (eg paragraphs, <p> ), while others (called “empty elements”) shouldn’t have a closing tag (eg images, <img> ). | All elements must be explicitly closed (eg <p>A paragraph</p> ). Elements without content should be closed using a slash in the start tag (eg <hr></hr> and <hr/> mean the same thing). |
| Attribute values may be written without being enclosed in quotes. | Attribute values must be enclosed by quotes. |
| Shorthand can be used for certain attributes (ie <input required> ). | The full attribute form must be used for all attributes (eg <input required=»required»> ). |
Table 1: Differences between HTML and XHTML.
In terms of what syntax style you should use, pick something you are comfortable with. We’d recommend that you start off using strict XML syntax, as it is guaranteed to work in any situation. Later on you can adjust your style to suit, when you understand what you are doing a bit better. Just remember these rules:
- If you are using the HTML5 doctype or an HTML 4.01 doctype, you can use whatever style you want
- If you are using an XHTML doctype, you need to use XML well-formed syntax
- Whichever style you are using, best practice is to:
- Close all open elements, so for example <p>paragraph</p> , not <p>paragraph
- Nest them properly, for example <p>paragraph with bold <strong>word</strong></p> , not <p>paragraph with bold <strong>word</p></strong>
This last rule is very important. If you don’t do this, your HTML will not be well formed, and CSS and JavaScript may not work reliably, as they rely on having a well-formed Document Object Model (DOM). For more on the HTML DOM, read Growing trees.
Serving «real» XML
You may also be interested to know that most of the XHTML on the Web is actually HTML written with well-formed XML syntax. Even if the doctype is an XHTML one, it will be sent to the client as HTML unless you:
- save the file with an .xhtml file extension
- Include a line of code called the XML declaration before your doctype, which looks like this:
We wouldn’t recommend that you this however: old versions of Internet Explorer (6 and below) switch into Quirks mode if they find the XML declaration at the start of the document, which is bad, as we looked at earlier. In addition, IE 6-8 will try to download files saved as XHTML rather than display them in the browser, which you definitely do not want!
Therefore you should just stick to not trying to serve documents as proper XHTML! Carry on people, nothing to see here.
HTML <!DOCTYPE> Declaration
The <!DOCTYPE> declaration is the first line of the code in HTML or XHTML document. It specifies the HTML version used in the document. Each HTML document should start with this declaration: so the browsers will render the page compliant with HTML standards. In HTML 4.01, this declaration refers to a Document Type Definition (DTD), which specifies the structure and the legal elements of an XML document.
The <!DOCTYPE> is declared before the <html> tag. The declaration is not case sensitive.
Syntax
<!DOCTYPE> Parameters
Root element — a parent element that contains all the other elements. For HTML it is the <html> tag.
Publicity — the document can be PUBLIC or SYSTEM (local files, for example). For HTML/XHTML the value is PUBLIC.
Registration — can have two values: plus (+) — the developer is registered in ISO (International Organization for Standardization) and — (minus) — the developer is not registered. For W3C, the value is set to «-«.
Organization — the name of DTD developer. The developer of HTML/XHTML is W3C, and its name is declared in <!DOCTYPE>.
Type — the type of the document. For HTML/XHTML the value is DTD.
Name — unique identifier describing DTD.
Language — the language of the document (two letters in uppercase). For HTML/XHTML the language is English (EN).
URL — the URL of the document type description (e.g. https://www.w3.org/TR/html4/loose.dtd).
Types of the <!DOCTYPE> Declaration for HTML
There are three types of the <!DOCTYPE> declaration for HTML:
Strict — contains all HTML elements and attributes. However, the presentational or deprecated elements are not included.
Transitional — contains all HTML elements and attributes, including presentational and deprecated elements. Frames are not allowed.
Frameset — is equal to Transitional, but allows the use of frames.