Close
Close

Essential HTML for Bloggers Part 1

This guest post is by Matt Setter of MaltBlue.com.

In the modern-world of blogging, there are so many blogging platforms to choose from. From the venerable WordPress, TypePad and Drupal to other great tools, such as Habari, Typo3 and CushyCMS amongst others. All of these make building a professional and stunning web presence, rather trivial—almost something so simple that our grandmothers and fathers could do it.

HTML5 logo

Image courtesy of the W3C

With all the ease of use that these tools afford us, how many of us still know what the underlying HTML looks like, that these tools, with their assortment of visual (wysiwyg) editors build for us? There was a time when you were considered a true web professional when you wrote all the HTML by hand.

To be fair, editors allow us to write quicker and likely more efficiently than we could if we were writing both the posts and the HTML code around them. They allow us to focus on what we’re good at, not the platform on which that knowledge rests.

From time to time, as capable as these editors are, they may either not be enough or we may simply want to know more and be more independent. We may want to know what’s going on underneath so that we’re not so reliant on them should something go wrong.

So in this two-part series, using the WordPress visual editor, I’m going to take you through a HTML for Bloggers Introductory Course. If you’re an aficionado on HTML, then this is likely not for you. If you’d like a refresher, are curious about what the code looks like that you’re producing in each of your posts, or just want to know how to go beyond the limitations of the editors you use, then this post is for you.

In this post, you’re going to learn five key, fundamental, aspects of HTML. These are:

  • What is a tag?
  • Formatting
  • Alignment
  • Lists.

Tomorrow we’ll add one more important aspect:

  • Links.

By the end of the series, you’ll know what’s happening when you click on a number of the buttons in the post editor and be able to change the HTML, should you want or need to do so.

Though I’m referring to it as a course, don’t worry, there’s no test at the end. If there were one, it would be based purely on how more empowered you’ll feel through having a greater hands-on knowledge of HTML.

HTML foundations

Tag: something used for identification or location—merriam-webster.

Before we get started, I want to give you a rapid overview of how HTML works. If you’ve not worked directly with it before, it’s based around the concept of tags or elements. From hereon in I’ll refer to them only as tags.

Tags give documents and parts of documents special meaning. Web browsers, such as Chrome, Firefox, Internet Explorer and Opera know how to interpret that meaning and display the appropriate page, for your viewing pleasure.

Have a look at the following, very basic, HTML document:

<html>

<head>

<title>The Page Title</title>

</head>

<body>

<h1>The Main Page Title</h1>

<p>A paragraph of text</p>

</body>

</html>

This is likely the most simple, yet still meaningful, HTML page that could ever be produced. You can see that the page begins and ends with the word html surrounded in opening and closing angle brackets, < and > and that the closing one has a forward slash,  /, in it. Within that, we then see two further sections, one is called head and the other body.

In head, we see a section wrapped in title and in the body we see two sections, h1 and p. It will work as follows:

  • The text inside the tags and will be what you see in the title bar of your browser.
  • The text in side <code>

    and

    will be the main heading on the page, likely in very large font and bolded.

  • The text insideandwill be the first paragraph that you’ll read on the page.

The image below shows what it would look like if we were viewing it in Mozilla Firefox.

Viewing the page in Firefox

So as you can see, when you think about it, HTML really is nothing more than a document that you would write in say, Microsoft Word, Open Office or Pages for Mac, but with some simple encapsulation around sections of the text to give it special meaning. The catch at times is knowing which element or tag to use and when.

I hope you can see that it’s pretty straightforward. With that, login to your WordPress blog and open a fresh new post, ready to play with, as in the image below.

A new post template

Headers and basic formatting

Right after links in order of importance, comes headers and basic formatting. This includes: the key headers, bold, italics, strikethroughs, and quotes.

Headers

As we all know, for documents to be searched and ranked most effectively in Google, they have to be semantically correct. In short, that means they have to use headers in the right way and use formatting where appropriate. The largest header should contain the core theme or point of the page and the increasingly smaller headers should be for sub-points of that.

Say we’re writing an article on the U.S. election. Well the main theme would be the election itself and we’d likely have two key sub-themes, being Democrats and Republicans. Have a look at the sample I’ve created below:

Header example

You can see that I have the main heading, US Election, with the headers for Republics and Democrats the next level down, with the content for each section, dummy text, in normal text with no special formatting. Let’s look at the HTML that’s been generated behind the scenes by changing to the HTML view. The HTML looks like this:

<h1>US Election</h1>

<h2>Republicans</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam felis,

vulputate et facilisis sit amet, aliquam a lacus. Vestibulum nec mi ac

augue luctus scelerisque ut a ante. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

<h2>Democrats</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam felis,

vulputate et facilisis sit amet, aliquam a lacus. Vestibulum nec mi ac

augue luctus scelerisque ut a ante. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

You can see that the main heading is wrapped in a H1 tag and the two sub-headings are wrapped in H2 tags. H1 is the primary and most important and H2 - H6 are decreasingly important. Now let’s say we want to mention the recent speech by Bill Clinton to the Democratic Convention. Have a look in the section below where I’ve added a H3 and H4 header mentioning just that.

<h2>Democrats</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam felis,

vulputate et facilisis sit amet, aliquam a lacus. Vestibulum nec mi ac

augue luctus scelerisque ut a ante. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

<H3>Democratic Convention</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam felis,

vulputate et facilisis sit amet, aliquam a lacus. Vestibulum nec mi ac

augue luctus scelerisque ut a ante. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

<H4>Former President Bill Clinton</h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam felis,

vulputate et facilisis sit amet, aliquam a lacus. Vestibulum nec mi ac

augue luctus scelerisque ut a ante. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

You can see from the above text that it’s pretty simple indeed. You could, alternatively, have done this using the Visual editor by selecting the respective text and choosing Heading 3 or Heading 4.

Basic formatting

Bold

Now let’s say that we were talking about Obama and wanted to draw attention to his name by doing some simple formatting, say bolding it. Well, in the visual editor, you’d highlight the text and then click B. But let’s look at how we’d do it in the HTML editor.

Change over to it, and in some text, or select some existing text, select it, then surround it with the tags <strong></strong> and , such as in the example below:

augue luctus scelerisque ut a ante. <b>Vestibulum ante ipsum primis in</b>

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

After you’ve done that, change back to the visual editor and you should seem output similar to the image below.

Bold text

Italics and strikethroughs

What if we’re not wanting to bold text, but to either italicise it, say for a list of important items, or we want to strike through (strike/cross out) and item, emphasising a correction in our text. As you may well have gathered, they’re as simple as all the previous items.

The italics tag is <em></em> and the strikethrough is <del></del>. Let’s say that we have a long list of items, separated by commas, such as towns in New Zealand. And let’s say that we’re highlighting them so they’ll stand out to our reader. In our visual editor, we have the towns: Christchurch, Aukland, Invercargill and Taupo. But what we don’t want to do is italicise either the commas themselves or the word ‘and’. Add the list above in the Visual editor then change to the HTML editor.

All you need to do is to wrap each of the town names in <em></em> and as below and they’re emphasised.

<i>Christchurch</i>, <i>Aukland</i>, <i>Invercargill</i> and <i>Taupo</i>

Now let’s say this was the list of towns contending to host director Peter Jackson as he’s travelling the country looking for new locations for his next feature film; and that, sadly, Invercargill’s not made the cut. We need to strike it out. All we’d do is to take our list above and wrap Invercargill in the <del></del> tag and we’re done. An example is below:

<i>Christchurch</i>, <i>Aukland</i>, <i><del>Invercargill</del></i> and <i>Taupo</i>

When you switch back to Visual mode, or preview it in your browser of choice, it will look a lot like the image below (allowing for the dotted underline).

Italics and strikethrough

Quotes

Like all good bloggers and journalists, we don’t just write our own thoughts or link to others articles and thoughts. We also want to quote authors, whether that’s some prose, a statement, a callout or something they said recently. Commonly we see it in a larger, italicised, greyed font, with prefixed double-quotes. Often times it’s styled nicely like below, from a recent article on Copyblogger:

Blockquote

To achieve this effect, we need to use the tag. We simply surround the text we want to appear quoted in the tag. The example in the image above would be created as follows:

<blockquote>Please expand on your answer to Q1. What have you tried?

What’s keeping you from getting results?</blockquote>

I hope that you can see by this stage, just how very simple HTML is. Though there are a lot of tags and a number of the tags have a wide variety of options, they’re reasonably self-explanatory and quick to master. Keep it simple, start from the most appropriate tags and go from there.

The other thing you’ve likely noticed is just how much of a time save a good visual editor is. Could you imagine what it must have been like in the early days, before editors, doing all of this by hand? I didn’t mind doing it, but well, it’s not always the most effective way to work.

Alignment

Now let’s say we wanted to play around with the alignment of text. Say we want to align a few paragraphs of text either in the center of the post or on the right-hand side. Let’s work with the paragraph below. It will start off left-aligned, move to be aligned in the centre, and then end up right-aligned.

Left alignment

By leaving the text as is, optionally surrounded in

 

tags, will display the text left aligned.

augue luctus scelerisque ut a ante. <b>Vestibulum ante ipsum primis in</b>

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

Center aligned

By surrounding the text in

 

and

tags and adding the attribute “align” with the value of “centre,” we can display the text center aligned.

<p align="center">augue luctus scelerisque ut a ante. <b>Vestibulum ante ipsum primis in</b>

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.</p>

This code will display as shown here.

Center alignment

Right aligned

By surrounding the text in

 

and

tags and adding the attribute “align” with the value of “right,” we can display the text right aligned.

<p align="right">augue luctus scelerisque ut a ante. <b>Vestibulum ante ipsum primis in</b>

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.</p>

This code will display as shown below.

Right alignment

Lists

Now we’re coming to the end of Part 1 of out mini-course. We’re going to look at the last of the key, basic elements—lists. In HTML there are two types of list:

  • unordered
  • ordered.

Unordered lists are delimited with a bullet point and ordered lists have a numeric value, such as numbers, roman numerals and so on. Lists are a little more complicated than the tags that we’ve covered so far, though not by much. Lists need tags for the list itself, and for each of the elements within them. Below are two examples:

Unordered list

<ul>

<li>First Point</li>

<li>Second Point</li>

<li>Third Point</li>

</ul>

Ordered list

<ol>

<li>First Point</li>

<li>Second Point</li>

<li>Third Point</li>

</ol>

You can see that an ordered list starts and ends with and an unordered one with . You can also see that the list items start and end with

. So, there’s a nice correlation between the purpose and the name.

 

There’s quite a bit you can do when configuring what your lists will look like, where they will start or resume their numbering from and so on and lists can have sub-lists. But I think that we’ve covered enough for now.

Tomorrow we'll finish up our tour of essential HTML by looking closely at links, the "glue" of the Internet. Before then, let me know if you've learned anything in this tutorial—and what else you want to know. I'd love to hear from you in the comments.

Matthew Setter is a freelance writer, technical editor and proofreader. His mission is to help businesses present their online message in an engaging and compelling way so they’re noticed and remembered.

About Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for ProBlogger check out our Write for ProBlogger page for details about how YOU can share your tips with our community.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. While these days you can always copy and paste HTML for things like advertisements (i.e. Google Adwords), knowing something about HTML is a good thing especially if you mess up and create a problem. ASP for WordPress bloggers may be another handy thing to know.

    Very detailed article!

    • Sorry for posting this comment as a reply to an unrelated one, but I thought it was important that everyone sees this, as there are a LOT of errors in this post that everyone should be aware of.

      Firstly, editors do NOT write HTML code more efficiently than a person can, probably never will, and most coders strongly advise against them. I’ve written an article about this misconception on my blog.

      Secondly, the basic example of an HTML document lacks a <!DOCTYPE> line, which needs to be included for browsers to know which version of HTML you’re coding in.

      The <b> and <i> tags for bold and italic are obsolete. The “align” attribute is also obsolete. CSS needs to be used for alignment (interestingly CSS was not mentioned once in this article).

      There are also serious formatting errors in the article which arise from the browser executing the HTML tags, rather than displaying them as is.

      If you want to learn VALID coding in HTML, I write about this on my blog, and please ProBlogger take this terrible article off your site.

    • There are a LOT of errors in this post that everyone should be aware of.

      Firstly, editors do NOT write HTML code more efficiently than a person can, probably never will, and most coders strongly advise against them. I’ve written an article about this misconception on my blog.

      Secondly, the basic example of an HTML document lacks a <!DOCTYPE> line, which needs to be included for browsers to know which version of HTML you’re coding in.

      The <b> and <i> tags for bold and italic are obsolete. The “align” attribute is also obsolete. CSS needs to be used for alignment (interestingly CSS was not mentioned once in this article).

      There are also serious formatting errors in the article which arise from the browser executing the HTML tags, rather than displaying them as is.

      If you want to learn VALID coding in HTML, I write about this on my blog, and please ProBlogger take this terrible article off your site.

  2. Perry says:

    Great post! HTML and CSS are too often copy and pasted to websites these days but knowing the basic mechanics will make it ten times easier to maintain a site. W3 schools is a great website to learn how to code and web develop!

  3. Emily says:

    Thanks so much for this! I’m just getting started with my first WP blog and it’s come at a perfect time. I was freaked out about learning html having ZERO experience with it. You’ve made this so easy to understand, I feel so much more comfortable with what I’m heading into now :-) Btw, do you have a quick reference list of html codes for starters like myself? How do you go about remembering all them?

  4. Martin says:

    There are a few tags (text alignment) that aren’t showing up in the post. Also, in the text, you say the italics tags are <em>, but the example shows them (correctly) as <i>

    • Ross Lampert says:

      Alas, these aren’t the only examples of missing text or two slightly different tags being mentioned as if they were the same. See also the text above the first (The Main Title Page) illustration for missing code and the mistaken pairing of and . Also, minor point, Republicans below that example, not Republics.

      Matthew: please give the post a good scrub, correct what’s missing or potentially confusing, and repost. The intent of the post is great; the execution, not quite.

      • Ross Lampert says:

        Well, that didn’t come out quite right, either. Let me fix that: …mistaken pairing of the “strong” and “b” tags. Also, minor point, Republicans below that example, not Republics.

        The rest of the post should NOT be boldfaced. Sorry. :-(

        • Hi Ross,

          thanks for pulling me up on my oversights there. I’ll have a chat with the good folks at Problogger and see about getting the details updated.

          Matt

  5. Gen says:

    I’d like to get the same format as your example above for the quote, but a blockquote doesn’t give that effect. Am I missing something

    Please expand on your answer to Q1. What have you tried?
    What’s keeping you from getting results?

    This code doesn’t produce the style example above.

    • Gen,

      some apologies – that was some extra styling for the effect of the article, so that it really stood out. It was done with CSS.

      Matt

    • Ben Troy says:

      you can search for the phrase on how to implement the css for blockquote, there are many styles to choose . Add it to the Appearance and Edit File .

  6. Ben Troy says:

    Very detailed and useful for new blogger and SEOer. These are must steps to learn before advanced Onpage optimization technique .

  7. Malhar says:

    Agree, it’s always good to have a basic knowledge of HTML when you’re working on the web. Helps to correct many mistakes.

    Thanks for sharing!

  8. Rick says:

    Thanks for the article and agree it would benefits all bloggers to learn some basic HTML. I have one question that relates to the h1 tag and SEO. Can I assume for a post to be semantically correct it should contain only one h1 tag? If the post title is formatted for h1, shouldn’t all other headlines, sections and sub-sections be h2, h3, and smaller?

  9. James Hannan says:

    Thanks, To be honest I always feel that i should learn html, css at least basic. But never get proper time. And I am planning to get those into my head soon. i enjoyed your post.

  10. Aaron says:

    Thanks for the informative post. I’m just getting the hang of wordpress (after migrating from weebly) – it’s nice to see someone explain this stuff in simply, plain old english.

  11. Stephen says:

    I think it’s quite important to have at least a basic understanding of HTML, especially with regards to headers, lists, bold and the other elements you’ve covered here. The Visual Editor in WordPress can sometimes leave snippets of code after editing, and you often don’t know unless you switch to the HTML editor. Understanding HTML will assist in such situations and help keep the code clean and the page correctly formatted.

    Great post.

  12. Mi Muba says:

    Though most of this info is available on hundreds of website but the way you taught the reader is amazing never felt anywhere repetition or boredom. Thanks for sharing in a unique way I mean giving us old wine in a new bottle

  13. Thanks for the concise explanation. I still hope I never have to write my own code/tags, but it’s nice to know how it works.

  14. EricaVain says:

    Def must know in blogging… Newbies Get Familiar!!!

  15. Kiran says:

    It’s great to see a back to basics tutorial. I’m a novice at HTML so it’s great to find a simple easy to understand article about it.

  16. Tiff says:

    Great tips! Thank you! I’m curious as to why you didn’t mention Blogger? Do you not consider it a viable tool at all or is it just an anti-Google thing?

    • Hi Tiff,

      I have no aversion to Blogger. The reason that I focused on WordPress is that it seems to be the generally most used tool platform by readers. So it made sense to focus on it. However the HTML knowledge can apply equally to other platforms.

      Matt

  17. Josue says:

    Very useful article for me ! Thanks !

  18. This is a really useful post. Thanks for sharing this with us!

  19. 重庆SEO says:

    All the website based on html,so I start to learn it well.

  20. @Gen

    Yes, you are missing something. That blockquote (in the article) is styled using css. HTML is like the structure, and css is the style.

    You can use a background-image with a fixed position in the top left, and then add some left-padding to the p tag to nudge it over.

  21. Joy says:

    Useful article thanks and look forward to reading the next.

    I’d be really grateful for an explanation of the difference (for SEO purposes) between WordPress categories, tags and the keywords in the various SEO plugins.

  22. Erica says:

    Thanks! This is an excellent introduction to HTML for newbies!

  23. Shelby Roth says:

    Nice article Matt. I liked the idea with having basic knowledge of HTML when working on the web. Very helpful to me! Your tutorials are for sure detailed and actually encouraging. Thanks for sharing!

  24. This is amazing blog Matt. I really enjoyed learning something new and crucial in HTML. It has been my problem and you have really saved me a lot. Thank you!

  25. There are a lot of errors in this post that everyone should be aware of.

    Firstly, editors do not write HTML code more efficiently than a person can, probably never will, and most coders strongly advise against them. I’ve written an article about this misconception on my blog.

    Secondly, the basic example of an HTML document lacks a <!Doctype> line, which needs to be included for browsers to know which version of HTML you are coding in.

    The <b> and <i> tags for bold and italic are obsolete. The “align” attribute is also obsolete. CSS needs to be used for alignment (interestingly CSS was not mentioned once in this article).

    There are also serious formatting errors in the article which arise from the browser executing the HTML tags, rather than displaying them as is.

    If you want to learn valid coding in HTML, I write about this on my blog, and please ProBlogger take this terrible article off your site.

    • Tiff says:

      I take issue with your comment. Matt clearly wrote this article for people like me (and many others) who need to know the basics of coding. Also, this is completely false because I use them every day: “The and tags for bold and italic are obsolete”.

      While your “expert” opinion is welcome, you could have offered it in a way that wasn’t so insulting to the author who clearly took a lot of time and thought to pull together a great article. You’re a blatant self-promoter.

      Matt, keep up the good work! I needed this article, and many others did.

      • Hi Tiff,

        thanks for the support and kindness. As Charles has raised his points a few times, I feel it’s worth clarifying that whilst there are a few errors in the posts technical content, that will be corrected shortly, many thanks to Ross Lampert for these pointing out, this series was targeted specifically at the beginner to HTML. To bring in a lot of the theory at history at this stage would likely be counter-productive more than helpful, likely even overwhelming.

        With respect to my point about efficiency of code of an editor versus by hand; after 12 years of developing web applications in varying levels of complexity and variety, I appreciate very much first hand the benefits that they can provide. They regularly save me from having to do all the code by hand. Whether that’s when writing posts or when using editors, such as TextMate or SublimeText 2.

        With respect to the b and i tags being obsolete, it’s true for a time they were or were heading in that direction. But as HTML5 continues to take hold, though they’re not tags of first resort, they are becoming more semantically meaningful as both: http://stellify.net/html5-b-and-i-tags-are-going-to-be-useful-read-semantic-again/ and http://html5doctor.com/i-b-em-strong-element/ point out. This then continues to keep their relevance as the web continues to evolve.

        However, I don’t want to get in to a flame war and appreciate that you noted, as did Ross, some of the omissions that will be corrected shortly. It’s always good to have a healthy debate about topics.

        Matt

  26. WordPress is what I love using. I can opt for others but this one just does perfect for me. In blogging, all that is required is quality and brief work does not leave the reader bored before finishing the first quarter of the whole. Tags are very important in blogging as they enable one to search quickly through the SERPs.

    • Carmen,

      nicely said. There are a variety of other, equally, if more powerful platforms. But as WordPress is the most talked about platform here on Problogger, it made sense to focus around it.

      Matt

  27. Great post! A copy of exactly what I needed.

  28. Reed Nixon says:

    I like the content that comes with your post. It is very informative!

  29. Wow! I’m pleased to about the necessity of the HTML tags for blogs from your post. I think it is really needed for the website. Thanks for posting this important content over here. Keep it up!!