A Guide to Basic HTML Part 1

SEO consultants tend to come from a variety of professional and educational backgrounds. Many people come to online marketing through the traditional route of business and marketing degrees; however others, including myself, have degrees in everything from English Literature to music production. Whilst a background in a subject such as English Literature means we are naturally equipped to write press releases and amend copy, occasionally we also have to get our hands dirty and dig around in some site code.

HTML can look a bit intimidating, but really it's pretty simple. It is not a programming language, you cannot process complex arguments; it is just a mark-up language. For instance, you can put a tag around something and mark it up as bold, as red text or as a heading.

HTML structure

Generally speaking, all HTML tags should be opened when you start using them and closed when you finish. To do this you use pointy brackets (the greater than and less than signs):

<strong>this is bold text</strong>

So you see, you put 'strong' in pointy brackets to open and '/strong' to close the section of bold text. Make sure that you close any tag you open.

Page structure

The standard html page is just a basic text document that you can write in notepad and save with the filetype ".html". In order to create a proper html page you should give a document the following structure:

<html>
  <head>
  </head>
  <body>
  </body>
</html>

The head section is where information about the page goes, such as the page title and the meta data. The text that you want to appear on screen goes in the body section.

Headings

The headings on a document are denoted with <h1> <h2> <h3> (etc.) tags. You should open and close heading tags in the normal way:

<h1>This is the Page Topic</h1>.

There should only be one <h1> at the top of the page and this should match the topic of the page. The <h1> is not the sole means that search algorithms use to ascertain the purpose of a page; in fact it carries as much weight as any emphasised text at the top of a page. However, it makes sense to use the <h1> for this purpose. The <h2> tags should provide further headings that give an overview of the content. If you need further subheadings within the text introduced by a <h2> then use a <h3> tag. There is no reason for you to jump from <h1> to <h4> without the numbers in between.

Links

In order to link to another document you need to use the anchor tag <a>. You also need to tell the browser what you want to link to and this is added as an attribute within the <a> tag. This attribute is the hyperlink reference, which shortens to href. A simple link in html looks like this:

For <a href="http://www.i-com.net">SEO Manchester</a> visit I-COM

If you are linking outside of your website you need to make sure you put the http:// at the front of the link. If you are linking to something else on the same site, you can just put the shortened address of the page you want to visit.

Complete our <a href="contact.html">contact form</a>.

If you choose to do this, make sure you check the link after the page goes live. If you are in any doubt, just use the full address.

If you want to link to another site without passing PageRank to that site, you can set the link as nofollow with the rel attribute:

<a href="http://google.com" rel="nofollow">Visit Google</a>.

If you don't mind passing PageRank on to a page, but you do not want your visitor to leave your site, you can force a link to appear in a new window with the target attribute:

<a href="http://bing.com" target="_blank">Visit Bing</a>.

Find out more in our guide to Basic HTML Part 2.

  • Contact

    Speak to us about your project today