When creating an HTML5 document, we can use two different styles: HTML and XML.
- HTML style assumes the following points:
- Elements may not have initial start tags
- Ending end tags may be missing from elements
- Only empty elements (void elements) (e.g., br, img, link) can be closed by means of a slash/>
- The case of tag and attribute names does not matter
- You can omit quotation marks around attribute values
- Some attributes may not have values (checked and disabled)
- Special characters are not escaped
- The document must have a DOCTYPE element
This is the so-called “permissive” style, based on indulgences when creating a document.
HTML5 document can also be described using XML syntax. This style is also called “XHTML”. It is used if the content-type header is relevant application/xml+xhtml. This style is characterized by the following rules:
- Each element must have a start opening tag
- Non-void elements with a start start tag must also have an end end tag
- Any element can be closed with a slash />
- Tag and attribute names are case sensitive, usually in lower case
- Attribute values must be quoted
- Attributes without values are not allowed ( checked=”checked”instead of just checked)
- Special characters must be escaped
Let’s compare the two approaches. HTML5 approach:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Easywptutorials.com</title>
</head>
<body>
<p>Best Programming Tutorials and Blog<br>
<input type="button" value="Programming" >
</body>
</html>
And a similar example using the XHTML approach:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Easywptutorials.com</title>
</head>
<body>
<p>Best Programming Tutorials and Blog<br />
<input type="button" value="VALUE" /></p>
</body>
</html>
When using XHTML syntax, we also need to specify the namespace for this document:
<html xmlns=”http://www.w3.org/1999/xhtml“>
The choice of a particular style for writing html documents depends on the preferences of the programmer or web designer. A mixed style is often used, which borrows the rules from the first and from the second style.
At the same time, it should be borne in mind that the presence of an element’s closing and opening tags reduces the likelihood that the element will be misinterpreted by the browser.
Also, enclosing attribute values in quotation marks can help avoid potential errors. So, an attribute classcan take several values in a row. For example:
. But if we omit the quotes, then “navmenu” will be used as the value, and “bigdesctop” will be interpreted by the browser as a separate attribute.
If there are any difficulties as to how correct the generated html markup is, then it can be checked using the validator at https://validator.w3.org :
We can insert the web page code into the text field, and after clicking on the “Check” button at the bottom, the validator will either show us errors in red, or in green, notify us that there are no errors, and the code has been validated.