Most of the HTML content designers need

A little code can go a long way in content design. Knowing some HTML will make you a better content person. And this the stuff that will probably help you the most, most of the time.

If you are a content designer, you design in HTML. Use it to make sure text looks consistent. You can also make sure that people using assistive technology like screen readers can navigate and use your:

• headings
• lists
• links

The code

This is it.

<h1>Cheese</h1>
<p>I love cheese. Most people buy cheese, but you can also make your own</p>
<p>There are 2 kinds:</p>
<ul>
  <li>hard cheese</li>
  <li>soft cheese</li>
</ul>
<h2>Hard cheese</h2>
<p>Parmesan is a hard cheese</p>
<h2>Soft cheese</h2>
<p>Cottage cheese is a soft cheese. It is one of the easiest to make yourself</p>
<p>
  <a href="https://en.wikipedia.org/wiki/Cottage_cheese">Cottage Cheese (Wikipedia)</a>
</p>

In your browser, it will look like this:

Step by step

It’s a document about cheese. This is the level 1 heading at the top. It has:

• an opening <h1> tag
• a closing </h1> tag

<h1>Cheese</h1>

Then you’ll come to your first paragraph. This works the same way, but the tag name is <p> for ‘paragraph’. It opens and closes around the text.

<p>I love cheese. Most people buy cheese, but you can also make your own</p>

If you skip ahead, you’ll see it’s the same for the level 2 subheadings for:

• hard cheese
• soft cheese

<h2>Hard cheese</h2>

Then things get a bit more involved. In HTML, there are lists. There are two kinds:

• ordered lists with numbers <ol>
• unordered lists, usually with bullet points <ul>

We’re using an unordered bulleted list <ul>.

Between the opening <ul> and closing </ul> tags for the list, there are tags for bullet points. These are called list items, <li>, in HTML.

<ul>
  <li>hard cheese</li>
  <li>soft cheese</li>
</ul>

That tags inside other tags thing is interesting, isn’t it? Links work in the same way! In this example, the link is in a paragraph <p> and the link sits inside it <a>.

I’ve indented the tags to make it easier to see.

<p>
  <a href="https://en.wikipedia.org/wiki/Cottage_cheese">Cottage Cheese (Wikipedia)
  </a>
</p>

The place the link goes, the URL, is in the opening <a> tag with some special text either side of it. This is called an attribute. How they work isn’t important when you’re starting out. Just copy and paste for now.

Mark-up, not code?

Someone might tell you this is mark-up rather than code. Which is great, because toxic gatekeeping like this means that you can safely ignore them.