Which tag determines the document type. Error correction

Elementtransmits information to the browser about the type of this document - DTD. In other words, it instructs the browser about the version of HTML in which the document is written. This allows the browser to choose the correct way to interpret the content of the document.

must be placed as the very first element in the HTML document, before the opening tag (the document must begin with DOCTYPE).

Syntax

doctype syntax (simplified):

DOCTYPE difference between HTML 4.01 and HTML5

HTML 4.01 is based on the standard generalized markup language SGML, so when using it, you must specify a DTD that defines the markup rules for a particular version.

HTML5 does not use SGML as a basis, and there is no need to specify a DTD when using it.

DOCTYPE examples for popular HTML versions

DOCTYPE HTML 5

DOCTYPE HTML 4.01 Strict

Supports all elements and attributes relevant to DTD HTML 4.01, not including presentational and obsolete ones. Framesets are not allowed.

DOCTYPE HTML 4.01 Transitional

Supports all elements and attributes relevant to DTD HTML 4.01, as well as presentational and legacy ones. Framesets are not allowed.

DOCTYPE HTML 4.01 Frameset

Similar to HTML 4.01 Transitional. Framesets are allowed.

DOCTYPE XHTML 1.0 Strict

Supports all elements and attributes relevant to DTD HTML 4.01, not including presentational and obsolete ones. Framesets are not allowed. The document must comply with XML standards.

DOCTYPE XHTML 1.0 Transitional

Supports all elements and attributes relevant to DTD HTML 4.01, as well as presentational and legacy ones. Framesets are not allowed. The document must comply with XML standards.

DOCTYPE XHTML 1.0 Frameset

Similar to XHTML 1.0 Transitional. Framesets are allowed.

DOCTYPE XHTML 1.1

Similar to XHTML 1.0 Strict. It is possible to add your own modules.

Hello, dear readers of the blog site. I want to continue talking about the basics of working with HTML from the very beginning, consistently and without leaving anything out. Today we will talk about the special Doctype tag (declaration), learn how to correctly format comments in HTML code, how to write the Title of a web document, and try to understand the differences between block and inline elements.

In the previous article from the section (which mainly talked about), we ended with the fact that any document on the Internet must have a certain structure.

Doctype directive for Html, Xhtml and HTML 5

The first markup language element that you will encounter in any regular Web document (site page) will be a special Doctype directive. It begins with an angle bracket followed immediately by an exclamation point.

The Doctype element itself serves to declare the type of a given document and helps the browser understand which version of Html or XHTML (as classified by the W3C validator) it should rely on when parsing the code of the loaded web page.

If the document type is not specified in this directive in accordance with generally accepted rules, then the browser will most likely still display your document correctly, but it is not a fact that other popular thousands of your readers will do the same. Therefore, the Doctype must be present in the source code of the page and it must be compiled correctly.

But let's dwell on this in a little more detail. Now we are seeing a kind of dualism, or two types of documents on the Internet - as they did before before the separation of CSS from the womb of the HTML language and as they do now according to accepted modern standards.

Naturally, after the adoption of new standards, there were still a huge number of documents on the Internet created according to the old principles of pure HTML (without CSS) and browsers had to somehow work with them. Microsoft at one time proposed using this very Doctype directive from the new XML markup language.

It may look different (read about it below), but the simplest is use this option(I’ll explain why a little later in the text):

This way the browser will understand which standards it should use to parse the document code. If this declaration takes place, then the browser switches to standards mode. If the browser does not find it at the very beginning of the document (or it does not correspond to the correct spelling), then the browser will turn on the tricky tricks mode.

The document in this case will be displayed as if this browser is very old (vintage). If you add a declaration to the same document, the browser will parse the code taking into account all currently available standards.

True, the concept of an old browser is very vague. The same leader in operating speed and speed of penetration into the hearts of users, Google Chrome, appeared only in 2008.

Let's start with the Hypertext Markup Language standard 4.01 (HTML 5 is still in development). For this case there is three options Doctype: strict, transitional and frame-aware:

The second option (Transitional) is most often used, because it allows more liberties in writing the document code, but the option with frames is unlikely to be useful to you, due to the irrelevance of their use today.

Actually, there are the same three options Doctype for XHTML- strict, transitional and frame-supported:

But let's see where these options for correctly writing a declaration come from. Remember, in the first article we looked at the table of acceptable ones:

And a separate table of possible ones:

As you can see, in both of these tables there is a column “Depr”, in which the letter “D” is marked with obsolete and deprecated HTML tags and attributes. We have already considered this. But note that next to each “D” in the right-adjacent “DTD” column is either an “L” (Loose DTD) or an “F” (Frameset DTD).

That. all tags and attributes that are not marked with a "D" (not recommended) are included in the strict Doctype decoration (only recommended elements and nothing more). If you still allow the use of non-recommended tags and Html language attributes (they are marked with the letter “D”), then you will need to declare a transitional declaration for such documents.

Some elements and attributes marked "F" in the "DTD" column (eg FRAME, FRAMESET) will be included in the Doctype declaration for frame structures. It is based on a transitional one, to which tags and attributes are added to create, which you can read about at the link provided.

Now let's try to figure out what parts the Doctype declaration consists of?

First comes the name - “Doctype”. Here, I think, everything is clear. Next comes “Html” - the root element of this markup language. Then comes the indication whether this declaration is public or systemic. All Doctype variants are public, which is denoted by the word “PUBLIC”.

And then there are two document identifiers. The first one is called the public identifier (“-//W3C//DTD HTML 4.01//EN”). A minus means that this declaration is not registered in the ISO standard. This is followed by the name of the consortium, its title and the language in which it is written. The second identifier specifies the path to the strict variant file.

Well, now let me tell you the whole truth about Doctype. Browsers only care about its formally correct spelling, but they will never go to the consortium website to download the file specified in it.

Even if you choose the option of a strict declaration and at the same time use tags and attributes that are not recommended in the modern version of Html, then any browser will still understand you correctly - this is a verified and confirmed fact.

Therefore, in order not to further philosophize, in Html 5 writing Doctype it will look like this:

That's all. Only “Html” was left. And despite the fact that HTML 5 has not yet been fully implemented, this option is supported by all modern browsers and you can safely use it. Oh how, and you say...

Html comments in the page source code and the Title tag

In the service area of ​​a Web document (between the Head tags), the title of this document (web page) must be written, enclosed in the Title elements (see in the figure below).

It is very difficult to overestimate the significance of the information contained in it (I am not exaggerating). When you select keywords in Yandex Wordstat (using for this purpose), then after compiling the semantic core you will definitely need to mention the selected keywords in the Title header.

You can learn about how important the words contained in the Title are for the future successful promotion of the project, from the article, and you will learn about how to write the words you need in the Title for Joomla and WordPress from the article.

Now, before moving on to specific tags, let’s dwell on such a concept as comments in HTML code. They are often included to make it easier to find the right sections later, or to make it easier for others to understand the author’s intention. It goes without saying that the text of these comments should under no circumstances be displayed on the web page, so they are formatted in a special way in the code.

Comments in Html were especially relevant during the reign of table layout (read about), because then, in comparison with modern block layout (described here with an example), it was very easy to get confused about what was displayed in which table cell:

Probably, from the example above, you already understood that all comments in the Html language begin in the same way as any other elements - with an angle bracket, but immediately after it, when creating a comment, you will need to put an exclamation mark (when describing the Doctype did I mention that comments are also declarations, which necessarily begin with

All comment text that will be located between these double hyphens will be considered by browsers as service information and will not be processed in any way. The correctness of its writing can be clearly assessed by using the described:

But inside a comment you can place not only text, but also anything you like. For example, it is quite common commented HTML code fragments and this section will not be processed by browsers. What’s remarkable is that a comment can be opened on one line of code, and closed even after a hundred lines, and the piece of code thus enclosed for the browser will simply cease to exist.

Everything is quite simple and I think that you will not have any problems with them. Although there is one subtlety in working with multi-line comments in HTML. You cannot place another within one comment., otherwise some of the commented information may be displayed by the browser on the web page. Let's look at this construction as an example:

continuation of external comment-->

So, when parsing the code of a web page, the browser will detect the opening characters of the comment declaration and begin searching for the closing ones. It will find it after the words “Attached comment”, but everything else (in our case this is a continuation of the external comment ->) will be processed by the browser and displayed on the web page.

In principle, if you use a backlit editor when writing HTML code, you will immediately notice something is wrong by the change in the color of your comment:

The concept of block and inline elements (tags) in Html

All tags that can be used inside Body elements (what is displayed on a web page and a list of which you can find in the W3C validator) can be divided into two groups: inline and block tags.

Block elements are used to build the structure of a Web document, and inline elements are used to format pieces of text (lines). Moreover, you must always follow one immutable rule - do not enclose block tags inside lowercase tags.

The most striking and indicative representatives of inline and block tags are, respectively, Div (block element - hence the name block layout) and Span (lowercase). These hypertext markup language tags are paired, i.e. they have an opening and closing tag.

In general, Div and Span tags have absolutely no purpose or meaning in pure HTML without the use of CSS cascading style sheets. They are containers that allow you to change the properties of the elements they contain via CSS.

If you write several Div elements in a row in the source code of the page, then on the web page each of them will most likely try to occupy all the space available to it in width, and therefore such containers will be located under each other. Under normal conditions, Div containers will not stand next to each other unless you force them to do so.

For example, this Html code will be displayed in three blocks located one below the other:

In the Firefox browser, along with a very useful one, I also use a plugin that helps a lot with . Among other things, it can show block elements by surrounding them with a frame. It was this developer plugin that created the blue frames around the Div containers in the above screenshot.

Span tags can contain pieces of text (lines) of Html code to give them certain properties via CSS, and such elements can be placed on the same line next to each other. For example, this code in the browser will look like this:

The Span content here has also been highlighted using the Web developer plugin. Because Since Span elements are inline, you should not enclose block tags inside them, for example, the same Div containers.

Good luck to you! See you soon on the pages of the blog site

You might be interested

What is hypertext markup language Html and how to view a list of all tags in the W3C validator
Tags and attributes of headings H1-H6, horizontal line Hr, line break Br and paragraph P according to the Html 4.01 standard
Font (Face, Size and Color), Blockquote and Pre tags - legacy text formatting in pure HTML (no CSS used)
Lists in Html code - UL, OL, LI and DL tags
How to insert a link and a picture (photo) into HTML - IMG and A tags
Whitespace characters and their formatting of code in Html, as well as special non-breaking space characters and other mnemonics
How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex output and other programs Select, Option, Textarea, Label, Fieldset, Legend - Html tags for the form of drop-down lists and text fields
How to create a hyperlink (A, Href, Target blank), how to open it in a new window on the site, and also make a picture a link in Html code
Iframe and Frame - what are they and how best to use frames in Html

In my lessons, I often made statements such as “one tag must be located inside another”, “the img tag must have a src attribute”, “the head tag comes first, and then the body”, and so on. But I didn’t come up with all this on the fly, but was guided by some regulations, the author of which is the organization that actually comes up with and approves all the standards - it’s called W3C(World Wide Web Consortium). I didn't mention this before, but there are several standards for writing HTML. And each of them has its own characteristics and writing rules. This is due to the fact that HTML does not stand still, but is constantly evolving.

And if in early versions of the standard, when there was no technology CSS, with the help of markup language it was possible to create both structure and design, but now a completely different trend is emerging - HTML has become more associated with the structure (foundation and building blocks) on which the design rests. CSS here is something like a decorative element that defines the design look - analogous to tiles and wallpaper, if we consider creating a website like building a house. In this regard, in the new HTML standards, some tags and attributes responsible for design are declared undesirable (deprecated). That is, the current standard specification supports them, but support will be discontinued in the next one.

There is an even stricter standard called XHTML, - he generally does not tolerate liberties with the code and does not forgive gross mistakes. The newest one at the moment is HTML 5, he is the future, so in the future we will look up to him.

It seems like everything should be clear with this - there are several standards and that’s great. But at the same time, there are browsers whose task is to process HTML code, and the browser cannot always understand in accordance with what standard we are writing and what exactly the user meant and, accordingly, how this code should be displayed. Either we are using Transitional HTML, and the browser forgives us many errors, using the “gentle mode”, or we are using the strict XHTML compatibility mode and errors must be handled with the utmost rigor. In other words, the browser faces a difficult task.

What does the browser do in this case? It displays the code in mode backward compatibility, - he smooths out all explicit and implicit errors in the code and tries to predict as much as possible what the user meant. But there are some obvious disadvantages: first, the browser cannot know what the person originally meant. Secondly, this compatibility mode may work differently for each browser. What do we end up with? There is a code and no regulations - in practice this means that the same markup, in compatibility mode, will be displayed differently by the browser. Therefore, we need some way to let the browser know which standard we are going to use.

And there really is such a method, it’s called - adding a document type definition.

In the code, the type declaration is set like this:

With this line we let the browser know that our page will use HTML 5 mode. This line is inserted at the very beginning of the document. Try this in your test HTML file.

On many sites you can still find this line:

This line means that the HTML 4.01 standard is used. But we won't use it because it's outdated. But nevertheless, it also occurs quite often and is worth knowing about.

Now I will explain why all this is needed. With this line we set a certain standard, according to which the browser should display our document in the browser window. In practice, this means that our HTML code will be displayed more or less the same in all browsers. None of this would have been possible if we were working in backwards compatibility mode ( quirksmode), which is included if the document type declaration is omitted. In my practice related to page layout, this was really important. Because, ad DOCTYPE, ultimately solved the problem of the same page display in all browsers.

Document validation.

Of course, if we want to check ourselves to see if we've made any mistakes somewhere in meeting certain standards, we don't have to do it by examining our code with our eyes. All this has long been automated, because there is a checking tool thanks to which we can find out whether we have made any obvious errors in our markup.

On this page we can find several ways to check:

1. Indicate a real-life site.
2. Upload a file from your computer.
3. Paste directly the code that you want to check into the appropriate field.

In our case, the second or third option is most likely suitable.

I personally used the third method. My document was validated successfully, which the program reported with the line This document was successfully checked as HTML5! on a green background.

In case of a different outcome, the inscription will be displayed on a red background. This will mean that we made a mistake somewhere. Actually, the program itself will indicate where and on what line we made a mistake and what exactly, although in English.

But in my case, the program, in addition to announcing that the validation was successful, also gave me three warnings:

1. Using experimental feature: HTML5 Conformance Checker

The fact is that the HTML 5 standard has not yet been formally approved by the consortium, which continues to introduce new useful features into it. But in practice, more and more developers are starting to use it now in order to be ready for tomorrow.

2. No Character encoding declared at document level

The document doesn't say a word about what encoding is used. Indeed, we didn’t specify it explicitly, which means it’s not a fact that instead of displaying Russian letters, the browser will display some Chinese characters. This happens because the browser, when displaying a document, is guided by some kind of code table (that is, encoding), where each letter is assigned a corresponding code symbol. But the fact that in one encoding one number means one letter, in another it can mean some kind of Japanese hieroglyph. Therefore, the browser needs to be told which encoding to use. If you don’t do this, the browser will still try to guess it itself. But there are absolutely no guarantees that he will do it correctly.

3. Using Direct Input mode: UTF-8 character encoding assumed

The program warns that it uses utf-8 by default.

Well, then there is nothing left but to declare the encoding we are using. This is done this way:

The line itself must be nested within the head element.

Tag meta belongs to the category of service tags, it seems to indicate that there is some information about the page that we want to tell the browser. It, like any other tag, has attributes:

http-equiv– this is an attribute in the value of which we indicate the name of the header.

content– an attribute for which we specify the header value, in this case the Content-type header value.

Let's now look at the values ​​of the attributes we just specified:

Content-Type– we tell the browser that we will report what type our document is. And also what encoding is used in it.

text/html;charset=utf-8– a text/html document that uses utf-8 encoding.

Try validating the page again. There should be no warning messages now. But they may still remain, but for a different reason. Eg:

1. You use images in your document, and in your tag img attribute not set alt.

2. The body element contains an inline element. According to the specification, the body element should only contain block elements. And already in them there may be lowercase letters.

There can be many examples of errors, but it is problematic to mention them all in one article. However, if during validation you encounter some other error, then write about it in the comments, and we will figure it out together.

• < Назад
• Forward >

To comment, you need to register.

Vlad Merzhevich

Most errors that arise during code validation can be reduced to a set of typical options, knowing which it is easy to understand what the validator is “hinting” at. As an example, let's take the HTML Validator extension for the Firefox browser, designed to check code, and consider a list of errors and comments on the code.

You can view all possible validator messages at http://www.htmlpedia.org/wiki/HTML_Tidy, below are the main errors with their descriptions and solutions. The correct option is highlighted in green, another color is used to indicate an error.

Notice: entity "..." doesn't end in ";"

This notice occurs when using special characters like< при отсутствии на конце точки с запятой.

Solution

Notice: numeric character reference "..." doesn"t end in ";"

Occurs when using numeric special characters like - when you forgot to add a semicolon at the end.

Solution

Add a semicolon at the end of the special character.

unescaped & or unknown entity "&..."

The ampersand character (& ) is often used in link addresses (the href attribute of the tag ) because it shares multiple parameters. However, the ampersand is reserved for special characters, like so in links you must specify & instead of & .

Solution

Change to & .

missing

A required closing tag is missing.

Text

Solution

Move the HTML element to the correct section.

missing<...>

There is no required tag in the element structure. An error, for example, may occur when generating a table when the tag is missing and immediately after

should

. List List Solution Check that tags are correctly nested in the current element and that required elements are present. Notice: inserting implicit<...> The message occurs because of a previous error on the page. Solution Correct previous errors. Insert missing Solution Add a container Main text Main text Hello! Solution Remove text after the tag or move this tag to the end of the text. Adjacent hyphens within comment Comments in HTML code are defined by a construct like . If there are two or more hyphens in a row in the comment text, an error occurs. Solution Remove extra hyphens. SYSTEM, PUBLIC, W3C, DTD, EN must be upper case Elementspecified incorrectly, in particular the following attributes must be written in uppercase: SYSTEM, PUBLIC, W3C, DTD, EN. Solution Writecorrectly. Warning: missingdeclaration Element not specified . Main text Solution Place the elementin the very first line of document code. Too much<...>-elements The tag is repeated, and there should be only one in the code. Such tags include , , Solution Remove the duplicate tag. <...>inserting "..." attribute A required attribute was not specified for this tag.