Differences between HTML and XHTML

If we know HTML we can support our knowledge with this list of differences with XHTML, which will help us understand the language evolution of HTML.

Throughout the previous chapters of the we have been able to learn many things about the extensible hypertext markup language, ranging from the creation of the basic document to a tour of the most fundamental tags to take our first steps.

Those who already know HTML will have experienced how XHTML is just an evolved version of what they already knew. Now the approach is different, because XHTML is strictly semantic, which means that the tags only express what each piece of content means, whether it is a headline, a list item, etc. Based on this, all the labels and attributes that were used to define the form (style with which the contents on the page had to be represented) have been eliminated, which must now always be indicated separately using CSS.

However, the truth is that the behavior that we already knew about HTML and most of its main tags, continue to remain the same. Therefore, someone who already knows HTML, with a few changes in their coding habits, will be able to start working with XHTML without too many problems.

Note: We therefore do not believe it is necessary to review, one by one, all the XHTML tags in this manual and explain their operation, since we have already seen them previously in the complete one published on .com.

With the intention of making it easier for developers to go from working with HTML to starting to model with XHTML, we have created this article in which we want to list the most basic differences between these two languages.

Semantic XHTML

XHTML tries to completely separate the form from the content, so keep in mind that in XHTML you should only use the tags and attributes that serve to define what each thing is and not those that serve to define how each thing should be seen. Note: The idea of ​​XHTML as a semantic language was explained in the introduction to the .

Basic XHTML document

The basic HTML document was a bit simpler and more malleable than XHTML. In XHTML we are forced to specify things like the character set, the DTD we are using with the Doctype or a new slightly more complex BODY element. For more information access the article.

Tags must be well nested

Remember that there are strict rules in XHTML for the nesting of tags and that it is mandatory that those that are opened after close before. That is, the order of opening and closing the tags cannot be altered.

Correct:

Hello

Incorrect:

Hello

All tags close

All tags must have their corresponding closing tag. In addition, it is allowed that those tags such as BR or IMG, which do not have a closure in HTML, can be closed with a slash at the end of the opening.

Correct:

or or

Incorrect:

All tags and attributes are lowercase

The XML language is case sensitive, so for XML the tag with the letters of its name or attributes in upper case is different from those that go with them in lower case. Thus, in XHTML the convention of writing everything in lowercase has been adopted.

You can’t write content to the BODY without putting it in any tag

For the XHTML document to be well-formed, you cannot put a text directly in the body of the page without having put it in some tag previously.

Correct:

Incorrect:

text

All attribute values ​​must be enclosed in quotes.

It is indifferent to use double or single quotes, but we are obliged to use them in the values ​​that we assign to any attribute of the labels.

All attributes must have value

You cannot minimize attributes, that is, they must all have an assigned value. An example of this is the “selected” attribute of an OPTION element that was indicated to say that it should appear as selected by default. We must always place it by assigning it some value.

Correct:

whatever

Incorrect:

whatever>

Block elements must not be inserted inside inline elements.

Elements of the “block” type, such as P or DIV, are more general than elements of the “inline” type, such as or . For this reason we cannot place block type elements inside other less general ones such as inline ones.

Correct:

Pepe said: Hello

Incorrect:

Pepe said:

>

Scripts and styles must be placed in CDATA blocks

Due to the characteristics of XML, characters like ”

conclusion

With the previous rules you will have enough to verify that the differences between HTML and XHTML are quite subtle. Some of them minimal, but no less important.

The W3C recommends the use of XHTML, so it is worth putting your batteries together to start modeling your pages according to this language, which is a little stricter than HTML. If you want your page to validate correctly and respect the standards, you must take into account all the above rules.