The syntax of the elements

The syntax of the elements

1. Objectives

The objectives of the syntax of HTML elements are simplicity (once again!) And permissiveness. The HTML5 language is an evolution of XHTML, HTML5 has nothing to do with XML. For this reason we do not have strict rules of XHTML syntax.

2. The quotes

The quotation marks are optional for attribute values. For example, for the coding of characters can use the three following syntax:

<meta charset=UTF-8>
<meta charset="utf-8">
<meta charset='UTF-8'>
With single quotes, double quotes or without quotes, in all three cases the syntax is valid.

However, if an attribute has multiple values, will need to use double quotes:

<div class="estilo1 estilo2">
3. Items with a single opening tag

Some HTML elements have a single opening tag and no closing tag: img, br, etc.. In these cases it will be necessary to indicate the end of the element in the opening tag using /.

Examples:

<br />
<img src="imagen.png" />
HTML5 is not obligatory to indicate the closure of those labels.

Examples:

<br>
<img src="imagen.png">
4. The elements with optional end tag

In HTML 4 is not mandatory to include the closing tag of certain elements. Among them: <p>, <dl>, <td> ... In XHTML, every time you open a close tag is mandatory. HTML5 takes permissive syntax of HTML 4. Thus, the following example is valid in HTML5: <p> My paragraph without closing tag.

5. The case-sensitive

HTML5 seamlessly accepts uppercase and lowercase syntax elements and attributes. The following examples are fully valid HTML5:

<SCRIPT Src="miScript.js"> </ script>
<script SRC="MIscript.JS"> </ SCRIPT>
<script SrC="MiScript.js"> </ script>
True, well seen, these examples wanna run! We shall see that, despite everything, it is preferable to use certain rules and practices.

6. Boolean attributes

Some attributes only support boolean values ​​when applying this value.

This would be an example of a selected checkbox from opening the website. It is the use of the value for the attribute checked checked.

<input type="checkbox" checked="checked" name="checkedbox">
Indicate both parameters is redundant. In HTML5, the mere presence of the attribute is sufficient:

<input type="checkbox" checked name="checkedbox">
Again, priority has been given to the conciseness of syntax.

7. Elements HTML, HEAD and BODY

For conciseness are concerned, HTML5 has made a great effort, even colossal: the elements html, head and body are now optional.

This would be a completely valid HTML document which would be displayed correctly:

<! DOCTYPE HTML>
<meta charset="UTF-8" />
<title> My first HTML5 document </ title>
<h1> This is HTML5 </ h1>
<p> My content </ p>
They look like this:


If you examine the source code, you can see that the browsers themselves add HTML elements missing.


As you can see, the elements <thead>, and <tbody> <tfoot> are also optional.

8. The recommended syntax



We have just seen that the HTML5 is very permissive. We can write our code as we prefer, we could almost say that in any way! The advantage of this is that it offers flexibility, with very few restrictions. The main disadvantage is that well written pages will not look like anything we know, so that every web designer should look for "some time" HTML pages of a project "poorly written" you must work, before realizing what he has at hand. Being too permissive, we risk losing the common language we all know and use.

For this reason I recommend that respects the syntax of XHTML. This is a syntax that we all know, has been adopted by all web site creators, is the same for everyone and is part of the "best practices" for web designers.

Respect the rules of use and XHTML syntax:

use only lowercase
always use the quotes,
close to / labels are self-closing,
close the elements for which the end tag is optional,
indent the code to increase readability.