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

HTML5 SYNTAX

The HTML and XHTML Syntax

           It is useful to make a distinction between the vocabulary of an HTML document—the elements and attributes, and their meanings—and the syntax in which it is written.

HTML has a defined set of elements and attributes which can be used in a document; each designed for a specific purpose with their own meaning. Consider this set of elements to be analogous to the list of words in a dictionary. This includes elements for headings, paragraphs, lists, tables, links, form controls and many other features. This is the vocabulary of HTML. Similarly, just as natural languages have grammatical rules for how different words can be used, HTML has rules for where and how each element and attribute can be used.

             The basic structure of elements in an HTML document is a tree structure. Most elements have at most one parent element, (except for the root element), and may have any number of child elements. This structure needs to be reflected in the syntax used to write the document.

Syntactic Overview

              There are two syntaxes that can be used: the traditional HTML syntax, and the XHTML syntax. While these are similar, each is optimised for different needs and authoring habits. The former is more lenient in its design and handling requirements, and has a number of convenient shorthands for authors to use. The latter is based on XML and has much stricter syntactic requirements, designed to discourage the proliferation of syntactic errors.
               The HTML syntax is loosely based upon the older, though very widely used syntax from HTML 4.01. Although it is inspired by its SGML origins, in practice, it really only shares minor syntactic similarities. This features a range of shorthand syntaxes, designed to make hand coding more convenient, such as allowing the omission of some optional tags and attribute values. Authors are free to choose whether or not they wish to take advantage of these shorthand features based upon their own personal preferences.
The following example illustrates a basic HTML document, demonstrating some shorthand syntax:

HTML Example:

<!DOCTYPE html>
<html>
 <head>
   <title>An HTML Document</title>
 </head>
 <body class=example>
   <h1>Example</h1>
   <p>This is an example HTML document.
 </body>
</html>

 

               XHTML, however, is based on the much more strict XML syntax. While this too is inspired by SGML, this syntax requires documents to be well-formed, which some people prefer because of its stricter error handling, forcing authors to maintain cleaner markup.

XHTML Example:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>An HTML Document</title>
 </head>
 <body class="example">
   <h1>Example</h1>
   <p>This is an example HTML document.</p>
 </body>
</html>

           Note: The XHTML document does not need to include the DOCTYPE because XHTML documents that are delivered correctly using an XML MIME type and are processed as XML by browsers, are always rendered in no quirks mode. However, the DOCTYPE may optionally be included, and should be included if the document uses the compatible subset of markup that is conforming in both HTML and XHTML, and is ever expected to be used in text/html environments.

Due to the similarities of both the HTML and XHTML syntaxes, it is possible to mark up documents using a common subset of the syntax that is the same in both, while avoiding the syntactic sugar that is unique to each. This type of document is known as a polyglot document because it simultaneously conforms to both syntaxes and may be handled as either. There are a number of issues involved with creating such documents and authors wishing to do so should familiarise themselves with the similarities and differences between HTML and XHTML.

The Syntax

       There are a number of basic components make up the syntax of HTML, that are used throughout any document. These include the DOCTYPE declaration, elements, attributes, comments, text and CDATA sections.

DOCTYPE Declaration

            The Document Type Declaration needs to be present at the beginning of a document that uses the HTML syntax. It may optionally be used within the XHTML syntax, but it is not required. The canonical DOCTYPE that most HTML documents should use is as follows:

<!DOCTYPE html>

For compatibility with legacy producers of HTML — that is, software that outputs HTML documents — an alternative DOCTYPE is available for use by systems that are unable to output the DOCTYPE given above. This limitation occurs in software that expects a DOCTYPE to include either a PUBLIC or SYSTEM identifier, and is unable to omit them. The canonical form of this DOCTYPE is as follows:

<!DOCTYPE html SYSTEM "about:legacy-compat">

Note: The term "legacy-compat" refers to compatibility with legacy producers only. In particular, it does not refer to compatibility with legacy browsers, which, in practice, ignore SYSTEM identifiers and DTDs.

In HTML, the DOCTYPE is case insensitive, except for the quoted string "about:legacy-compat", which must be written in lower case. This quoted string, however, may also be quoted with single quotes, rather than double quotes. The emphasised parts below illustrate which parts are case insensitive.

HTML Example:

<!DOCTYPE html>

<!DOCTYPE html SYSTEM "about:legacy-compat">

<!DOCTYPE html SYSTEM 'about:legacy-compat'>

The following are also valid alternatives in the HTML syntax:

HTML Example:

<!doctype html>

<!DOCTYPE HTML>

<!doctype html system 'about:legacy-compat'>

<!Doctype HTML System "about:legacy-compat">

         For XHTML, it is recommended that the DOCTYPE be omitted because it is unnecessary. However, should you wish to use a DOCTYPE, note that the DOCTYPE is case sensitive, and only the canonical versions of these DOCTYPEs given above may be used.

XHTML Example:

<!DOCTYPE html>

<!DOCTYPE html SYSTEM "about:legacy-compat">

<!DOCTYPE html SYSTEM 'about:legacy-compat'>

            However, there are no restrictions placed on the use of alternative DOCTYPEs in XHTML. You may, if you wish, use a custom DOCTYPE referring to a custom DTD, typically for validation purposes. Although, be advised that DTDs have a number of limitations compared with other alternative schema languages and validation techniques.

 Historical Notes

         This section needs revising and may be moved to an external document and simply referred to.

The DOCTYPE originates from HTML’s SGML lineage and, in previous levels of HTML, was originally used to refer to a Document Type Definition (DTD) — a formal declaration of the elements, attributes and syntactic features that could be used within the document. Those who are familiar with previous levels of HTML will notice that there is no PUBLIC identifier present in this DOCTYPE, which were used to refer to the DTD. Also, note that the about: URI scheme in the SYSTEM identifier of the latter DOCTYPE is used specifically because it cannot be resolved to any specific DTD.

As HTML5 is no longer formally based upon SGML, the DOCTYPE no longer serves this purpose, and thus no longer needs to refer to a DTD. However, due to legacy constraints, it has gained another very important purpose: triggering no-quirks mode in browsers.

HTML 5 defines three modes: quirks mode, limited quirks mode and no quirks mode, of which only the latter is considered conforming to use. The reason for this is due to backwards compatibility. The important thing to understand is that there are some differences in the way documents are visually rendered in each of the modes; and to ensure the most standards compliant rendering, it is important to ensure no-quirks mode is used.