XHTML Getting Started tutorial: XHTML Tags


Introduction to XHTML Tags

You may have noticed in the previous section that the biggest difference between XHTML files and ordinary plain text files lies in some things contained in “< >”, such as <body>. We call them labels. Generally, XHTML tags appear in pairs, such as <html></html>. It can be seen that there is only a “/” difference between them. We call tags like <html> without “/” as the start tag, while its corresponding </html> with “/” is called the end tag. The end tag is only one “/” different from the start tag. Of course, XHTML also has some tags that do not appear in pairs. They do not have termination tags. We call such tags “empty tags”. The contents of the empty tag will be mentioned later in the tutorial.About case

Previous versions of HTML tags were not case sensitive. For example, tags <html> and tags <html> are equivalent. In XHTML, all tags are lowercase. In order to make your website conform to XHTML standards, you should develop a good habit of using lowercase for all tags in the process of making web pages.Role of XHTML tags (elements)

Open the HTML file you saved in the previous tutorial. Put the sixth line “this is my first page.” Change to “this is my first <b> web page </b>.”, Then save your changes and browse the web again. You will find that the two words of the web page are displayed in bold. The effect is as follows:
This is my firstWebpage

The difference is obvious. The word “web page” has become bold because it is “wrapped” in the label <b></b>< b> The label means bold, and it only affects the content it contains. This is how XHTML tags work. We call the content “wrapped” by the label “element”. In this example, the word “web page” is the element of the <b> tag.
<hr size=”1″>

We can set some properties for XHTML tags. Please pay attention to the horizontal line above. The original code is: <hr / >. In XHTML, the <hr> tag is a horizontal divider. We can add an attribute “size” (that is, the size of the divider) to this divider, and its attribute value is 1. Then its complete code is:
<hr size=”1″ />

Similarly, the method of adding attributes to other XHTML tags is to add attribute = attribute value to the start tag of the tag. Note that attribute values must be enclosed in quotation marks. Single quotation marks or double quotation marks are OK, but double quotation marks are commonly used.
Format for adding attributes: < start tag attribute = “attribute value” > instance – > <table border= “None” >
Note: ordinary XHTML files have two levels of standards (not counting framework standards) – transitional standards and strict standards. The transitional standards are mainly aimed at webmasters who are used to developing websites using HTML. The above code is legal in the transitional standard, but in the strict standard, the size attribute will be regarded as illegal. XHTML is not only more standard and strict HTML, but also a way of building websites. That is to separate the content and style of web pages, which is implemented through CSS in XHTML. Therefore, we recommend that you use strict XHTML and leave the task of defining styles entirely to CSS. (questions about the XHTML standard will be introduced in a later tutorial)
As you may have noticed, here we do not write the divider label as symmetrical <hr></hr>, but as <hr / >. In fact, this is the unpaired tag mentioned in the previous tutorial. It has only the start tag <hr> but no end tag </hr>. Since it has no elements, we call such a tag an empty tag. So why should we write <hr / > instead of simply <hr>? This writing format is to meet the rule that any tag in XHTML needs to be “closed”. We call the method of adding “/” at the end of the start tag as tag self closing (or self closing, self termination, etc., whatever you like).
The self closing method of all empty tags is the same, that is, add a space and a backslash “/” before the “>” symbol of the starting tag. Spaces are not required, but individual browsers do not recognize <hr/>, only <hr/>. This is why we add spaces. (I haven’t encountered incompatible browsers yet)