Understanding Basic HTML {Blogging Basics for Beginners}

Blogging Basics for Beginners

Blogging Basics for Beginners: A 12-Week Series to Walk You Through Setting Up a WordPress.org Blog will run every Thursday from August 30th through November 15th. Click here for all of the posts in the series.

While WordPress offers many automated ways to change and enhance content on your blog in addition to providing a visual editor, you will benefit in the long run by learning some basic HTML code, which you can use in posts and pages as well as sidebar text widgets.

Text

Here are some basic examples:

Headings. Use the h2, h3 and h4 tag to include headings, and format the way they appear in Site Design. The heading above is a Level 2 Heading:

<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>

Blockquote. Use the blockquote tag to format quotations, and format the way they appear in Site Design.

<blockquote>It was a fantastic book!</blockquote>

And here is how it looks:

It was a fantastic book!

Bold. Use the strong tag to bold text

<strong>Bolded text</strong>

Italics. Use the em tag to italicize/emphasize text:

<em>Italicised (emphasised) text</em>

Underline. Use the underline tag to underline text:

<span style=”text-decoration: underline;”>Underlined text</span>

Links

A link has two different parts – the address being linked to and the anchor text that is shown on the page or blog post. When writing an HTML link, you need to put that information into the HTML tag.

Here is an HTML link to the website for CNN: <a href=”http://www.cnn.com”>CNN</a>

This is how the link looks on the page: CNN

Understanding HTML

The most important thing to understand about HTML is that almost all HTML commands work through the use of both an opening tag and a closing tag.

The opening tag creates the style or process — such as bolding or creating a hyperlink — and the closing tag tells it when to stop. Missing closing tags are one of the biggest causes of formatting issues, and WordPress even has a ‘close tags’ option on the HTML edit screen to let you close any open tags that might be affecting your site content. But it’s best to get into the habit of looking for those tags so that you can write cleaner HTML and do more with your site over time!

Images

In order to display images in your blog posts, pages or even your sidebar, you first have to upload images to your media.

The WordPress image uploader takes care of two different things:

1. It will copy an image file from your computer to the server where your blog is hosted

2. It automates the creation of the link that “points” to the image

Let’s say you have an image file called “weather.jpg” that you want to place inside of a blog post. In the new post, click on Media in the dashboard and click ‘Add New’:

Understanding Basic HTMLClick on the ‘Select Files’ button and then Browse to find the weather.jpg file. Once you do, the image will upload. Take note of the URL to the image.

Understanding Basic HTMLThis is how you can insert the image into one of your pages or posts:

<img src=”http://theworldofblogs.info/wp-content/uploads/2012/10/weather.jpeg”/>

The img src tag shows where the image file is located and will display it as long as the image is in that path. As you learn more, you’ll see that you can align the image to the left or right of a blog post, add titles to it for SEO purposes and create images that act as links to take your readers to different content, either on your blog or to a site outside of your domain. (Note that the img tag does not require a closing tag!)

More Tutorials

If you’d like to dive into these in more depth, be sure to check out these HTML tutorials:

Click here to download or print  an easy reference HTML cheat sheet.

James Brooks is a professional blogger, web designer and social media consultant based on the South West coast of England. As well as being a co-founder of GPlusTuts, a blog about Google+, James also enjoys blogging about technology, food and tea!
Close Menu