For coding newbies HTML can be intimidating. It looks super complicated and viewing the source code of a website is probably about as confusing as the backend of Kim Kardashian – why does it work? Could I ever get to grips with it?

Well, we can’t help you with Kim, but we can help take away your HTML backend fears with some HTML basics. So, here goes. Here’s 5 basic HTML codes translated into actual human being speak.

First off, what is HTML all about?

The dictionary definition of HTML is:

Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.

In normal person terms, it’s the basic coding language used to create websites. Back in the day when the internet was something to be gasped at in awe and computers were so big that they blocked the doorway – it was common to manually create websites using HTML language.

Since then many other coding languages have evolved. So to explain it in simpler terms, you could relate a coder to being a builder. HTML is like the old-school brickwork and concrete every builder needs to know first to build the foundations. They can then learn fancy techniques to make the building more high-end and elegant later on.

1. Creating main headers and subheaders, like this one

The title of this article is a main heading, usually called ‘h1’ in the coding world and the one above this sentence is a subheading usually called ‘h2’ – short for heading 1, heading 2. We say ‘usually’ as the designer of the website decides on these in what they call the .css file – more on that another time.

Back to the headings, if you then want smaller titles within your main sections the numbers continue and usually represent smaller less bold headings – h3, h4, h5. It’s very similar to how you format an MS word document properly and use contents pages – if you’re into snazzing up word files that is.

First off, it’s important to understand that all HTML code has an opening that looks like this < and a closing that looks like this >. In most cases, any code you use inside one of these you will also need to close off with one of these  at the right point in the copy or on the page.

So for headings you would have….

• 
  

  The title of your article or page

• 
  

  The sub-header of your page or article

• 
  

  The smaller header within this section

That make sense? Right let’s move on…

2. The blue underlined hyperlink from the backend

You’re probably used to using tools in email or MS word to add a hyperlink to text or seeing them in blog posts online. To the human eye they just look like regular links.

Okay, so on our blog they are orange but you get our point. As a coder for a basic hyperlink the first sentence above would look like this… coding highlighted red for your convenience.

Take a look at our range of marketing courses to see how you can rev the engines on your marketing career. 

There are also further ways you can influence how that link behaves by adding in more code after the closing ‘quote’ of the link. For example if you don’t want the link to take people away from your page or article, you can make it open in a brand new window by adding target=”_blank”. So, it would then be:

Take a look at our range of target=”_blank”>marketing courses to see how you can rev the engines on your marketing career.
 

3. How an image looks behind the scenes

You will see our nice image above. From the front it’s just a pretty image, from a coders point of view in its basic form it looks like this:

http://image……”>

Img src is short for ‘image source’. The source is the html link for the image, which comes from where the image is uploaded and saved in the backend of your website. This usually is automatically placed in the ‘media’ folder.

There is also further coding that may be within that bracket. For example, if you want to optimise the image for search engines, it’s a good idea to have a description when you hover over it, called an ‘alt tag’ – short for ‘alternate text’. This would look like this:

http://image….” alt=”meeting with laptops”>

An alt tag is useful for a couple of reasons. It helps search engines like Google understand what the image is, which means it’s more likely to show in search results for ‘meeting with laptops’ for example. Also if any blind users are on your website the audio will relay the context of the image using the alt tag.

4. HTML basics: formatting text bold, italic or underlined

To you the text is just bold, italic or underlined. To a coder it’s one of the following:

• Bold: text some Squarespace websites often use
• Italic: text
• Underlined: text

A nice basic HTML that you can use for an online blog or page and easy to remember as b, i and u are all logically assigned to the first letter of what you are trying to do – bold, italic, underline.

These are also nice simple HTML codes to start practicing with. Give them a go in a basic WordPress template or have a go at viewing the source code – right click, view source code – on your favourite website to spot where these codes are and get used to translating how things look at the frontend and are coded are the backend.
 

5. Tidying your content structure with bullets or numbers

There’s nothing worse than an online article that is all words and no structure. You will notice that we have used bullet points in this article to help break up the content. While in the frontend they look like dots like this:

• Item 1
• Item 2
• Item 3

In the backend they are:

  
• Item 1


  

• Item 2


  

• Item 3

 
To help you remember this one,

 is short for ‘unordered list’
•  represents the ‘list item’. Simples. Well, hopefully it makes a little sense at least for now.

Sound like a language you can get behind?

HTML is basically coding slang or shorthand for logically founded instructions. To remind you of what we have learned today here’s a glossary of those codes:

• The H in
  

  = heading

• = bold
• = italic
• = underline
• = image source
• = unordered list
  • = list item

  There are so many other coding languages and intricacies if you want to learn HTML, but this gives you a little taste of how it all works in the magical hidden world of the world wide web.

  Still not sure if a career in coding is right for you? Take a look at our article on 5 top coding careers to get a taste of what it could be like to have a successful career in coding.