- Doctypes and markup styles
- Standards versus quirks mode
- The HTML5 doctype
- The HTML 4.01 strict doctype
- The HTML 4.01 transitional doctype
- The XML 1.0 strict and transitional doctypes
- The HTML 4.01 and XML 1.0 frameset doctypes
- Other doctypes
- HTML versus XHTML syntax
- Serving «real» XML
- Summary
- Синтаксис
- Параметры
- Закрывающий тег
- Браузеры
- Статьи по теме
- Структура XHTML-документа
- XHTML 1.0 Strict
- XHTML 1.0 Transitional
- XHTML 1.0 Frameset
- Контейнер HTML
- Кодировка документа
Doctypes and markup styles
The doctype appears just above the tag, at the very start of each document you write:
. etc
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 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 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 is the same thing as . | Elements and attributes are case sensitive; they are all lowercase. |
Certain elements don’t need a closing tag (eg paragraphs, ), while others (called “empty elements”) shouldn’t have a closing tag (eg images, ). | All elements must be explicitly closed (eg A paragraph ). Elements without content should be closed using a slash in the start tag (eg and 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 ). | The full attribute form must be used for all attributes (eg ). |
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
paragraph
, not
paragraph
- Nest them properly, for example
paragraph with bold word
, not
paragraph with bold word
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.
Summary
And that’s it for the doctype — pretty much all you need to know.
Элемент
Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Существует несколько видов , они различаются в зависимости от версии языка, на которого ориентированы. В табл. 1. приведены основные типы документов с их описанием.
Табл. 1. Допустимые DTD
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.
Закрывающий тег
Разум — это Будда, а прекращение умозрительного мышления — это путь. Перестав мыслить понятиями и размышлять о путях существования и небытия, о душе и плоти, о пассивном и активном и о других подобных вещах, начинаешь осознавать, что разум — это Будда, что Будда — это сущность разума, и что разум подобен бесконечности.
Разум — это Будда, а прекращение умозрительного мышления — это путь. Перестав мыслить понятиями и размышлять о путях существования и небытия, о душе и плоти, о пассивном и активном и о других подобных вещах, начинаешь осознавать, что разум — это Будда, что Будда — это сущность разума, и что разум подобен бесконечности.
Браузеры
Internet Explorer до версии 6.0 требует, чтобы стоял обязательно в первой строке кода. В противном случае браузер переходит в режим совместимости (quirk mode).
Хотя значение URL является не обязательным, браузеры при его отсутствии могут перейти в режим совместимости, поэтому всегда указывайте полный путь к DTD-файлу, как показано в табл. 1.
Статьи по теме
- Атрибут target
- Введение в HTML
- Выравнивание элементов
- Доктайп
- Написание корректного кода
- Почти стандартный режим
- Пять вещей, которые надо знать об HTML5
- Режим совместимости
- Режимы браузеров
- Рекомендации по доктайпу
- Синтаксис HTML5
- Синтаксис XHTML
- Ссылка на новое окно
- Стандартный режим
- Структура HTML-кода
- Структура XHTML-документа
- Структура кода
- Что всё это значит?
Структура XHTML-документа
Любой XHTML-файл состоит из четырех разделов — , контейнера , заголовка ( ) и тела документа ( ). Последние два элемента перекочевали из HTML и ничем не отличаются от своего родоначальника (пример 2.1).
Пример 2.1. Простейший XHTML-документ
Элемент сообщает браузеру о типе текущего документа и как его интерпретировать. Различают три типа документа по спецификации XHTML 1.0:
Элемент хотя и обязателен, но не является непосредственной частью XHTML-документа, поэтому для него закрывающего тега не требуется.
XHTML 1.0 Strict
Используется в том случае, если в документе идет четкое разделение оформления и содержания. При этом код веб-страницы содержит только теги разметки, а сам вид элементов задается через стили (пример 2.2).
Пример 2.2. Документ со строгой разметкой
.
XHTML 1.0 Transitional
Обычно применяется, когда правило разделения оформления и содержания выполняется не в полной мере. В этом случае допускается в коде документа использовать теги физического проектирования (например, тег ) и лишь частично стили. В примере 2.3 показан вид тега для подобных документов.
Пример 2.3. «Переходный» документ
XHTML 1.0 Frameset
Применяется, когда окно браузера делится на два или более фрейма (пример 2.4).
Пример 2.4. Документ с фреймами
Контейнер HTML
Тег выступает главным контейнером, в котором хранятся все остальные элементы, и в коде он должен идти сразу же после . В требуется указывать обязательный атрибут xmlns со значением http://www.w3.org/1999/xhtml . Он определяет пространство имен — так называется набор имен всех элементов и атрибутов, чтобы обеспечить их уникальность в пределах XHTML-документа.
Кодировка документа
В HTML кодировка документа задается с помощью тега расположенного внутри контейнера . В XHTML же кодировка может задаваться двумя путями: аналогично HTML и с помощью команды , она должна располагаться в первой строке кода, перед . В данном случае UTF-8 обозначает кодировку текущего документа. В примере 2.5 показано, как устанавливать кодировку подобным способом.
Пример 2.5. Кодировка документа
Текст на русском языке в стандартной кодировке Windows.
В данном примере кодировка установлена как windows-1251 .
В браузере Internet Explorer до 6 версии включительно команда должна обязательно стоять в первой строке кода, иначе браузер переходит в режим совместимости (quirk mode) и веб-страница может отображаться весьма причудливым образом. Поэтому для универсальности кодировку лучше указывать с помощью метатегов, как и в HTML.
- Close all open elements, so for example