Following the rules to a well-structured web page

Daniel Hartley

Reading time: 6 to 7 minutes

Web pages take many forms, but like species branching from a common ancestor, they share a basic structure.

The first web pages were simulacra of printed pages so it was natural that elements familiar from print were transcribed for the Internet. A web page is a document containing elements such as titles, headers, and paragraphs. These are used to structure and order its contents and they impart meaning.

The range of elements has since expanded to meet new demands. The original specification included markup for images; it now includes markup - or tags - for video, audio and canvas (used for animation).

Using elements correctly helps users create an accurate model of the page and its contents.

The head contains meta information about the document such as its author. The content of the page appears in the body.

head
body
- header
  - nav
- main
  - article
    - h1 Following the rules to a well-structured web page
    - p Web pages take many forms…
    - p…
    - h2 HTML elements and tags
    - p…
- footer

An HTML element has an equivalent tag or set of tags which are used to decorate, or mark up text or other content. The P element - analogous to a paragraph - has opening and closing tags:

<p>This is a paragraph.</p>

This instruction is declarative; it specifies semantic intention, but it is not prescriptive. Specific representation is left to the discretion of web application authors (the people responsible for browsers like Chrome, Firefox, Edge, Tor, and Opera), and web developers.

Interpretation of an instruction need not be visual; an audio device or application, such as a screen reader represents the space before and after a paragraph in units of time, not space.

One third of screen reader users also output content to a refreshable braille display.

Separation of presentation and content

The basic structure of a page is set out using HTML elements. HTML is also innately semantic; it confers meaning.

Visual elaboration of meaning - design - is usually via rules written in a language called CSS. CSS wasn't part of the original specification for web pages but was added later to provide designers and developers with greater control over presentation, formatting, and layout.

CSS can be used to control every aspect of a page from fonts, colours, the look and behaviour of buttons and links, to page layout.

CSS rules are used in all sorts of ways to enhance web pages, but used injudiciously they can be misleading.

Which button would you choose?

Salvation

If you are using a screen reader you know the answer. There is only one button.

In practice, it is usually non-sighted users who suffer when there is a mismatch between the semantic value of an element and its use, or when meaning is conveyed by visual means alone.

Navigation

Links, text input fields, checkboxes, dropdown menus, images and buttons are interactive elements. Users can navigate between them using either the keyboard or a screen reader.

Browsers support keyboard navigation between interactive elements primarily using the tab key. This is a quick form of navigation for expert users and another way to build up a mental model of the page. The appearance of an element changes to reflect that it has keyboard focus/pointer hover.

Headers

Headers are used by sighted and non-sighted readers to get the gist of a page in order to decide whether it is worth reading. Screen readers are also able to navigate between headers.

By convention headers decrease in size.

H1H2H3H4H5H6

The specification recommends one H1 element per page and so it is often reserved for the title. The author may use as many of the other headers as they please provided they are nested correctly - H3 within H2, etc.

These headers are routinely resized, and their colours and fonts changed but it is bad practice to abuse their hierarchy or use other elements in their place. Doing so loses meaning, and disrupts navigation.

The back button

Pages don't exist in isolation. Hypertext allows pages to be connected across sites, and maintaining this connection is critical. Users need to move freely from page to page using links and the browser back and forward buttons.

Use of the keyboard, screen reader, or other assistive devices reveals the semantic structure of the page. They provide an alternative, and at times, improved way of navigating and interacting with a page.

Keyboard navigation is fast and easy because it skips passive content and relies on the interconnected structures which underpin the web.

If you don't know the keyboard shortcuts to move back and forwards between pages in the browser, here they are:

Mac: ⌘ + left/right arrow key
Windows & Linux: Alt + left/right arrow key

The primary goal of a page is to be understood

When we open a new page we immediately scan it for meaning, searching for answers or clues as to its purpose.

HTML elements are designed to help developers establish a semantic model for users.

Articles, blogs and posts need a relevant title, and quick access to headings which, taken together, provide an outline of the subject under discussion.

Ecommerce sites use headers for product categories, checkboxes and dropdown menus to filter items, links of additional information and buttons for purchasing.

Mental models, conventions, and preconceptions

Users spend most of their time on other sites. Jakob's Law

When we visit a new page for the first time we do not bring a fresh eye to it; we have a stack of preconceptions fashioned by all the other pages we have seen. Upsetting our expectations makes us work harder to understand the basics when our attention should be focused on what makes the page unique.

Innovation and originality should not play fast and loose with existing models and conventions.

Animation

Movement is distracting, demands our attention, and is best used with caution. Once we have built a model of a page we object to our assumptions being upset. Images and blocks of text that appear from nowhere or move around are highly disruptive to the static model we are trying to build. Change should be initiated by the user and respect cause and effect. Buttons and links are good examples.

Context

The primary aim of a page is to make itself understood, but it must also provide clues as to other pages on the same site. This is part of the context of the page, and as well as helping us navigate the site, helps us answer questions such as: Is this author reputable? Are there other interesting things here? Can I trust this site with my money?

If your model doesn't fit the user's model, change your model

A mental model is what the user believes about the system at hand.

Mental Models Jakob Nielsen

Consider this example. The browser address bar was designed for users to type in the name of a web site they already knew. If they wanted to search for a web site, they used a search box like the one on the Google homepage. Many people confused the two. The Chrome address bar was adapted to return either the requested page or search for a match. The new model caught on, and all browsers now work this way.

Web applications

The third core technology of web pages is JavaScript, a programming language that allows users to interact with pages.

Websites like Facebook and Gmail have few pages but many ways to interact. For this reason they are often called web applications, or web apps, and rely on JavaScript for their functionality (although you can run a non-JavaScript version of Gmail). Under the hood they are still web pages composed of HTML elements.

JavaScript used wisely can enhance a page. Interactive graphs are a good example. But JavaScript should not be relied upon for a page to work.

Summing up

HTML is a language with grammar and syntax designed for displaying content on the Internet. It contains all that is necessary to create a web page. Disable JavaScript and CSS styling and a page should still work.

CSS offers visual improvements for sighted users. JavaScript adds non-essential interactions and features.

Both JavaScript and CSS can be turned off. The Smashing Magazine series 'I Used The Web For A Day…' (there are links below) covers how to disable them in different browsers.

A site that functions without CSS and JavaScript is likely to be well-structured, well-designed, and accessible.

Back to the top of the page

Published: Tue May 25 2021