Well-Structured HTML5 Documents

HTML5 was initially proposed by individuals from Apple, the Mozilla Foundation, and Opera Software, known as the Web Hypertext Application Technology Working Group (WHATWG). Later, W3C took notice of the WHATWG proposal and announced a restart of an HTML specification effort. WHATWG found XHTML 2.0 too document-centric and thus inappropriate for blogs, forums, web stores, and multimedia sites. Their major concern was to create a platform for dynamic web applications.

The name HTML5 is a bit misleading, because HTML5 is not just another HTML language. It is often used in the context of web applications. It is the complete reformulation of HTML with new capabilities. Still, HTML5 is designed to be backward-compatible with older browsers. Moreover, the same document can be written with HTML or XHTML serialization (known as HTML5 and XHTML5, respectively). However, processing instructions are not supported. Beyond the well-known text/HTML media type, a new media type called text/html-sandboxed can also be used, which makes it possible to interpret a file without giving the content access to the rest of the web site. Because of a new approach that separates authoring and rendering conformance requirements, deprecated tags are not needed anymore.

During the upcoming years when earlier browser versions will still be present, HTML5 support can be critical. There are services such as the “HTML5 test” that checks HTML5 support in the browser they are opened. As for the markup contributors, several tests are available on the W3C testing web page, where current tests can be reviewed, and new tests submitted.

Well-structured Web documents (not just HTML5 documents) apply a platform- and language-independent interface known as the Document Object Model (DOM) that makes it possible to refer to HTML, XHTML, and XML elements as objects. This model provides dynamic content access and updates as well as document styling for scripts. The DOM can be considered a mechanism that makes web pages behave like applications. The DOM can be visualized as a tree structure for the hierarchy of markup elements within a document.

Improperly closed elements-and in many cases the missing closing tags-destroy the DOM structure, which might have serious consequences, from disrupted layout to incorrect styling. Thanks to the built-in error-handling feature of web browsers, many of such errors might be corrected on-the-fly while rendering, but the intended structure can be presumed only. Developers should not rely on this error-handling feature!

HTML documents usually consist of a document type declaration, a Formal Public Identifier, and a link associating the document with the appropriate DTD in that order at the very beginning of the file. HTML5 documents omit the DTD. All HTML documents must have an HTML root element that contains the document head and the document body, respectively.

The document head provides processing information and metadata relating to the whole document. Background, font styles, margins, and other styles are generally defined here too. The document body holds the content of the document. This can contain simple text, formatted text, images, videos, applets, or dynamic content, for example. Block elements can be grouped with div elements, while inline contents can be delimited with span. A text that has the semantic meaning of a paragraph should be provided by the p element.

The document head and the document body should be familiar for all web designers, regardless of the HTML or XHTML versions and variants they have experience with. Beyond these basic structuring, however, one can use further tags in HTML5 such as section, article, header, footer, nav, and aside. Note that not all HTML5 structuring elements are appropriate for all web documents. For example, not all documents have articles. The use of sections and articles is determined by the logical flow of the document.

HTML5 provides much more than just new structuring elements. HTML5 supports many features that were available originally through plug-ins or sophisticated code only. Beyond markup elements and attributes, HTML5 specifies scripting Application Programming Interfaces (APIs) as well. HTML5 also introduced multimedia elements (audio, video), and supports direct embedding of elements from external vocabularies such as SVG and MathML. It is important to note, however, that a large share of HTML5 functionalities can be achieved through the use of additional technologies, including CSS3, server-side scripts, JavaScript transformations, Java, or XSLT.