Coding Tips: Our guide to HTML for beginners

For coding newbies, HTML can be intimidating. It looks complicated and viewing the source code of a website can be confusing. But you can get to grips with it.

We can help take away your HTML backend fears with some HTML basics.

Here’s 5 basic HTML codes translated into English to help you understand the fundamentals.

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 lay terms, it’s the basic coding language used to create websites. Back in the day when the internet was a pipedream and computers were so big that they required an entire room, was common to manually create websites using HTML language.

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. A subheading like the one above this sentence is 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.

If you then want smaller titles within your main content paragraphs, the numbers continue and usually represent smaller headings – h3, h4, h5. It’s very similar to how you format an MS word document properly and use contents pages.

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 </code> at the right point in the copy or on the page.

So for headings you would have…

<h1>The title of your article or page</h1>
<h2>The sub-header of your page or article</h2>
<h3>The smaller header within this section</h3>

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.

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 <a href=”http://www.learningpeople.co.uk/career/digital-marketer”>marketing courses</a> 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 <a href=”http://www.learningpeople.co.uk/career/digital-marketer”target=”_blank”>marketing courses</a> 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, but from a coders point of view in its basic form it looks like this:

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:

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: <b>text</b> some Squarespace websites often use <strong>
Italic: <i>text</i>
Underlined: <u>text</u>

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:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

To help you remember this one:
<ul> is short for ‘unordered list’

<li> represents the ‘list item’.

Does this 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’ve learned today, here’s a glossary of those codes:

The H in <h1> = heading
<b> = bold
<i> = italic
<u> = underline
<img src> = image source
<ul> = unordered list
<li> = 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 on the world wide web.

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

Contact our expert careers consultants today who can help match you to a course package that will enable you to land your dream career.

Topics:

Code

Quick enquiry