HTML Basics for the New Blogger – Part 1

This is the first in a series of articles to help teach you the basics of HTML. We’ll start with the easy stuff first and move into some more advanced topics as the series progresses. Enjoy!

What is HTML?

HTML is an acronym which stands for Hyper Text Markup Language. HTML is simply text that contains markup tags to tell your web browser how to display the page.

One of the things I really like about HTML is it’s simplicity. The HTML tags are fairly straight forward and you don’t need any special software programs to write it. You can create your masterpiece using only a plain text editor.

HTML Markup Tags

HTML tags tell the web browser exactly what to do with the text that is enclosed inside the tag. These HTML commands, always begin and end with <triangle brackets> (less than and greater than symbols, respectively) and most tags should be closed like this: </triangle brackets>. The slash at the beginning of the closing tag tells the browser to stop applying the current formatting and resume the formatting of the previous tag it encountered.

Here’s a simple example:

This <strong>text is bold</strong> and this text is normal.

This text is bold and this text is normal.

Always use lower case for your HTML tags and never forget to close them. If you get in the habit of following these two simple rules, you ensure the most compatibility with the HTML and XHTML specifications. Plus, it will save you hours of debugging when you forget to close a <tr> tag in a table.

One final note on closing HTML tags: Some tags such as the line break <br> and image tag <img> do not require a closing tag, but can still be closed. In these cases, you’ll close these tags like this:

<br />
<img src="image.gif" alt="My Image" />

Do you see the difference? The closing slash is included at the end of the tag but before the greater than symbol. Don’t worry, I’ll tell you if the tag should closed or not when we get to them.

Nesting Tags

HTML tags can also be nested inside of each other to apply multiple formatting to the same text. Just make sure you close the tags in the order they were opened.

Here’s an example:

The quick <strong>brown fox <strike>jumped</strike> jumps</strong> over the lazy dog.

The quick brown fox jumped jumps over the lazy dog.

Basic Text Formatting

Let’s start with some basic text formatting. The following examples illustrate the following commands: bold, italics, underline, and strike through.

Bold Text

There are two tags you can use to bold text: <strong> and <b>. You can use either of these tags as you wish, but I recommend using the <strong> tag to make your code more readable.

Tag: <STRONG>
End Tag Required: Yes

Example: The quick brown fox jumps over the <strong>lazy dog</strong>.
Result:The quick brown fox jumps over the lazy dog.

Tag: <B>
End Tag Required: Yes

Example: The quick brown fox jumps over the <b>lazy dog</b>.
Result:The quick brown fox jumps over the lazy dog.

Emphasised Text (Italics)

Tag: <EM>
End Tag Required: Yes

Example: The quick brown fox <em>jumps over</em> the lazy dog.
Result: The quick brown fox jumps over the lazy dog.

Underlined Text

Tag: <U>
End Tag Required: Yes

Example: The <u>quick brown fox</u> jumps over the lazy dog.
Result: The quick brown fox jumps over the lazy dog.

Strike Through

Tag: <STRIKE>
End Tag Required: Yes

Example: The quick brown fox jumps over the lazy <strike>cat</strike> dog.
Result:The quick brown fox jumps over the lazy cat dog.

The next part in this series will cover paragraphs and line breaks, headings, and text alignment. Stay tuned.

Part 1 – Intro and Basic HTML Text Formatting
Part 2 – Paragraphs and Line Breaks, Text Alignment, and Headings

If you enjoyed this post, make sure you subscribe to my RSS feed!