HTML5 MORE ABOUT SYNTAX

Elements

Elements are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between. The difference between start tags and end tags is that the latter includes a slash before the tag name.

Example:

This example paragraph illustrates the use of start tags and end tags.

<p>The quick brown fox jumps over the lazy dog.</p>

 

In both tags, whitespace is permitted between the tag name and the closing right angle bracket, however it is usually omitted because it’s redundant.
 

In XHTML, tag names are case sensitive and are usually defined to be written in lowercase. In HTML, however, tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase. The case of the start and end tags do not have to be the same, but being consistent does make the code look cleaner.

HTML Example:

<DIV>...</DIV>

 

An empty element is any element that does not contain any content within it. In general, an empty element is just one with a start tag immediately followed by its associated end tag. In both HTML and XHTML syntaxes, this can be represented in the same way.

Example:

<span></span>

 

Some elements, however, are forbidden from containing any content at all. These are known as void elements. In HTML, the above syntax cannot be used for void elements. For such elements, the end tag must be omitted because the element is automatically closed by the parser. Such elements include, among others, br, hr, link and meta

HTML Example:

<link type="text/css" rel="stylesheet" href="style.css">

I

n XHTML, the XML syntactic requirements dictate that this must be made explicit using either an explicit end tag, as above, or the empty element syntax. This is achieved by inserting a slash at the end of the start tag immediately before the right angle bracket.

Example:

<link type="text/css" href="style.css"/>

 

Authors may optionally choose to use this same syntax for void elements in the HTML syntax as well. Some authors also choose to include whitespace before the slash, however this is not necessary. (Using whitespace in that fashion is a convention inherited from the compatibility guidelines in XHTML 1.0, Appendix C.)

 Attributes

Elements may contain attributes that are used to set various properties of an element. Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like this.

Example:
This example illustrates how to mark up a div element with an attribute named class using a value of "example".

<div class="example">...</div>

Attributes may only be specified within start tags and must never be used in end tags.

Erroneous Example:

<section id="example">...</section id="example">

 

In XHTML, attribute names are case sensitive and most are defined to be lowercase. In HTML, attribute names are case insensitive, and so they could be written in all uppercase or mixed case, depending on your own preferences. It is conventional, however, to use the same case as would be used in XHTML, which is generally all lowercase.

HTML Example:

<div CLASS="example">

 

In general, the values of attributes can contain any text or character references, although depending on the syntax used, some additional restrictions apply, which are outlined below.
There are four slightly different syntaxes that may be used for attributes in HTML: empty, unquoted, single-quoted and double-quoted. All four syntaxes may be used in the HTML syntax, depending on what is needed for each specific attribute. However, in the XHTML syntax, attribute values must always be quoted using either single or double quotes.

Empty Attributes

An empty attribute is one where the value has been omitted. This is a syntactic shorthand for specifying the attribute with an empty value, and is commonly used for boolean attributes. This syntax may be used in the HTML syntax, but not in the XHTML syntax.

Note: In previous editions of HTML, which were formally based on SGML, it was technically an attribute’s name that could be omitted where the value was a unique enumerated value specified in the DTD. However, due to legacy constraints, this has been changed in HTML5 to reflect the way implementations really work.

HTML Example:

<input disabled>...</div>

The previous example is equivalent to specifying the attribute with an empty string as the value.

<input disabled="">...</div>

Note: The previous example is semantically equivalent to specifying the attribute with the value "disabled", but it is not exactly the same.

Example:

<img src="decoration.png" alt>

The previous example is equivalent to specifying the attribute with an empty string as the value.

<img src="decoration.png" alt="">

 Unquoted Attribute Values

In HTML, but not in XHTML, the quotes surrounding the value may also be omitted in most cases. The value may contain any characters except for spaces, single or double quotes (' or "), an equals sign (=) or a greater-than symbol (>). If you need an attribute to contain those characters, they either need to be escaped using character references, or you need to use either the single- or double-quoted attribute values.
Some additional characters cannot be used in unquoted attribute values, including space characters, single (') or double (") quotation marks, equals signs (=) or greater than signs (>).

HTML Example:

<div class=example>

Double-Quoted Attribute Values

In both HTML and XHTML, attribute values may be surrounded with double quotes.
By quoting attributes, the value may contain the additional characters that can’t be used in unquoted attribute values, but for obvious reasons, these attributes cannot contain additional double quotation marks within the value.

Example:

<div class="example class names">...</div>

Single-Quoted Attribute Values

In both HTML and XHTML, attribute values may be surrounded with single quotes.
By quoting attributes, the value may contain the additional characters that can’t be used in unquoted attribute values, but for obvious reasons, these attributes cannot contain additional single quotation marks within the value.

Example:

<div class='example class names'>...</div>

Character References

Discuss numeric and named character reference syntax. May link to the list of entity references in a separate document, rather than trying to list them all in here.

Understanding MIME Types

Discuss text/html, application/xhtml+xml, etc.

Character Encoding

Overview of Unicode, character repertoires, encodings, etc. Declaring the encoding with the Content-Type header, BOM, meta, etc.

 Choosing HTML or XHTML

The choice of HTML or XHTML syntax is largely dependent upon a number of factors the, including needs of a given project, the skill set of the developers involved, level of support in browsers used by the site’s target audience, or it may simply be a matter of personal preference.
The important thing to understand is that there are valid reasons to choose both, and that authors are encouraged to make an informed decision.

Need to develop guidelines to help authors make this choice.

Polyglot Documents

A polyglot HTML document is a document that conforms to both the HTML and XHTML syntactic requirements, and which can be processed as either by browsers, depending on the MIME type used. This works by using a common subset of the syntax that is shared by both HTML and XHTML.
Polyglot documents are useful to create for situations where a document is intended to be served as either HTML or XHTML, depending on the support in particular browsers, or when it is not known at the time of creation, which MIME type the document will ultimately be served as.
In order to successfully create and maintain polyglot documents, authors need to be familiar with both the similarities and differences between the two syntaxes. This includes not only syntactic differences, but also differences in the way stylesheets, and scripts are handled, and the way in which character encodings are detected.
This section will provide the details about each of these similarities and differences, and provide guidelines on the creation of polyglot documents.
Base this on the HTML vs. XHTML article