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.
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
andwill be what you see in the title bar of your browser. - The text in side
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.
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.
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:
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 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.
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 and the strikethrough is
All you need to do is to wrap each of the town names in 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 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).
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:
To achieve this effect, we need to use the
<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.
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.
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.
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.
Oops sorry for the duplicate comment. I think the first one got marked as spam by mistake, but approved anyway.
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!
Hey there Perry,
you’ve hit the nail on the head. There’s no harm in using a visual editor as provided in WordPress, but having a working knowledge of the underlying process really helps if you want to step outside the bounds of what an editor provides. It’s also helpful when there’s either not a plugin available, or doesn’t quite do exactly what you’re after. That’s when being able to hand code really shines.
Here are some other resources:
* http://code.google.com/edu/submissions/html-css-javascript/
* http://reference.sitepoint.com/
* https://developer.mozilla.org/en-US/docs
Matt
Matt
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?
Hey there Emily,
There’s rather a lot of them, but check out the guide from Sitepoint http://reference.sitepoint.com/html/elements-structural. As for remembering them, I’m not aware of anyone that does – which isn’t to say that there aren’t people that do. Having a handy reference on hand, whether online or a book is a good compromise.
Have a look at: http://www.amazon.com/Definitive-Guide-HTML5-Adam-Freeman/dp/1430239603/ref=sr_1_2?ie=UTF8&qid=1349814597&sr=8-2&keywords=html5 or http://www.amazon.com/HTML5-CSS3-For-Real-World/dp/0980846900/ref=sr_1_10?ie=UTF8&qid=1349814597&sr=8-10&keywords=html5
Matt
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>
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.
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
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
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
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 .
Very detailed and useful for new blogger and SEOer. These are must steps to learn before advanced Onpage optimization technique .
Hi Ben,
thanks for the feedback. Well said.
Matt
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!
Malhar,
not a worry. I hope you enjoyed it.
Matt
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?
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.
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.
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.
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
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.
Def must know in blogging… Newbies Get Familiar!!!
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.
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
Very useful article for me ! Thanks !
This is a really useful post. Thanks for sharing this with us!
All the website based on html,so I start to learn it well.
@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.
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.
Thanks! This is an excellent introduction to HTML for newbies!
Erica,
thanks for the positive feedback. Anything else you’d like to know about?
Matt
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!
Heya Shelby,
glad that you found the article helpful and informative. It was fun writing it.
Matt
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!
Carla,
happy to help. There can be a lot to learn in HTML, but piece by piece you’ll get there.
Matt
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.
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
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
Great post! A copy of exactly what I needed.
Tabetha,
great to hear. Let the good folks at Problogger know if you need more information.
Matt
I like the content that comes with your post. It is very informative!
Thanks Reed. Much appreciated.
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!!