Use valid Hyper Text Mark-up Language (HTML)

Use valid HTML tags. Separate your content from existing design. Allow the user to choose how they access content

What is valid HTML?

Websites are written in Hyper Text Mark-up Language (HTML). In other words, webpages consist of "hyper text" that is "marked-up". In plain English, HTML simply means "online content" that is "labeled".

Webpages where all online content is labeled correctly are said to be written in "valid HTML". So by labeling your content correctly, you will be creating accessible and easy to use webpages written in valid HTML.

This guide will teach you how to label your online content correctly using appropriate "tags".

What are tags?

"Tags" is the name given to labels used in HTML. Some examples:

• A paragraph of text will be labeled with a paragraph tag: <p>.
• Images will be labeled with an image tag: <img>.
• Headings will be labeled with a heading tag: <h1>, <h2>, <h3>, etc.
• Hyperlinks will be labeled with an anchor tag <a>.

Writing valid HTML is simply a matter of labeling content correctly using the correct tags.

What do tags do?

Tags describe content. They also suggest how content within each tag should be displayed.

Online content is split into categories (such as headings and paragraphs). Each category has a different tag. Each tag is associated with a way of displaying content. So tags determine how each chunk of content will display.

To change the way each type of content displays, someone need simply change the design associated with that tag. This will not change the content itself in any way. It will just change the way that content is displayed.

Separate content from design

Separating content from design is essential when creating accessible and easy to use websites. Giving users control over how content is displayed enables users to choose how they access your content. Think of it as the difference between listening to a lecture or engaging in a conversation.

Unlike a storybook where each chapter is read in sequence, users of web pages get to choose the order in which they access content. They get to choose whether pictures are displayed or not; the text size and style; colours; and whether they use the mouse or keyboard to navigate; they can even choose to have the site read out to them. Different users use different browsers that display web pages differently. They use different mediums: monitor screens of all sizes, printed paper versions or even mobile phone screens.

Content must be labeled in such a way that it can be redesigned to suit each users individual requirements without separating them from your content.

Provide clear navigation

Clear navigation includes anything that increases the likelihood a user will find what they are looking for. This is not just limited to menus.

Clearly labeled content is crucial online, where users do not access content in sequence. Users skipping between webpages can easily get lost. So it is not only important to use the right tags, it is also important to include the right information with each tag.

Why is user choice important?

For a website to be accessible and easy to use, everyone must be capable of accessing your content using whatever method suits them, regardless of personal abilities (or disabilities) or preferences. Some examples:

• Mobility restrictions should not inhibit web use. Users must be able to navigate using a keyboard or mouse.
• Visual impairment should not inhibit web use. Blind users must be able to have content read out to them; colour-blind people must be able to change the colours of text and backgrounds; and partially sighted people must be able to increase text size.

To make a website accessible to all, it is necessary to organize and label content properly. Only then can control of design be handed over to the user without allowing them to alter your content.

How can I use valid HTML?

By simply labeling content correctly, you will be using valid HTML. Content you create will be accessible and usable. This guide will teach you how to use valid HTML. In other words, you will be shown how to label your online content correctly using appropriate tags.