The <nav>, <article> and <aside> elements are all contained in a <main> element whose ARIA attribute is main.
This is the <article> element. Its ARIA attribute is article.
Background
In 1998 W3C decided to abandon development of HTML and begin work on an XML based framework: XHTML.
In 2004 it was argued at a W3C workshop that XHTML failed to take account of earlier features and that it would be better to try and rescue HTML. W3C diasagreed but Opera and Mozilla, who had supported this proposal, were joined by Apple and work began on HTML5.
In 2006 W3C had a change of heart and joined in the development of HTML5, later dropping any further development of XHTML1 and 2.
In 2011 HTML5 and CSS3, a tidied up version of CSS designed to support HTML5, were published. At the same time, both projects moved to a rolling release; so there will be no HTML6 or CSS4 and, for all practical purposes, they are just known as HTML and CSS.
Having used computers to produce documentation, I decided, following an inspiring talk by Dave Fisher at the local Linux users group in 2010, to explore web publishing, this being one practical fruit of this new interest, another being the development of the Heath Old Boys Association website.
HTML key features
Among the key features of the new approach to HTML were:
- stricter separation between content, in function specific HTML elements, and presentation, specified by CSS rules;
- five semantic elements — illustrated on this page — to clarify the functions of different parts of a webpage;
- focusing HTML elements with an ambiguous role on content and obsoleting those with only a presentational role.
Changes to HTML since then have largely involved clarification and consolidation of the work done before 2011 and the obsoleting of elements which no longer serve a useful purpose, usually because a superior way of achieving the same objective has been developed.
One exception to this has been the introduction of the <main> element and the CSS flex container which has enabled:
- the layout of semantic elements within a webpage to be controlled with similar precision to the, now deprecated, table layouts;
- the order in which page content is presented to differ depending on whether it is accessed through a browser or a screenreader.
In 2019 XHTML5 became available, allowing the use of all the new elements of HTML within an XML based framework.
HTML and page layout compares the continuous flow and page based approaches to web page design — the former having become the dominant paradigm for HTML and CSS development.
Accessibility
The adoption by W3C in 2014 of the WAI ARIA Accessibility Guidelines and recent work on clarifying the appropriate use of the WAI ARIA attributes should also bring benefits to screenreader users.
In a presentation for the openSUSE Virtual Summit on I outlined how CSS containers can help to make websites more accessible for disabled users.
You can download the IBM Equal Access Accessibility Checker from the Chrome Web Store though you may have to click on ‘More extensions’ before it appears.
CSS developments
Among the developments in CSS over the past twelve years have been:
- CSS colours, including a major expansion in the 2020s in the range of options for using colours
- the v unit corresponding to 1% of a viewport
- a wide range of properties for use with CSS flex and grid containers;
- a range of
voice-properties allowing you to specify the gender, age, pitch, speed and so on of the voice used by a speech synthesiser - new @ rules including
@counter, which permits the use and creation of alternative list counters to the standard ones, and@font-facewhich allows you to load specific font families for your website - revision of the @media rule to simplify its operation and extend the range of values which may be set using it
- new options for decorating elements.
There is an explanation of the rationale for the CSS rules which underpin the other pages on this website in What might CSS do to improve my website? first presented at the Manchester Software Freedom Day on Saturday, . You will find an account of how I built a new website for the Heath Old Boys Association to replace the old one and an account of how I updated it to take advantage of CSS containers in the HOBA website documentation.