What's a Valid HTML5 Document

What's a valid HTML5 document?

The title element is indeed required, but as Jukka Korpela notes, it also must be non-empty. Furthermore, the content model of the title element is:

Text that is not inter-element whitespace.

Therefore, having just a space character in the title element is not considered valid HTML. You can check this in W3C validator.

So, an example of a minimal and valid HTML5 document is the following:

<!doctype html><title>a</title>

Bare minimum HTML5 - is it valid?

The HTML5 spec describes what tags can be omitted under Tag omission in text/html. However, the spec states:

A non-normative description of whether, in the text/html syntax, the
start and end tags can be omitted. This information is redundant with
the normative requirements given in the optional tags section, and is
provided in the element definitions only as a convenience.

Since it's non-normative, we can not rely on it for conformance checking. In the normative optional tags section, it lists:

An html element's start tag may be omitted if the first thing inside
the html element is not a comment.

An html element's end tag may be omitted if the html element is not
immediately followed by a comment.

A head element's start tag may be omitted if the element is empty, or
if the first thing inside the head element is an element.

A head element's end tag may be omitted if the head element is not
immediately followed by a space character or a comment.

A body element's start tag may be omitted if the element is empty, or
if the first thing inside the body element is not a space character or
a comment, except if the first thing inside the body element is a
meta, link, script, style, or template element.

A body element's end tag may be omitted if the body element is not
immediately followed by a comment.

So it seems the document is valid save for the missing <title>, which is probably why the w3 validator complains. There are further indications that <title> is required. First, the Content model section for <head>, which is normative, states:

If the document is an iframe srcdoc document or if title information
is available from a higher-level protocol: Zero or more elements of
metadata content, of which no more than one is a title element and no
more than one is a base element.

Otherwise: One or more elements of metadata content, of which exactly
one is a title element and no more than one is a base element.

And the spec states:

A normative description of what content must be included as children
and descendants of the element.

Is an HTML5 document a valid one if it doesn't have any of the standard HTML5 elements?

Just like it's not required to use a table tag in HTML4, you don't have to use the new semantic tags in order to create a valid HTML5 document. If it has a HTML5 doctype at the top, and validates, it's HTML5.

That said, if an interview candidate had HTML5 on their CV and then didn't use semantic tags when given a good opportunity to demonstrate their knowledge, I'd start asking questions. Semantic tags are one of the many important benefits that HTML5 brings, and to just ignore them perhaps shows the candidate was more keen to put buzzwords on their resume than actually learn useful technologies.

Is this minimalist HTML5 markup valid?

It's not valid. To check it you can run it in W3C Validator

The error is: Element head is missing a required instance of child element title.

...

UPDATE

As vcsjones stated the head element is optional. That's the title one is required. Credit to mootinator for pointing out that the body is also optional.

So the simplest valid document will be:

<!DOCTYPE html>
<title></title>

Where is the HTML5 Document Type Definition?

There is no HTML5 DTD. The HTML5 RC explicitly says this when discussing XHTML serialization, and this clearly applies to HTML serialization as well.

DTDs have been regarded by the designers of HTML5 as too limited in expressive power, and HTML5 validators (basically the HTML5 mode of http://validator.nu and its copy at http://validator.w3.org/nu/) use schemas and ad hoc checks, not DTD-based validation.

Moreover, HTML5 has been designed so that writing a DTD for it is impossible. For example, there is no SGML way to capture the HTML5 rule that any attribute name that starts with “data-” and complies with certain general rules is valid. In SGML, attributes need to be listed individually, so a DTD would need to be infinite.

It is possible to design DTDs that correspond to HTML5 with some omissions and perhaps with some extra rules imposed, but they won’t really be HTML5 DTDs. My experiment with the idea is not very encouraging: too many limitations, too tricky, and the DTD would need to be so permissive that many syntax errors would go uncaught.

Are custom elements valid HTML5?

The Custom Elements specification is available in Chrome and Opera, and becoming available in other browsers. It provides a means to register custom elements in a formal manner.

Custom elements are new types of DOM elements that can be defined by
authors. Unlike decorators, which are stateless and ephemeral, custom
elements can encapsulate state and provide script interfaces.

Custom elements is a part of a larger W3 specification called Web Components, along with Templates, HTML Imports, and Shadow DOM.

Web Components enable Web application authors to define widgets with a
level of visual richness and interactivity not possible with CSS
alone, and ease of composition and reuse not possible with script
libraries today.

However, from this excellent walk through article on Google Developers about Custom Elements v1:

The name of a custom element must contain a dash (-). So <x-tags>, <my-element>, and <my-awesome-app> are all valid names, while <tabs> and <foo_bar> are not. This requirement is so the HTML parser can distinguish custom elements from regular elements. It also ensures forward compatibility when new tags are added to HTML.

Some Resources

  • Example Web Components are available at https://WebComponents.org
  • WebComponents.js serves as a polyfill for Web Components until they are supported everywhere. See also the WebComponents.js github page & web browser support table.


Related Topics



Leave a reply



Submit