HTML for Content Designers

February 2, 2021

HTML for Content Designers

“The web is for everyone” Tim Berners-Lee, Inventor of the Wide World Web


As a Content Designer

I need to know a little HTML 

so that I can make inclusive content

HTML definition

HTML (Hypertext markup language) is the code used by the Web to display content. 

You may also hear about CSS (cascading style sheets) which is how the HTML is presented (the look of the page). 

JS (JavaScript) allows developers to manipulate webpage content (for example by making things happen when a user clicks a button). 

Understanding HTML

With some basic HTML you will understand how your content will be delivered. Not everyone uses the web in the same way. Some people use screen readers, or they magnify the page. Looking at pages on a 27” monitor is different to using a mobile phone or smart watch. If you understand the limits of the code, you can design better content. If Alice is going to speak the content, they need to know what that content is. (Alice is the name I give to the team of voice assistants –  Alexa, Echo, Cortana, Siri, OK Google). 

Basic Content Design

Well designed content has headings, paragraphs, and bullet points. You might need images, blockquotes, or tables. 

As a content designer you don’t need to be able to write production quality HTML. You do need to know how to mark up a page. Markup means to choose the right tag for the content. 

Depending on the content management system you use, you may need to tidy up formatting from text that's been pasted in from a word processor. 

Heading 1

<h1>

This is the main heading of the page. It tells users what the page is about. 

There should normally only be one <h1> on a page. 

Some content management systems (CMS) have a separate field for the page heading.  

Headings 2 to 6

<h2> to <h6> 

These are the next level headings. They tell the story of the page. If the user just reads the headings, they will understand what the page is about, and find the section they want easily. 

Headings must be used in sequence, for example

<h2> 

  <h3>

  <h3>

<h2>

  <h3>

     <h4> 

Some content management systems (CMS) only allow <h2> and below in the text field. 

paragraph

<p>

The basic paragraph block. There is a space between paragraphs. 

Unordered list 

<ul>

Unordered lists 

  • have bullet points
  • don’t need a specific order to make sense
  • are useful for breaking up longer sentences

Ordered lists

<ol>

Ordered lists 

  1. Are numbered
  2. Need to be in a specific sequence
  3. Are useful for step by step instructions

Bold and italics

<strong> <em> NOT <bold> <i> 

If you use bold and italics (and you must test with users if you do) then take care that the HTML used is semantic. Semantic code says something about the content. 

So when a screen reader speaks the previous paragraph, the word “semantic” will be emphasised. This will only happen if the HTML is written with the HTML <strong> or <em>. <bold> and <i> look identical, but are not semantic, they do not say anything about the content, and will not be announced by a screen reader. 

Quotes

<blockquote>

The quotation at the top of this doc from Tim Berner-Lee is marked up as <blockquote>. It’s not possible to create a real blockquote in Google Docs.  

Link (hypertext reference)

<a href=”http://www.example.com”>

The World Wide Web would be nothing without links. It would be nice if the HTML was <link>, but that’s another thing. <a> means anchor, and href is a hypertext reference. 

So <a href> means “go to the place where this thing is anchored”.

If you have any control over the design of links, please make sure they are blue and underlined. You users will thank you.

Button

<button>

Buttons are different to link. Buttons do something. Links go somewhere.

When you log in to a page, that’s a button. When you click a menu item, that takes you to another page, so that’s a link.  

Call-to-action (CTA) elements can be either a button or a link, depending what happens. It might look similar to a button, but if it takes you to a sign-up page, then it should be an <a href>. If it’s a “download” CTA then it must be a button. 

Alternative text

<img src=”goose.jpg” alt=”An elegant china goose, about 1 metre tall.”>

Images must have a description in words in case the image does not load.  It helps bots and screen readers to know what the image is. 

To write alt text, imagine what you would say when reading the page to someone over the phone, without mentioning that there's an image on the page.

If the image is purely decorative use Alt = “” and the bots will ignore the image. As a content designer, you’d have to ask why it’s there!

Tables, with rows, headers, and data

A simple table will have a header row, maybe a header column and the data. Don’t worry about the code too much, just make sure that it’s clear in your table what is what. 

<table>

<tr>

<th>

<td>

example of a simple table
Simple table