Tags and attributes

Why this matters

A handful of elements make up most of the content on the web: headings, paragraphs, lists, links and images. Using them correctly gives your page a clear outline that people can skim, screen readers can navigate and search engines can understand. Attributes add the extra information those elements need to work, such as where a link goes or what an image shows.

Attributes in one minute

An attributeExtra information in an opening tag, written as name="value", such as href on a link or alt on an image. lives inside the opening tag as name="value":

<a href="https://developer.mozilla.org/" title="MDN Web Docs">MDN</a>

• Always quote values. Double quotes are the convention.
• Some attributes work on any element: id (a unique name on the page), class (a reusable label for CSS) and lang.
• Others belong to specific elements: href on links, src and alt on images.
• Boolean attributes are true when present: <input required>.

Headings: the outline of the page

HTML has six heading levels, <h1> to <h6>. Think of them as a table of contents:

<h1>Learn to Cook</h1>
  <h2>Breakfast</h2>
    <h3>Pancakes</h3>
    <h3>Omelettes</h3>
  <h2>Dinner</h2>

• Use one <h1> per page for its main topic.
• Go down one level at a time. Do not jump from <h2> to <h4> because <h4> looks the right size.
• Screen reader users often jump from heading to heading to skim a page, so the outline really is navigation.

Paragraphs and inline text

Wrap running text in <p>. Inside text, <strong> marks strong importance and <em> marks stress emphasis. Both carry meaning; if you only want a visual effect, use CSS instead. Blank lines and extra spaces in your source are collapsed into a single space, so use separate <p> elements, not line breaks, for separate paragraphs.

Lists

• <ul> is an unorderedDescribes a ul list, used when the order of the items does not matter. list, where order does not matter (ingredients, features).
• <ol> is an orderedDescribes an ol list, used when the order of the items matters, such as steps or rankings. list, where order does matter (steps, rankings).
• Each item is an <li>, and <li> must be a direct child of <ul> or <ol>.

<ol>
  <li>Preheat the oven.</li>
  <li>Mix the batter.</li>
  <li>Bake for 20 minutes.</li>
</ol>

Navigation menus are usually a <ul> of links, because a menu is a list of choices.

Links

The anchor element <a> with an href makes a link:

<a href="https://www.w3.org/">The W3C</a>          <!-- absolute URL: another site -->
<a href="about.html">About me</a>                   <!-- relative URL: a file next to this one -->
<a href="#contact">Jump to contact</a>              <!-- fragment: an id on this page -->
<a href="mailto:hello@example.com">Email me</a>     <!-- opens the mail app -->

The text inside the link should make sense on its own. Screen reader users can list every link on a page, and a list of ten "click here" links tells them nothing. Write "Download the course syllabus", not "click here".

Images

<img src="images/team.jpg" alt="Five club members at the finish line, arms raised" width="800" height="533">

• src is the image's URL, relative or absolute.
• alt is the text alternative, read aloud by screen readers and shown if the image fails to load. Describe what matters about the image in context. For a purely decorative image, use an empty alt="" so screen readers skip it; never leave alt out altogether.
• width and height (in pixels, without units) let the browser reserve space before the image loads, so the text does not jump around.

Worked example: from a wall of text to structure

Before:

<div>Opening hours</div>
Monday to Friday 9 to 5. Saturday 10 to 2. Closed Sunday.

After:

<h2>Opening hours</h2>
<ul>
  <li>Monday to Friday: 9am to 5pm</li>
  <li>Saturday: 10am to 2pm</li>
  <li>Sunday: closed</li>
</ul>

The second version looks better even with no CSS, a screen reader announces "heading level 2" and "list, 3 items", and you now have elements you can style precisely.

Common mistakes

• Using <div> for everything. A <div> has no meaning. Reach for a meaningful element first.
• Skipping heading levels or using several <h1> elements for visual size.
• Missing or useless alt text, like alt="image" or alt="photo.jpg".
• Vague link text such as "here", "more" or "link".
• Putting <li> outside a list, or a <p> inside another <p> (paragraphs cannot nest).

Quick recap

• Attributes are name="value" pairs in the opening tag.
• One <h1>, then <h2>, <h3> in order: the headings are the page outline.
• <ul> when order does not matter, <ol> when it does, <li> for each item.
• Links need an href and descriptive text; images need src, meaningful alt, and ideally width and height.

Try it

Open the Do tab and turn a page made of loose text and <div> elements into a structured page with headings, a list, a link and an accessible image.