CSS For Designers

HTML – Preview

HTML is the web

HTML is the fundamental language of the web. Strip away the other front or backend technologies and we’re left with plain text documents structured with HTML.

That might sound abstract, but thinking of web pages as documents is incredibly useful. That’s true whether you’re coding websites from the ground up, using a framework to kick things off or customising a template.

Structure > visual clues

Website users fall into one of the following three categories:

  1. Humans using a browser
  2. Humans browsing with assistive technologies (e.g. screen readers)
  3. Bots scanning the web (e.g. search engines)

Of these, only the first can infer any visual clues from a web page. Making sure that our documents make sense through their structure enables all of these groups to digest the information in our websites.

In other words, it’s good for accessibility and for your SEO.

Defining ‘good’

Page structures will vary, but a good structure will always make sense. For instance, heading tags (<h1>, <h2>, etc) should flow in a logical manner.

Let’s think about these two examples:

Example #1

See the Pen Boxes – Example #1 by Dave Smyth (@websmyth) on CodePen.

Example #2

See the Pen Boxes – Example #1 by Dave Smyth (@websmyth) on CodePen.

Which of these document structures makes more sense?

All together now: Number 1!

And why is that? Because the headings follow a logical order: it doesn’t jump from H1 to H3 etc.

Yet, the web is filled with examples of Example #2 and page builders have a lot to answer for:

In content management systems, it’s common for headings to be styled at a high level, and users often can’t change the heading styles. They’ll naturally select the style of type that looks the best even though it doesn’t make sense from a structural point of view.

It’s all semantics

This brings us on to the topic of semantic HTML. HTML5 introduced a range of semantic elements that clearly describe what they contain: this is useful both for developers and the browser.

Grouping elements

Grouping elements are incredibly useful as each has a defined purpose. For instance, <main> can only be used once on a page whereas <header> and <footer> could be used multiple times. If you’re not familiar with those, I’d highly recommend checking them out.

A classic example is navigation. Before HTML5 came along, we’d mark up our menu with something like <div class="nav">. Now, that can be replaced with <nav>.

Yet, we still see <div class="nav"> all over the web. Criticising this might seem trivial, but there are real benefits to using the right markup. For instance, some assistive technologies will allow a user to navigate straight to, or skip, the navigation.

Semantic HTML isn’t limited to sections of code. Our headings example (above) is a good demonstration of how semantics are often ignored.

Another example would be how <strong> or <em> tags are used to make text it bold or italic. Often the text is important or should be emphasised, but sometimes these tags are used purely for the visual effect.

In summary: use HTML tags that give the right information about the content, not just because it produces the right visual result. Try to disassociate how your HTML looks from its purpose as much as possible.

If you can focus on writing HTML with a logical structure, you’ll also produce web pages that are accessible to the widest range of users.

Document hierarchy

The structure of our documents isn’t just useful for users and search engines. Understanding the relationship between different elements on the page can be useful when we’re trying to style a page.

This is never truer than when we’re styling a page and have no control over the HTML it contains. MySpace users might remember hacking away at their pages, but those same skills are useful if you’re trying to alter the appearance of a WordPress or Squarespace template.

CSS gives us lots of ways to target elements in a page and we’ll get to that in more detail later. For now, it’s useful to start describing the relationship between elements in familial terms.

In the example below, we could say that the <h1> and <p> elements are children of <body>, or that <body> is the parent of <h1> and <p>. We could also describe <h1> and <p> as siblings.

<body>
    <h1>Title</h1>
    <p>A paragraph</p>
    <p>Another paragraph</p>
</body>

Summary

HTML is often written off as being easy but sensibly written markup has value. Later in this course, we’ll dive into how we can use our HTML, and our knowledge of its hierarchy, to target elements with CSS.

If some of these concepts are new to you, you might want to return to these examples after we’ve covered a few of the CSS basics.

Found this useful?

Early access to the course is available now with 30% off (£99 instead of £149).

Get Access