HTML5 Tutorial For Beginners

HTML5, or to give it its full name, Hyper Text Mark-up Language 5 is what is known as a markup language, and it is the latest release of HTML, the language that is used to build websites. Its predecessors are XHTML 1.0 and HTML 4.01.

In this HTML5 tutorial, we’re going to give you a short lesson in how to get started. This article is essentially, coding for beginners, especially those looking to learn how to design basic websites.

HTML5 – The New Kid on the Block

We all know how quickly the Internet has developed (and is continuing to do so), so it’s way past time that a new version of HTML came out to cope with the revolution in multimedia.

For example, HTML5 has been formatted with new video and audio elements in order to make it easier to include these innovations in the websites that you construct. Essentially, this makes the likes of portfolio pages and online stores much more interactive.

 What You’re Going to Need

The two things you will need in order to make a start are the latest versions of the popular browsers such as Google Chrome, and a good Notepad application to use as your text editor.

For the purposes of getting started we’re going to use Notepad++, which is an open source (meaning it’s free to download and use) software. You can also use an HTML5 editor such as Sublime Text 2, which has a free version and a paid.

Basic Terminology

The first thing you need to do is to understand the terminology HTML uses. So for our introductory exercise you will need to be familiar with the terms TAG, ELEMENT, and ATTRIBUTE. However, before you begin with HTML5, it’s really necessary for you to have a basic understanding of HTML and it’s common tags.

TAG

This is how the tern TAG is written: <tag> Basically, it is simply the word “tag” with a left facing angle bracket at the beginning of the word, and a right facing angle bracket at the end.

ELEMENT

This is how an element appears and is constructed:

The components of this element are the start or opening tag; the element (in this case “example document”, and an end or closing tag.

The element shown above is a “title element”, as defined by the text within the angled brackets. You’ll note that the End Tag has a forward slash before the word title. This differentiates and defines it as an End Tag as opposed to a Start Tag.

The majority of the elements used in HTML 5 follow the same pattern i.e. a Start Tag and an End Tag with content in between them. There are however some elements that only have a Start Tag.

Take as an example the following:

<br>

This is a line break element. It has no End Tag and its only function is to define where line breaks occur.

ATTRIBUTE

This is the last of the 3 terms that we’re going to be looking at in this short introductory HTML5 article. An Attribute acts in the same way that an adverb enhances a verb.

It attributes additional information about an element, hence the name “Attribute”. Below you can see how an Attribute is constructed. Let’s start with H1 element as depicted below. This element has no attribute.

<h1> Your text here </h1>

Note that all tags generally need to be closed thus: </>, not doing so could mess up the code for an entire page.

But if we wanted to give it an Attribute, it will be constructed as shown below.

<h1 id=”main”> Main Section </h1>

The Attribute itself is the id=”main” HTML5 component. You’ll note that it is always located within the Start Tag part of the Element.

The first part of the Attribute is the “id” and this is the name of the Attribute. The name is them followed by an equal sign, which is then, in turn, followed by the content, “main”, which must always be put within quotation marks.

There are other conventions that HTML5 will allow when construction Attributes, but for the purposes of this “getting started” exercise, this is the one we are using. It will always work.

Putting the Theory into Practice

Okay, so now we’ve got to grips with some basics, let’s now see them in action. Take a look at the screenshot below:

You’ll note that there are some indents shown in this screenshot. But please note that they are for cosmetic purposes only.

They don’t actually have any impact whatsoever of the layout of the text itself, as you’ll see further below. It’s just that some people find they make the instructions a little easier to read and to follow.

The screenshot above is an HTML5 document. We’re going to use this to put our theory into practice, and to see how it will appear in a browser.

Getting Practical

So to start, open up your Notepad++ and copy the data exactly as shown. Then we need to save it.

• Just go to File drop down menu in the top left hand corner
• Click to activate the drop down menu
• Select save as
• Save as First.html

If you get the message that you are not allowed to save the file in that location, you can save under documents, the alternative it should give you.

Now we’re going to check out your handiwork.

Still in Notepad++, click on the RUN menu at the top of the page. Select your browser of choice from the drop down menu, and hey presto, your browser should open displaying the document with the text “This is some text”.

To double check it’s not just smoke and mirrors. Take a look at the screenshot below. The one on the left is the browser window, and you can see it is called “first.html”

Live Modification

You can see from the screenshot shown above that text displayed in the browser window on the left-hand side is the same as that shown beneath <body> in the Notepad page on the right.

If we now enter another line of text below the existing line in Notepad, save the revised documents, and then refresh the document shown in the browser page (hopefully still got this open), you’ll see that the second line of text magically appears.

There are a huge amount of tags and other code and even scripts that you can use and a plethora of tutorials, reference guides and books. Whilst it may look a little daunting at first, now you’ve created a simple document, have a play around and add more to it, such as images, paragraphs and so on.

Your document should always include <!DOCTYPE html> and in the <head> section this is where information goes that the search engines look at. Everything in the <body> section is what you will see on the page in the browser and <p> is for new paragraph.

Common tags:

<b> – bold

<i> – italics

<br> – break for new line

Note that HTML, either 5 or otherwise uses American English so you should get accustomed to altering your spelling to suit, for example: color as opposed to colour

For Further Details

For a full explanation of all of the headings etc we typed into the HTML document, you can check out YouTube videos, or visit W3C Schools (the people who decide what the standard for code will be) for a host of reference material and exercises where you can practice coding in real time.

Once you are finished, you’ll be able to learn how to make your own website for free, using Word Press.