Coding for Bloggers and Other Non-Coders: Part 2

Welcome to part two of our coding series! This section is all about how to format your webpage to make it easy to read. Formatting your webpage is something that your CMS most likely does mostly for you through a “what you see is what you get” editor, but this will show you exactly what your CMS is doing behind-the-scenes.

For example, let’s say you want a sentence to be a header or you want to have a list of items. You might press the “header” or “bulleted list” icon in your CMS, but doing that actually writes code into your post. This is that code.

So let’s get right to business and start with headers.

Note: There are a lot of spaces within the < and > in this post. This is just so that the code will show up in the blog post, instead of our CMS applying that code to the post. When you’re inserting your own H2 tag, for example, you would take out the spaces in < h2 > and < /h2 >.

Header Tags

There are 6 different headers tags in the HTML language. They range from < h1 > to < h6 > ranging in different sizes. < h1 > is the largest tag and is used for your page or blog post title. The tag’s biggest advantage is that anything you put in any header tag will be viewed as more important information by your browser, helping with SEO.

The other header tags are used in generally the same way. < h2 > tags would be used to break up your post into different sections, making your post easier to read or skim. If you want one sentence to stand out more than another in a paragraph, you would normally use an < h3 > tag. The higher the number, the smaller the tag will show up on your post, so use them accordingly.

List Tags

Lists are important to most blog posts that people write today. Having lists in your posts will make them easier to read and is a great way to present information to your reader. That’s where the two different types of list tags come in: ordered and unordered lists. The two different list types each have their own use, as well as a different tag that goes along with them.

Ordered lists, or < ol >, are basically numbered lists. They’re what you would use if you’re ranking the items of your list, or they have a certain order they need to be in. These lists will have the list items placed into a list with numbers next to each entry. You would use an ordered list , < ol >, when you’re showing the steps of a process or have a top 10 (or whatever number) list, for example.

The other type of list in HTML are the unordered lists, < ul >. These are lists with bullet points (or several other variances of the bullet point) next to them and they go in no particular order. For example, these lists would be used if you were listing items or statistics, or summarizing the key takeaways at the beginning or end of a post.

The last thing you need to know about lists is how to add items to your list. To put an item in your list, you use the < li > tag, which stands for list item.

To start a list, you identify what kind of list you’ll be making by typing < ol > or < ul >. Then for every item you want to put in the list, you put < li > list item example < /li > between your opening and closing list type tag.

An example of an ordered list would be:

< ol >

< li > first item < /li >

< li > next item < /li >

…and so on

< /ol >

Text Formatting Tags

Finally, we have the tags that do all the normal text formatting stuff that usually you just highlight the word and hit the corresponding button for. These include bold, underline, and italic. These are easy enough to do, all you need to do is decide what you want formatted and put that opening and closing tag before and after whatever group of words you want formatted. The tags for the basic formats are simple enough; < b > for bold, < u > for underline, and < i > or < em > for italic.

Using these formatting tools your posts will begin to improve readability and keep readers coming back. If you use headers, lists, and other formatting tools your posts, not only will they be easier to read, they’ll also help your site’s SEO. As a result, you’ll have a larger audience and be able to expand your brand.

Next in our series, we’ll look at how to bring everything that we’ve discussed in parts 1 and 2 together in an example of a full HTML post.

Coding for Bloggers and Other Non-Coders: Part 2