✎ Technique: Structuring content

Adding structure to web content makes it more readable and comprehensible to everyone and especially to people with a visual or cognitive impairment that makes reading on-screen content difficult.

The purpose of HTML is to give structure to otherwise seamless runs of text. HTML allows us to provide semantic meaning to text so that it's available to assistive technologies.


A diagram showing a web page increasing in structural clarity by being divided into paragraphs then lists and headings being added

In the diagram, three versions of a web page are illustrated. From left to right, they increase in structural clarity. 

The first (left-most) example imagines a web page with no structural block-level elements at all. That would be a dense and frustrating read, especially for those using assistive technologies who would have no choice but to start at the beginning and read the whole content.

The second example improves on the first by dividing the mass of text into distinct, reasonably small paragraphs. Paragraphs divide groups of sentences thematically, aiding comprehension.

The third example is optimally structured using paragraphs, headings, and lists to give form to the content. Headings divide the content into larger sections than paragraphs and simultaneously label those sections. They can be used as a navigation aid by screen reader users who can, for example, skip past a section that doesn't interest them by pressing the "h" key to take them to the next heading.

Lists aid comprehension by grouping together short, digestible pieces of information, and they can be used to summarize the salient points in the preceding body text. Lists are announced and enumerated in assistive technologies.

You don't have to be able to write HTML in order to create well-structured web content—most web content editors provide features to allow you to give text semantic meaning, so make sure you use them over features that only provide visual styling.

Code editor: Markdown

One way to easily write structured content that outputs as HTML is to use Markdown syntax. This code editor is set up for Markdown so you can play with the syntax and see the HTML output it creates.

See the Pen Markdown by HUIT - Web, UX and Digital Accessibility Services (@hwpdas) on CodePen.