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.
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:
- Mad Men
- True Detective
- Six Feet Under
- 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:
Not super difficult, right? Why not try experimenting with headings and lists in your next post?
Currently blogless? You’re a click away from sharing your story.
Create your blog at WordPress.com
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.
LikeLiked by 1 person
You’re welcome, bikerchick57! Always a pleasure to see you around The Daily Post.
LikeLiked by 1 person
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
LikeLike
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.
LikeLike
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 🙂
LikeLike
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.
LikeLiked by 1 person
These are the buttons that are available in WP-Admin (the classic editor) — they’re the same as in the new editor. There aren’t any heading buttons.
LikeLike
Not true. Here’s a screenshot:
(Okay, it’s a menu, not a button. Close enough. It’s with the buttons.)
LikeLiked by 1 person
Well Smack My Head as the kids say — I had COMPLETELY forgotten about the toggle toolbar option. Bravo, @bumblepuppies! I sit and stand corrected.
LikeLike
Good to know! Thanks! I happen to be one of those that likes more buttons and options 🙂
LikeLike
Thanks so much. I have wondered how to change the size of the headings. This will be very helpful!!!!
LikeLike
Glad you found the post useful, Karuna!
LikeLiked by 1 person
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.
LikeLike
Thanks. Nice article. Appreciate you for sharing this article.
LikeLike
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.
LikeLike
Brilliant! Always looking for new ways to improve the readability of my posts. Much appreciated. Nicole
LikeLike
Brilliant post, this will most certainly help me in the future! Thank you for posting!
LikeLike
Ok so maybe I won’t be scared to death to try some of this HTML stuff. Tomorrow. I have to go to sleep now.
LikeLike
Not so scary, eh? Glad to hear you’ll give it a go.
LikeLiked by 1 person
Thx very helpful
LikeLike
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?
LikeLike
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.
LikeLike
Thanks Krista – I’ll look forward to your posts
LikeLike
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.
LikeLike
LikeLike
Thank you for your reply. 🙂
LikeLike
Hey! I’m just beginning an IT course in college and it was our first lesson in HTML coding today. This is a timely post!
LikeLiked by 1 person
LikeLike
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.
LikeLike
Crystal clear.
LikeLike
Helpful 🙂
LikeLike
Love this! I am taking a web design class that teaches HTML and CSS. You did a wonderful job explaining headings and listings!
LikeLike
Thank you!
LikeLiked by 1 person
This was great, thank you 🙂
LikeLike
Thank You Very Much! I Had Longed For This For A Long Time! Thanks ! HTML here I Come!
LikeLike
Thanks for learning bit of information
LikeLiked by 1 person
I am always looking for ways to learn easy html codes. This is pretty cool, thanks!
LikeLike
You’re welcome! I’m glad you found the post useful.
LikeLike