search
HomeWeb Front-endHTML TutorialAbout the use and instructions of DOCTYPE

About the use and instructions of DOCTYPE

Apr 05, 2017 am 10:19 AM
doctypeuseaboutillustrate

DOCTYPE is not scary, but taking it away will make you scared again and again.

I found that many friends raised questions about p+CSS typesetting and compatibility issues between IE and FF. I asked all questions, but the result is one - the display is strange and difficult to adjust. Most websites we browse, or when we use Dreamweaver to create a new web document, there will be a DocType declaration at the top of the source code. However, many people do not pay attention to it, and even delete it directly during creation. In fact, this is often the beginning of a nightmare. . DOCTYPE is a required element in any web document that adheres to standards. It affects code validation and determines how browsers ultimately display your web documents. In order to avoid the recurrence of DOCTYPE problems, I compiled this document based on the information on hand for reference by myself and interested friends.

By default, the interpretation standards of FF and IE are different. That is to say, if a web page does not declare a DOCTYPE, it will interpret the following HTML with the default DOCTYPE. Under the same standard, the interpretation models of different browsers are different. If the declaration standards are different, I don't need to tell you, just think about it yourself. Learn web standards and browser compatibility. You decide where to start. However, please know the DOCTYPE:

1. What is DOCTYPE

DOCTYPE is the abbreviation of Document Type. In the page, it is used to specify the version of XHTML (or HTML) used by the page. To create a standards-compliant page, an essential and key component is the DOCTYPE declaration. Only by determining a correct DOCTYPE can the logo and CSS in XHTML take effect normally.

2. Rules of DOCTYPE

The DOCTYPE declaration follows certain rules and indicates what set of rules the reading program should use to interpret the markup in the document. In the case of Web documents, the "reader" is usually a program such as a browser or a validator, and the "rules" are the rules contained in a document type definition (dtd) published by the W3C.
Each DTD includes tags, attributes, properties, etc., which are used to mark the content of web documents; it also includes rules that specify which tags can appear in which other tags. Each web recommendation standard (such as HTML 4 Frameset and XHTML 1.0 Transitional) has its own DTD.

Here are the rules taken from the manual:

grammar:

HTML Top Element Availability "Registration//Organization//Type Tag//Definition Language""URL"

Possible values:

- Top-level element: Specifies the type of top-level element declared in the DTD. This corresponds to the declared SGML document type. HTML default. HTML.
- Availability: Specifies whether the Formal Public Identifier (FPI) is a publicly accessible object or a system resource. PUBLIC Default. Publicly accessible objects. SYSTEM System resources, such as local files or URLs.
- Registration: Specifies whether the organization is registered by the International Organization for Standardization (ISO). + Default. The organization name has been registered.
- The organization name is not registered. The Internet Engineering Task Force (IETF) and the World Wide Web Consortium (W3C) are not registered ISO organizations.
Organization: Specify the name, or OwnerID, of the group or organization responsible for the creation and maintenance of the DTD referenced by the !DOCTYPE declaration. IETF IETF. W3C W3C.
- Type: Specifies the public text class, that is, the type of object being referenced. DTD default. DTD.
- Tag: Specifies a public text description, a unique, descriptive name for the public text being referenced. A version number can be attached at the end. HTML default. HTML.
- Definition: Specify the document type definition.
Frameset Frameset document.
Strict excludes all representative attributes and elements that W3C experts want to phase out because the style sheet is already well established.
Transitional contains all contents except frameSet elements.
- Language: Specifies the public text language, the natural language encoding system used to create the referenced object. The language definition has been written as an ISO 639 language code (uppercase two letters). EN default. English.
- URL: Specifies the location of the referenced object

In order to get a correct DOCTYPE declaration, the key is to make the dtd correspond to the standard that the document follows. For example, assuming that the document follows the xhtml 1.0 strict standard, the document's doctype declaration should reference the corresponding dtd. On the other hand, if the doctype declaration specifies an xhtml dtd, but the document contains old-style html markup, it is inappropriate; similarly, if the doctype declaration specifies an html dtd, but the document contains xhtml 1.0 strict markup , is also inappropriate.

3. What kind of DOCTYPE to choose

As shown in the above example, there are three types of DTD (Document Type Definition) declarations to choose from in XHTML 1.0: Transitional, Strict and Frameset. They are introduced here as follows.

1. transitional

A DTD with less stringent requirements that allows the use of HTML4.01 logos in pages (complying with xhtml syntax standards). The transitional DTD is written as follows:

br/> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. strict

A strict DTD that does not allow the use of any presentation layer identifiers and attributes, such as
, etc. The strict DTD is written as follows:

br/> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3. Frame

A DTD specifically used for frame pages. This DTD is used when the page contains frame elements. The DTD of the framework is written as follows:

br/> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Using strict DTD to create pages is of course the most ideal way. However, for web designers who do not have a deep understanding of web standards, it is more appropriate to use a transitional DTD. Because this DTD also allows the use of presentation layer identifiers, elements and attributes, it is more suitable for most web page developers.

4. Issues that need attention

There's nothing special, except that the DOCTYPE declaration must be placed at the top of the XHTML document. Even multiple HTML comment tags above it will not work.

It is best to add DOCTYPE to the sample code, otherwise the effect will be different.

5. Various DOCTYPE

HTML Strict
HTML Transitional
HTML Frameset
XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
XHTML 1.1
XHTML 2.0

The above is the detailed content of About the use and instructions of DOCTYPE. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Why are HTML tags important for web development?Why are HTML tags important for web development?May 02, 2025 am 12:03 AM

HTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.

Explain the importance of using consistent coding style for HTML tags and attributes.Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AM

A consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.

How to implement multi-project carousel in Bootstrap 4?How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

How does deepseek official website achieve the effect of penetrating mouse scroll event?How does deepseek official website achieve the effect of penetrating mouse scroll event?Apr 30, 2025 pm 03:21 PM

How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

How to modify the playback control style of HTML videoHow to modify the playback control style of HTML videoApr 30, 2025 pm 03:18 PM

The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

What problems will be caused by using native select on your phone?What problems will be caused by using native select on your phone?Apr 30, 2025 pm 03:15 PM

Potential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...

What are the disadvantages of using native select on your phone?What are the disadvantages of using native select on your phone?Apr 30, 2025 pm 03:12 PM

What are the disadvantages of using native select on your phone? When developing applications on mobile devices, it is very important to choose the right UI components. Many developers...

How to optimize collision handling of third-person roaming in a room using Three.js and Octree?How to optimize collision handling of third-person roaming in a room using Three.js and Octree?Apr 30, 2025 pm 03:09 PM

Use Three.js and Octree to optimize collision handling of third-person roaming in the room. Use Octree in Three.js to implement third-person roaming in the room and add collisions...

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment