My fabulous document

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.

  Источник

  HTML Declaration

  All HTML documents must start with a declaration.

  The declaration is not an HTML tag. It is an «information» to the browser about what document type to expect.

  In HTML 5, the declaration is simple:

  Browser Support

  Older HTML Documents

  In older documents (HTML 4 or XHTML), the declaration is more complicated because the declaration must refer to a DTD (Document Type Definition).

  HTML Elements and Doctypes

  Tips and Notes

  Tip: The declaration is NOT case sensitive.

  Examples

  

  COLOR PICKER

  

  

  Report Error

  If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

  Thank You For Helping Us!

  Your message has been sent to W3Schools.

  Top Tutorials

  Top References

  Top Examples

  Get Certified

  W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

  Источник

  What is the DOCTYPE Declaration in HTML?

  

  The HTML document type declaration, also known as DOCTYPE , is the first line of code required in every HTML or XHTML document. The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that the web page is parsed the same way by different web browsers.

  In HTML 4.01, the DOCTYPE declaration refers to a document type definition (DTD). A DTD defines the structure and the legal elements of an XML document. Because HTML 4.01 was based on the Standard Generalised Markup Language (SGML), referring to a DTD in the DOCTYPE declaration was necessary.

  Additionally, doctypes for HTML 4.01 required the declaration of either strict , transitional , or frameset DTD, each with a different use case as outlined below.

  • Strict DTD: Used for web pages that exclude attributes and elements that W3C expects to phase out as CSS support grows
  • Transitional DTD: Used for web pages that include attributes and elements that W3C expects to phase out as CSS support grows
  • Frameset DTD: Used for web pages with frames

  In contrast, the declaration of HTML5 DOCTYPE is much simpler: it no longer requires a reference to DTDs as it is no longer based on SGML. See the examples below for a comparison between HTML 4.01 and HTML5 DOCTYPE s.

  Examples

  Doctype syntax for HTML5 and beyond:

  Doctype syntax for strict HTML 4.01:

  Doctype syntax for transitional HTML 4.01:

  Doctype syntax for frameset HTML 4.01:

  History

  During the formative years of HTML, web standards were not agreed upon yet. Browser vendors would build new features in whatever way they wanted. There was little concern for competing browsers.

  The result was that web developers had to choose a browser to develop their sites for. This meant that sites would not render well in unsupported browsers. This situation could not continue.

  The W3C (World Wide Web Consortium) wrote a set of web standards to handle this situation. All browser vendors and web developers should adhere to these standards. This would ensure that websites would render well across browsers.

  The changes required by the standards were quite different from some existing practices. Adhering to them would break existing non standards compliant websites.

  To handle this problem, vendors began programming rendering modes in to their browsers. Web developers would need to add a doctype declaration to the top of an HTML document. The doctype declaration would tell the browser which rendering mode to use for that document.

  Three separate rendering modes were generally available across browsers.

  • Full standards mode renders pages according to the W3C web standards.
  • Quirks mode renders pages in a non standards compliant way.
  • Almost standards mode is close to full standards mode, but features support for a small number of quirks.

  In the modern age of HTML5, web standards are fully implemented in all major browsers. Web sites are generally developed in a standards compliant way. Because of this the HTML5 doctype declaration only exists to tell the browser to render the document in full standards mode.

  Usage

  The Doctype Declaration must be the very first line of code in an HTML document, aside from comments, which can go before it if needed. For modern HTML5 documents the doctype declaration should be as follows:

  More Information:

  While no longer in general use, there are several other doctype declaration types from previous versions of HTML. There are also specific versions for XML documents. To read more about these, and to see code examples for each, take a look at the Wikipedia article.

  Источник