Design changes in HTML5
Elements, attributes, and attribute values are semantic according to the HTML5 Specification.
These definitions allow HTML processors, such as Web browsers, screen readers or search engines, to present and use documents and applications in a wide variety of contexts that the author might not have considered.
This enables a single document to be used by:
- Different types of browsers (desktop vs mobile),
- Screen readers for the visually impaired,
- Indexing by search engines,
- Navigation by making use of document outlines, and
- Table of content generators.
Note: This post will not go in depth but will simply highlight some of the design changes from HTML4.
The Document Type Declaration is still required due to legacy reasons but is pragmatic compared to previous iterations.
It's no longer coupled to a specific version or flavor (Strict, Traditional and Frameset) of an HTML specification.
To target a specific character encoding for your documents to be served, you
should configure the
Content-Type header. However, we no longer need to
<meta charset="UTF-8" />
We no longer need to specify
type="text/css" when referencing external
<link rel="stylesheet" href="style.css" />
MathML & SVG
These elements can now be used within an HTML document without having to specify their XML namespaces.
XHTML 1.0 enforces HTML to follow the same syntax as XML: all tags in lowercase, attributes quoted, elements must be properly closed.
HTML5 is case-insensitive and has no rules when it comes to the style of writing markup.
This defines what child or descendant elements can be nested within an element. Previously there were two major categories namely "inline" and "block-level" which had different rules based on the flavor (Strict, Traditional and Frameset) of HTML.
These terms also caused confusion with CSS so HTML5 no longer uses them. Instead it categorized content based on how they can be nested.
Not all elements appear in these categories but those that do can overlap other categories.
- Metadata content e.g.
- Flow content e.g.
- Sectioning content e.g.
- Heading content e.g.
- Phrasing content e.g.
- Embedded content e.g.
- Interactive content e.g.
HTML5 no longer deprecates elements or attributes as it remains backwards compatible instead they flag them as obsolete.
They shouldn't be used by web developers however user agents will still have to support them.
Damages usability and accessibility
Not used often, caused confusion or its function is handled by another element
A number of attributes have also been made obsolete.
Some elements have been semantically redefined.
aelement now has a transparent content model. This means you are legally allowed to nest a
divelement if its parent allows flow content.
belement makes text stylistically bold and does not indicate importance. To indicate importance you should use
ielement makes text stylistically italic and does not indicate emphasis. To emphasize something you should use
citeelement represents the title of creative work like a movie, documentary or book. The browser will render the citation in italics.
smallelement is independent of its styled presentation and is now used for side-comments and small print, including copyright and legal text.
These elements were introduced to enhance the structure of a document:
Other new elements include:
input element has new values for the
- Drag and drop
- Full screen
- Online and Offline events
- Pointer Lock
- Web storage
- Web workers