Jul 23, 2015 / Beginner

HTML Wizardry: Headings and Lists

A primer on creating HTML headings and lists.

Tim Berners-Lee, often referred to as the father of the internet, first used HTML back in the 80s. The first public mention of HTML was in 1991.

As writers and bloggers we strive to create meaning, to attempt to share the ideas we have with others. HyperText Markup Language, or HTML for short, is the standard language used to create the pages we see on the web. In addition to creating web pages, HTML offers what’s known as a semantic structure — including headings, paragraphs, lists, links, quotes, and more — and you can use these elements to ascribe meaning to different parts of your posts.

Why might you want to learn and use a bit of HTML? Coding is a fantastic skill to have and building your coding skills will improve not only the look, but the structure of what you write — making it easier for others to parse and absorb.

HTML might seem daunting at first, though with a little practice you’ll get the hang of it. Making it easier for your readers to understand your ideas is well worth the effort.

Head-first into headings

If you want to learn more about HTML and practice a bit — W3Schools offers free, self-paced tutorials on HTML and more.

We’ve all experienced this: the dreaded wall of text — a full screen of words and paragraphs that seems endless. One glance at that wall and your mind wanders to what’s for dinner, whether your Facebook feed has a new post — anything not to have to wade through all that text. Headings to the rescue!

Note, to work with HTML, you need to be in the Text Editor. Here’s a bit of information on how to toggle between the Text and Visual editors.

HTML headings, in addition to breaking up passages of text, are fantastic at denoting a hierarchy within a post. There are six levels of headings. One is most important, while six is least important. To create a heading, you surround your text with heading tags, like so: 

<H1>This is a heading.</H1>
<H2>This is a heading.</H2>
<H3>This is a heading.</H3>

Here are these three headings, as rendered by the browser. Notice how the sizes get smaller, denoting lessening importance:

This is a heading.

This is a heading.

This is a heading.

Note that every theme styles headings in their own way. While your headings won’t look exactly the same, they will have a clear hierarchy.

Next on our list, lists!

In case you missed it, Ben recently shared a great piece on emphasizing text in italics and bold using HTML.

Who among you are not-so-secret list lovers? They’re great for setting out important ideas in bite-size, easy-to-read chunks. While there is a lot we could cover with lists, we’ll start at the very beginning. HTML gives us two main types of lists: the traditional bulleted (“unordered”) list and a numbered (“ordered”) list.

Unordered lists

The markup for unordered lists works like so: the <ul> tag opens the list. Each list item is surrounded by <li> </li> tags. The </ul> is the tag that closes the list. 

<ul>
<li>Mad Men</li>
<li>True Detective</li>
<li>Six Feet Under</li>
<li>House of Cards</li>
</ul>

Here’s what that code looks like when viewed in a web browser: a neat list, complete with spandy bullets:

  • Mad Men
  • True Detective
  • Six Feet Under
  • House of Cards

Ordered lists

The markup for ordered lists works like so: the <ol> tag opens the list. Each list item is surrounded by <li> </li> tags. The </ol> is the tag that closes the list:

<ol>
<li>Mad Men</li>
<li>True Detective</li>
<li>Six Feet Under</li>
<li>House of Cards</li>
</ol>

The ordered list numbers each item starting with one. Here’s how the nice, tidy, ordered list looks in a web browser:

  1. Mad Men
  2. True Detective
  3. Six Feet Under
  4. House of Cards

If you prefer the classic editor, these handy buttons also reside at the top of the post-editing screen.

You might be thinking: HTML lists seem cool, but that’s a lot of typing. We’ve got you covered there — check above your post-editing screen in the HTML view, and you’ll see handy buttons to create unordered and ordered lists and their list items:

calypsolists

Not super difficult, right? Why not try experimenting with headings and lists in your next post?

Show Comments

38 Comments

Comments are closed.

Close Comments

Comments

  1. Thanks for the HTML class, Krista. I may have to give “headings” a go in a future post. I’ve tried them before in the visual editor and not always impressed by how they look. It could be I’m simply not taking the time to work with them.

    Liked by 1 person

  2. I’ve used headings for breaking up the content into sections but I only just now started doing it. I like the idea of using them for funny subtitles too.

    I do wish there was a dedicated button for headings like there is for lists though. For convenience. Unless I am just missing it which is very possible :/

    Like

    1. Hi Lisa,

      You’re right, there isn’t a dedicated set of buttons for headings, though unlike lists, they’re a little less work to add to a post. Also, unless you’re publishing something that’s very long, you may only have a couple of headings per post.

      Like

      1. That’s true. It isn’t a big deal, it would just be easy to hit a button and the html magic happens all on it’s own 🙂

        Like

    2. Go to your stats page and click on “WP Admin” on the left. Then, click on “Posts” in the left sidebar and then “New Post.” This will take you to the old post editor. Until 12-15 months ago, this was where we all composed posts and it has the header buttons you seek. It’s still available for use.

      If I’m not mistaken, WordPress eliminated a lot of buttons from its main editor because new bloggers (in particular) often got a bit confused at the sight of so many.

      Liked by 1 person

      3. Well Smack My Head as the kids say — I had COMPLETELY forgotten about the toggle toolbar option. Bravo, @bumblepuppies! I sit and stand corrected.

        Like

  4. I’ve used a bit of HTML on the side-bar (using the text widget) and it’s really satisfying when I get it right (after numerous attempts). I’m still a complete novice though so I’ll be checking out the tutorials. I definitely think some of my posts would look better with headings but I haven’t been brave enough to use html in the posts themselves yet.

    Like

  6. Thanks for this. I’ve haven’t been up to trying to learn any of this, but now the fact of needed to create an independent WordPress.org Website & blog has me interested it testing the water. Thanks for writing and sharing this.

    Like

  7. Brilliant! Always looking for new ways to improve the readability of my posts. Much appreciated. Nicole

    Like

  8. Brilliant post, this will most certainly help me in the future! Thank you for posting!

    Like

  11. I hardly ever use HTML and I’d love to learn more. Tips like this are great but a HTML101 course would be even better! Pretty please?

    Like

    1. We don’t have a plan for an HTML 101 course at the moment, though I am going to cover new HTML material in future instalments of this series.

      Like

  12. Thanks for the great info and link. I have a question and don’t know how else to contact WordPress. 🙂 When someone ‘likes’ or comments on a post I take the time to go back and visit their site and try to return the favor. Is there anyway that the list with their three top posts could include one link to their home page? Thank you for the consideration.

    Like

    1. Is there anyway that the list with their three top posts could include one link to their home page? Thank you for the consideration.

      Thanks for the suggestion. I’m afraid this isn’t something we have planned — the top three posts are selected automatically via their stats and so adding the homepage to this list would break the intent of the feature.

      Like

  14. We’ve all experienced this: the dreaded wall of text — a full screen of words and paragraphs that seems endless.

    You mean like a book? Doesn’t bother me.

    Like

  15. Different themes render lists and headings differently, I think – so be sure to check your post with the ‘Preview Changes’ button to see your post the way your readers will see it.

    Like