Ian Marshall

Getting Started with HTML and CSS

Lesson 6: Listen to the Content

From lesson 3: The HTML Document we know all of your content must go in the <body>. But what content should go in a <header> or <main> or <footer>? Well, it's up to you. Sometimes, however, your content will tell you where it belongs if you hold it up to your ear.



Images free from Pixabay

Mr. Scissorhands has hired you to make his website with the above content. First, we need to determine what we might consider to be a "headline," as well as their order of importance compared to one another.

Let's consider his name to be the primary headline, his job title to be a secondary headline, his expertise as tertiary headlines, and his contact as a quaternary headline. That gives us the following HTML:



This assignment of headline importance is open to debate. Some may consider the contact to be of higher importance than the expertise, for example. There aren't any truly right answers other than what you "hear" from the content itself. Nevertheless, you do have to make a decision and just go with it.

Next, let's deal with the lists. The first list of hedge types seems like an ordinary list. If we expect bullet points instead of line numbers we should use an unordered list and list items, like so:



The second list, however, is not ordinary. Each item is a pairing of an image of topiary with text, which sounds a lot like an image gallery. For these items, it makes sense to use <figure> elements with nested <img> and <figcaption> elements:



Now all content is in an appropriate HTML element. But we still haven't divided these elements into larger containers. That's not always necessary; it depends on the content, of course. But here, if you hold the content up to your ear, more containers are being called for.



Are we done? Maybe. The <main> content looks kind of long. (For real websites, the <main> content is often lots longer, but bear with me.) We may, should we want, break up the <main> content into identifiable sections:



We don't want to go too crazy with nesting elements, and these <section> containers aren't strictly necessary. Nesting too deeply will slow down the page load time and possibly release the Balrog. So keep your HTML as shallow as possible. What we have above is a perfectly acceptable depth.

The <section> elements each have a new attribute, class. This is a user-defined name, one that can semantically differentiate one section from another. The values I provided, hedge_species, gallery, and added_benefits are completely made up and have no real meaning other than to inform human readers. class attributes can be used with any HTML element, but use them sparingly. Excessive class attributes or attribute values will clutter the HTML and hamper readability. Keep your HTML as simple as possible.

We've already discussed the importance of keeping your HTML semantic, for readability purposes—both by humans and by machines. But it's time we put these ideas into a best-practices box:

Keep your HTML simple, shallow, and semantic.

Once the HTML is well formatted, then you can start adding the CSS. Our content currently looks like this:

Images free from Pixabay

For your own sites, you'll have to find your own images. The above images came free from Pixabay, one of many free resources on the Internet. However, Pixabay, like many other online resources, doesn't allow image hotlinking, or referencing their image on your site just by using the URL address in an <img> src attribute. You may have to download the image first. We'll discuss images in more depth in a more advanced course.

If we put all the content into our HTML page template and add a little CSS, this could look much better.

The HTML and CSS code for the above looks like this:



Reminder

These are some of the commonly used semantic containers available.

<article>independent, self-contained content that could be distributed or published separately
<aside>dependent content removed from the main content such as a side bar
<figcaption>caption, usually text, for a figure
<figure>a container for a diagram, illustration, or other content needing a caption
<footer>supplementary content after the main content
<header>introductory content before the main content
<main>one container for the page's main content
<nav>container for navigation elements such as links
<section>dependent, but thematic grouping of content, usually with a headline
Remember to think of HTML tags as semantic markup,
not as providing default styling.
Styling is done with CSS, not with HTML.

And Now for Something Completely Different…

Exercise 6.01: Monty Python

Instructions:

Using your code editor, create a new document called monty_python.html. Below is some raw content that is waiting for a website. Your job is to build a simple site that displays the content in a way you feel is appropriate and semantically correct. Start with the HTML only, without any thought to design at all. Only when that's complete, try adding some CSS. Find a simple color scheme, then add more styling as you are able.

Notes:

  1. You may copy and paste the below text and image URL addresses.
  2. There are no right or wrong answers for this assignment.
  3. Consider drawing out possible web page layouts on paper.
  4. It is almost certain what you come up with will be unique. That's why design, including web design, is an art form.
monty_python.html


    

Exercise 6.02: A New Monty Python Article

Instructions:

Using your code editor, duplicate your monty_python.html document and call it monty_python_2.html. The only change to the original will be the addition of a new article, from the content below.

Do not change the CSS! You should be able to add this new content to the HTML from the previous exercise without needing to alter any styling.

monty_python_2.html


    

Think of this addition as new content provided by a client. Maybe Mr. Nudge writes a new blog post every month and it's your job to continuously add content and keep the site up to date.

Review

Well formatted HTML is both human- and machine-readable, and facilitates long-term site maintenance. With easily recognizable patterns, like identifying and separating <article> and <nav> elements, for instance, it's easy to add or remove content at a later time.

Remember that building a site is not usually a one-time effort. Clients will want changes over time. And the elapsed time may be measured in months or even years. Will you remember what decisions you made when you first built the site? Not likely. Do yourself a favor—or whomever the new webmaster is—and keep the HTML organizational patterns easily identifiable. Also remember:

Keep your HTML simple, shallow, and semantic.