Back To Basics: Lists and Headers

February 27, 2014

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series here.

Over the last few weeks, we've been showing you some of the building blocks of HTML. Today, we're going to look into lists and headers.

Lists can be used for all kinds of things - what books you're reading; your favorite movies; where you want to go on vacation. It's a great way to make information pop and be easily readable at the same time. You can use either an ordered or an unordered list.

Ordered lists are exactly what they sound like - they're ordered by number. This is great if there are steps you want to lay out for your readers, songs you want to rank from best to worst, etc.

Ordered lists begin with the <ol> tag. Then each item within the list starts with a list item tag - <li> - then the item and a closing list item tag - </li>. Once you've entered all of your items, you end with a closing </ol> tag. Here's an example of my favorite movies, ranked in order:

<ol>
<li>Singin' in the Rain</li>
<li>Jaws</li>
<li>Sense and Sensibility</li>
<li>The Blues Brothers</li>
</ol>

And this is what it would look like when rendered on your blog:

Singin' in the Rain
Jaws
Sense and Sensibility
The Blues Brothers

Unordered lists are exactly the same except they use the <ul> tags instead of the <ol> tags. Here's an example of how an unordered list of some of the recent movies I've seen looks:

<ul>
<li>My Neighbor Totoro</li>
<li>Nebraska</li>
<li>Big Bad Wolves</li>
<li>Scott Pilgrim vs. the World</li>
</ul>

And this is how it looks when rendered on your blog:

My Neighbor Totoro
Nebraska
Bg Bad Wolves
Scott Pilgrim vs. the World

Now let's talk about header tags.

While some people use header tags to make text bold or to stand out, this isn't actually how they should be used. Header tags should not be used for style purposes but rather to help search engines index the structure and content of your blog. The headers use the <h1> through <h6> tags.

Typepad uses the first three of these - <h1> though <h3> in its structure. Let's see where each one is used.

The <h1> tag is used in the banner header for your blog's name. Your blog's name is the first and most import structural element. It looks like this when you view your blog's source code:

<h1 id="banner-header"><a href="http://everything.typepad.com/" accesskey="1">Everything Typepad</a></h1>

The <h2> tag is used in three separate locations within your blog's structure. These are for the blog's description, the date headers on your posts, and the sidebar headers for Typelists, modules like Recent Comments, search, and more.

Here's some examples of the <h2> tag in use:

<h2 id="banner-description">This is my blog's description.</h2>

<h2>Recent Comments</h2>

Finally, there's the <h3> tag that's used for your post titles. Here's a typical example:

<h3><a href="http://kymberlie6.typepad.com/comment_testing/2011/11/blockquote-with-centered-block-image-and-text.html">Blockquote with Centered Block Image and Text</a></h3>

As you can see, while header tags are used in various ways on your blog, all these tags follow the same structure as every other HTML tag. If there's an opening tag - like <h1> - you must have the corresponding closing tag - </h1> - to complete the tag.

You can read more about header tags and how to use them for SEO purposes here.

We hope you found this useful! HTML is an exciting language and we're happy to help you learn more about it.

12:55 PM in Tips and Tricks | Permalink | Comments (2)