Workshop one: HTML & CSS

Overview

- Before starting this workshop, check you have the requisite tools and setup.

- By the end of this workshop, you will be able to:

Create semantically correct HTML pages
Validate HTML accessibility
Implement basic CSS Grid layouts
Use AI tools to assist development

Semantic HTML

Before we consider how a page looks, we must make sense of it. If it is an article, we break it down into sections and paragraphs and use headers to group ideas. We might also provide a table of contents and links to related articles.

If it is an app, we will need to control the flow of information or data and provide assistance (search, dropdown menus, help). We will attribute meaning to every part of the app.

A page or app that is semantically correct will be organised in a way that can be interpreted by a screen reader, a browser, a tool scraping for SEO information, an AI avatar, or any other device that can interpret HTML.

Only once we have established a consistent logic (the meaning and purpose of each part and the whole) should we consider its visual presentation.

HTML structure

An HTML page is made up of elements. Among the initial elements were p which stands for paragraph and div which is an all-purpose element used for grouping elements and layout. We will return to div later.

Have a read through the complete list of elements. These are native components that have been fully tested and are accessible. They are actively supported by all browsers.

Over time, patterns emerged in the solutions developers and designers used to solve common problems. One of these problems was navigation. To encourage consistency, and to simplify HTML, a set of landmark elements was introduced.

In addition to improving code quality, these elements provided native support for ARIA landmark roles. Roles help visitors using screen readers navigate web pages more easily. The intention was to make HTML 5 conform to more rigorous standards.

ARIA Landmarks

header

nav

main

article

section

aside

footer

form

Benefits of writing semantic HTML

Good markup benefits everyone. When developers and designers pay attention to good semantics - using HTML elements correctly - they can be confident their pages will be understood by visitors on different devices, including screen readers.

Benefits of semantic HTML:

Accessible by more people on different devices
Code that is easier to understand
Likely results in lighter file sizes which increases performance and reduces emissions
Good for SEO (search engines give more weight to keywords inside headings, etc.)
Interpretable in future devices and environments

Exercises

Note: Please install our accessibility schema extension for Chrome before you begin.

How to write a valid HTML page

The best way to learn semantic HTML is to write it.

Create a single page (index.html) that has a main, header, article, aside, h1, p, and a footer
Check that your HTML is valid (semantically correct) using a screen reader
Check that your HTML is valid using the chrome accessibility schema extension

Bad semantics is common but it's not too hard to avoid. There are tools you can use to check your pages. This is an example of bad semantics. You may come across similar code, but a more prevalent problem is code (semantic or not) buried in a cascade of divs. Any Substack page will do by way of illustration.

A brief introduction to the div element

div is semantically empty. It's value is as a wrapper for other elements in order to style them.

Let's say we want to align some text both vertically and horizontally, and place it on a blue background.

<div class="style-me">
            I like to be in the middle of things.
          </div>


            .style-me {
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: blue;
            }

The div element is a useful tool for visual presentation, but should not be overused. Deeply nested HTML is hard read for to humans and takes computers longer to parse and process.

Styling the page with CSS

We have created a simple page, and validated it. It makes sense. We can improve its visual representation with confidence.

A brief introduction to CSS Grids

We are going to use CSS Grids to alter the layout of the page. If you're not familiar with CSS, don't worry, we'll work through these examples together. We could start with something simpler, but realistic examples are more interesting.

If you need some help, take a look at these grid examples before you begin.

We're going to make some changes to the HTML:

Add an aside with the text 'sidebar' inside
Create a grid in CSS that puts the 'sidebar' on the left with a minimum width of 200px

Hint: Your CSS needs to refer to the aside and main landmarks.

The CSS Grid is ideal for creating layouts that have two work horizontally and vertically. They can also adjust to the available space.

Experiment by replicating these grid layouts.

A brief introduction to CSS Flex

CSS Grid provides control over overall page layout. CSS Flex (or Flexbox) provides control over parts of the page, either horizontally (rows) or vertically (columns).

We don't look at flex closely in this workshop, but if you want to learn more about flex, please see our flex examples.

Designing for the browser

The natural environment of web pages and apps is the browser and design is best served by leveraging what is innate.

Understanding CSS grid and flex properties is fundamental to designing flexible, responsive web layouts.

The role of AI in design

LLMs such as Claude and ChatGPT can check code. Alternatively, prompt them to generate the pages you need.

It's likely generative AI will play a significant role in web development. Since it requires a lot of energy, it's important we balance it against savings (including energy saved when human developers and designers are not involved).

We will look at the role of AI in more depth during the workshop on IA (Information Architecture) but, in the meantime, here is a thought/controversy-provoking article on AI and accessibility from Jakob Nielsen.

It is also possible to ask Claude to create a working page from an artefact. An artefact could be a wireframe, a detailed figma design, or, as in this case, a screen shot of an existing page.

Summary

In this workshop we used semantic HTML to build a simple page and CSS to style it. We learnt the importance of semantic HTML and why it is critical for accessibility.

Here is a semantic HTML checklist:

Use the appropriate HTML element
Check to see if there is a native HTML element before creating custom 'components'
Check your page is valid by using a screen reader and browser tools and extensions
Use CSS for visual presentation
Use appropriate CSS properties for layout and styling e.g. grid for 2-dimensional layouts and flex for 1-dimensional layouts.

How to resources

Supporting materials

A simple page with good structure:

Simple page structure

Examples of good and bad semantics from MDN's HTML: A good basis for accessibility

An example of good page structure from the W3C's WAI tutorial on writing, designing, and developing for accessibility.

Page Structure

HTML 5 and ARIA

ARIA Landmarks Example

Accessibility tools

Chrome extension accessibility schema from People and Code
WAVE browser extensions
A longer list of accessibility tools
An introduction to HTML from MDN. Part of its series on web development.

Resources for learning CSS

We recommend MDN for learning CSS.