XHTML Getting Started tutorial: Web page head and DTD


Head and DTD are important elements of a web page, although they are not displayed on the page.
In the last section, we got an error message when checking our web page, but we wrote the whole web page according to XHTML standard. In fact, the problem lies in the “header” of the web page. Let’s solve this problem.
In the previous tutorial, except for the <title> tag, we modified the content between <body>, that is, the content displayed on the page. So what does the <head> part of XHTML do? In fact, in the <head> section, we can add many information that can be “seen” by browsers. Let’s introduce some common tags in the head section.
Note: most of the tags and attributes in this section are difficult to remember. In fact, they will be generated automatically when we use the web page creation software to create web pages. The purpose of this section is to understand the meaning of these labels so that some manual modifications can be made when necessary. Now open our “index.html” and insert the following code in the middle of <head></head>:

1.<meta http-equiv=”Content-Type” content=”text/html;charset=gb2312″ />

This code tells the browser that our web page uses GB2312 Chinese character encoding. The absence of this <meta> information is one of the reasons for the problem in the last inspection.
2.<meta name= “Keywords” content= “primary school students, bullying students, winter and summer homework, parents” / >
This code is written for search engines. The content is index Keywords for HTML.
Please note that the <meta> tag is also an empty tag. Don’t forget to add /< The role of meta> tag is far more than that. However, in the absence of practical application, it is difficult to understand the practical use of <meta> tag. If you want to know more about <meta> tags, you can search Baidu for relevant knowledge.
As mentioned earlier, <head> is not written for browsers, but for browsers and search engines. Therefore, the <head> section should not contain any content visible in the page.
If you check our web page again, you will still get an error message indicating that the DTD file cannot be found. What is a DTD file? Simply put, it is to tell anyone (mostly browser like software) which set of rules our files are written according to before they want to read our files. Take the verification process as an example. If we use the html4.01 DTD, the validator will think that we use the html4.01 rules to write the web page, then verify our code line by line according to the corresponding rules, and finally return the verification results.
The web pages we make use of XHTML rules. Of course, we should use XHTML DTD. However, as we mentioned earlier, XHTML DTDs are also divided into relatively loose transitional DTDs and very strict DTDs. In this tutorial, we will declare strict DTD in the web page. If you want to learn more about DTD, you need to learn XML, which will not be discussed in this tutorial.
Let’s declare a DTD for our web page. Open the previously saved “index.html”, and enter the following code in the first line (<html> before the tag):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Add the following attributes in the <html> tag: xmlns=“ http://www.w3.org/1999/xhtml “. this is called the namespace attribute and belongs to the XML category. We will not discuss it too much here.
The purpose of this code is to declare that our web page uses xhtml1-strict dtd。 Now submit this page to the W3 validator, and this time it will return a “this page is valid xhtml1.0 strict!” Information for. This means that there are no errors in our code, which fully conforms to the strict standard of xhtml1. Of course, this may not always be the case in actual work. In the actual web design process, there will always be various reasons for us to write non-standard code. At this time, the validator will give an error report. We just need to modify the code according to the prompts.