HTML for Bloggers: What Every Blogger Needs To Know about HTML

HTML for Bloggers

HTML for bloggers is an interesting topic, as you can effectively blog, even if you don't know anything about HTML. With modern blogging platforms, like WordPress, we can blog without knowing anything about HTML, let alone coding with HTML.

Normal web user doesn't have to know anything about HTML, but for a blogger, knowing certain key aspects has a lot of benefits. Don't worry, this isn't hard. You don't need to learn how to code HTML. I will show you what are the most important HTML-tags and why it is important that you understand the basics.

HTML - Hyper Text Markup Language

Hyper Text Markup Language (HTML) is the encoding scheme used to create and format a web document. HTML is not a language for the users to read, but a language for the computers and applications instead. And machines, robots, read HTML very differently than us humans.

The biggest reason for a blogger to get to know HTML is to understand how web pages, like blog posts, are formed. Your Internet browser reads the HTML. The search engines read the HTML. We, as the readers, only see the visible part, not the HTML tags for example. But these tags are the key for a machine to be able to comprehend the page.

When you understand the HTML tags these "robots" read, it provides you a foundation for search engine optimization, SEO, that every blogger should be aware of. And as a bonus it doesn't hurt to know a little bit about HTML, if you have to go and jump out of your visual editor one day.

Knowing HTML is Essential for Search Engine Optimization

As a blogger you should know about search engine optimization, as it is an important way to gain traffic. And it's hard to understand search engine optimization if you don't understand these couple of key things about HTML, namely

  • what is a title tag,
  • how to use different headline tags effectively,
  • why you should pay attention to links and anchor texts,
  • what is anchor text in the first place, and
  • how images should be added to the blog posts and pages.

Blogger's Guide to the HTML Tags

Even if you always use WYSIWYG (What You See Is What You Get) -editor to write and format your blog posts, the HTML-code is formed in the "background". The underlying HTML code is for the computers, search engines and the browser.

From the HTML code, search engine tries to read what the page is about and the browser fill form the page what you see in the browser window when the page is loaded.

A search engine reads your blog page as source code and there are factors in the HTML source that matter more to search engine rankings than others.

And this why we have to learn a little bit about HTML. To understand how to optimize our blogs and blog posts for the search engines.

Introduction to HTML Tags

HTML tags are "commands" in the source code that usually mark a start of a specific section in the code. Tags are also used to provide information that is not necessarily displayed to the user, e.g. different encoding of the page.

HTML tags are opened with opening tag <tagname> and closed with </tagname> ending tag. For example </h1> ends the primary headline, started with <h1>, so the most important headline would be between <h1> and </h1>. In some cases the tag is closed within one tag, e.g. <meta name="description" content="" />.

The tags in the HTML code tell the browser, search engine or other crawler "how to read the page". With tags, the browser knows what information it should show the reader and what data it just needs to process but doesn't have to be displayed.

With the information HTML tags provide, a search engine can process the page effectively as it knows what parts if needs to focus on and what it can ignore, or give less weight when calculating search engine rankings...

The HTML Tags a Blogger Needs to Know

HTML HEAD

This is the part where all the "hidden" data goes. A reader won't see this directly unless looking at the source code. However a search engine, and a browser, are very interested in this section.

  • <html> and </html>
    • HTML page is the text, tags, code and everything else between these two tags.
  • <head> marks the header section of the HTML file.
    • The header section is filled with data that is not actually displayed on the page, like scripts and CSS-files.
  • <title> shows what is the title of the page.
    • The title tag is the single most important part of your on-page search engine optimization.
    • Very high importance in search engine rankings.
    • The word(s) at the beginning of the title tag have higher importance for SEO than the latter part.
  • <meta> Meta-data goes into the header section as well.
    • Example of meta data are the meta-keywords, meta-description and various verifications like one for the Google Webmaster Tools.
  • <meta name="keywords" content="keyword1, keyword2" />
    • These were very important in the early days of the WWW, when search engines couldn't properly process the text on the page, they had to rely on the meta-data.
    • Of course, when anyone can write anything as meta-data, search engines had to learn to analyze the page, and search engines, like Google pretty much ignores the meta keywords today.
  • <meta name="description" content="This page is about..." />
    • Meta description is important, as most search engines display the meta description in the search engine results page, if the searched terms are found in the description.
    • Good description will enhance the chances of a user to click your results on the search engine results page.
    • Meta description has very minimal importance for search engine rankings.

HTML BODY

The visible part of the HTML page, the headlines, paragraphs, the text, images and and everything a browser shows to the user.

  • <body> -tag and an ending tag </body>; mark the part of the code that is actually shown on the web page when you look at it with your browser.
  • <div> is used to mark a division or a section in the HTML document
    • Divisions are often used to create the page layout, using CSS id's, classes and CSS styling.
    • For example, the sidebars you see on many blogs are most often done with <div> tags and layout formatting.
  • <h1> headline tag marks the main headline on the page.
    • H1 headline tag is the second most important factor for your on-page SEO (if not counting the keywords in the domain URL).
    • Moderate importance for search engine rankings.
  • <h2>, <h3>, <h4>, <h5> and <h6> mark the secondary headlines or sub-headlines.
    • These are used to mark the subtopics on the page.
    • Depending on how you format your articles, you probably use h2 and h3 in your blog posts, possibly h4 as well. h5 and h6 are the last sub-headers, there is no h7.
    • The sub-headers are far less significant for SEO than the title tag and H1 headline tag, thus the most important headline on the page should be presented as H1.
  • <p> is a paragraph.

Links and Images

Links are very important. Both internally and externally they are essential for SEO. They are essential for providing navigational paths for the readers. Images on the other hand, spice up the blog, and when used right, they also help with SEO.

  • <a> is a link.
    • The word or words inside <a> and </a> form the links anchor text.
      • e.g. <a href="http://URL">anchor text</a>
    • Anchor text is very important factor for search engine optimization, in both internal and external links (and both from your blog or back to your blog).
    • you can also add other attributes to the link, like title
      • <a href="LINK" title="This is the title">anchor text</a>
    • or target, to make the link open in a new window for example
      • <a href="LINK">keyword phrase</a>
  • <img> is used to display images.
    • When adding images to your blog, pay attention to the
      • image-name (the file-name),
      • ALT-text (always have it) and
      • the title (description of the image)
    • e.g. <img src="image link goes here" alt="ALT-text is very important. If image can't be displayed - the ALT-text is used instead." title="This describes the image to a reader when mouse is over the image" ></img>
    • The image name and ALT-text are important not only for your readers, but for SEO as well.

Formatting

Various HTML tags are used to format the text. Here are some examples.

  • <strong>- or <b> -tags are used to bold text.
    • Great way highlight important things and make text more scannable.
    • Minimal importance to SEO.
  • <em>- or <i> -tags are used to emphasize text with italics.
    • Like bolding, used to highlight something from the text.
    • Minimal importance to SEO.
  • <ol> and <ul>.
    • the ordered and un-ordered list, usually presented as bullet points. e.g. this list you're reading is un-ordered list.
  • <li> and </li>.
    • The bullet points (<ul>) or numbered (<ol>) list items.
    • Very minimal importance to SEO.
  • <u> is used to underline text
    • should be used sparingly, if at all, as a user might look at it as a link.
  • <blockquote> defines a long quotation
    • <blockquote cite="value"> is an optional attribute that specifies the source of quotation

Source: Search engine ranking factors are based on the data from SEOmoz, based on the ratings from 72 SEO experts and their extensive studies on the subject. HTML information is based on my personal experience and using W3C recommendations and index of the HTML elements as a reference. W3C School's HTML reference is a great place if you want to find more about the listed tags and all the tags I didn't cover here.

What Every Blogger Needs To Know about HTML

When looking at a blog page from a browser, you can't tell which HTML tags and elements are where, apart from title tag (which usually is visible on the browser title bar, at the top left corner of the browser), so to check what your blog actually "looks like", you have to look at the source code.

In most browsers, you can find it from the View-menu and look for source code. In FireFox, just hit CTRL+U. When looking at your own blog, look for the title tag, the different headlines and the image ALT-texts.

I have created websites using just HTML, so I know how it works, but I think that with the tools we have today it is not necessary to know how to make a web-page with pure HTML. So HTML for bloggers is easy, we just need to know how these things work, not actually do them (unless we're developing a blog theme or template of course).

But we need to know about SEO. And for that, we need to know how to do keyword research. With keyword research, you can find good keywords for your blog. And after reading this post, you have better understanding where those keywords should go to. To name the top 3:

  • The title tag.
  • The H1 headline.
  • The anchor texts in the links.

Because of this I focused on that, and the things that matter to bloggers who don't have to touch the actual code, but maybe do a little bit of tweaking outside the visual editor when editing their posts.

What do you think? Did I miss something every blogger should know about HTML?

Go ahead, leave a comment and let me know, OK?

Posted by

Topic: Blogging
Tags: , , ,

If you enjoyed this post, sign up for updates (it's free)


Feedback, questions and comments are also welcome on my Facebook page