“Essential HTML for Bloggers Part 1” plus 1 more

Posted: 05 Oct 2012 01:00 PM PDT

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 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.

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 <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  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).

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 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.

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.

Originally at: Blog Tips at ProBlogger

Essential HTML for Bloggers Part 1

Weekend Project: Get a Handle on HTML

Posted: 05 Oct 2012 07:09 AM PDT

Tools like WordPress and Blogger and pretty much all online editors now provide us with WYSIWYG tools.

That’s excellent for those of us who are less technical—like me! But visual editors like the one in WordPress can tempt us to copy and paste content from another program, like Word.

Even if we type directly into the content window, as I’m doing now as I write this post, if we only know how to use the visual editor, we can make what seem irrevocable errors (or edits!) as we format and style the content using the buttons on the toolbar.

For this reason, we’ve wanted to publish an HTML-for-bloggers guide here at ProBlogger for some time. And now we are.

Why bother?

If you’re not as familiar with HTML as you could be, you may hit a few problems in your blogging:

making small errors that are time-consuming to fix and solve
having trouble correcting issues that arise in guest submissions
not being able to check the content of links—which can be disastrous if they’re affiliate links or promotions
failing to present your content in a consistent or professional way, which undermines your blog’s credibility.

These are just a few of the potential everyday problems you face if you don’t know the basics of HTML. But the fact is that to grow your blog, you will definitely need to know how to encode a link, style text, and more—and that means you need to understand a little HTML.

Get a handle on HTML

This weekend, Matt Setter’s going to introduce us in a straightforward, simple way, to the basics of HTML. Over the next two days, he’ll show us what HTML looks like, and step through the main elements you need to know to set up and format posts to perfection.

This two-post mini-series will help you get a handle on the code behind your posts so that you can trouble-shoot formatting and content issues yourself, quickly, as they arise. It will also, I hope, inspire you to find out a bit more about the language.

At the end of each post (or the series) feel free to add a comment about the main problems you have with encoding posts and content on your blog—I’m sure Matt will be pleased to answer your questions, perhaps in an extra post if needed!

To get started, I’d love to know how you’d rate your understanding of HTML basics. Do you usually use your blog platform’s WYSIWYG editor, or its HTML editor, to edit and format posts? Let us know in the comments—and enjoy this weekend’s project!

Originally at: Blog Tips at ProBlogger

Weekend Project: Get a Handle on HTML