Basic HTML5 for absolute beginners. Learn to build a website!

Hypertext Mark-Up Language, or HTML, is basically a language used between computers so that they can communicate with each other. Websites are stored on a server, which when requested by your internet browser, sends the website information from the server to your internet browser so that you can access the information.

Whilst there is numerous mark-up and programming languages which are used in the development of websites, the basic structure of a website is created using HTML. The appearance of that information, such as colors, positioning and such is performed by using another language called Cascading Style Sheets (CSS).

So what is HTML 5?

HTML 5 is an updated version of HTML. Whilst it serves the same purpose as HTML, it has had some functionality added and some removed. The elements that have been added assist in making your coding semantic, which in turn make it easier for search engines to read and rank the website contents.

Semantic mark-up means that the coding is more logical. It is easier for developers to read and it is easier for search engines to read.

For example, in the past to code a footer onto the web page using HTML we would write a line such as:

<div class="footer">Copyright 2015</div>

This would allow us to use CSS to style the class "footer". However, with HTML5 and the emergence of semantic mark-up, we now have an element called footer. Therefore, using HTML 5 that same line of code would instead look like this:

<footer>Copyright 2015</footer>

Other semantic elements added with HTML5 include:

<header>

<nav>

<section>

<main>

<article>

<aside>

<footer>

Each element has it's own purpose. Some are self explanatory, others you may be left scratching your head wondering "What on Earth is that supposed to mean!".

Header

The header element is quite self explanatory, but we will explain it anyway because there are some aspects of it that even those experienced in HTML may not know. Header is a container that usually sits at the top of the page, it contains things such as a logo, a heading, a page title and possibly a navigation menu. The not so widely known fact is that the header element doesn't only have to be used at the top of the page, it can be used to also hold a header for another element further down the page.

Nav

Nav is used to contain the navigation menu, which is made up of links to the other pages on the website.

Section

The section element should be used to contain parts of the page which you count as sections. For example, if you have a section on your web page that has an announcement you could wrap this in a section tag as it is a section that is to be presented as a standalone object on the web page.

Main

The main element is just that, the main part of the web page. Headers, sidebars and footers should not be displayed inside the main element - only the main content of the page. For example, if your writing an "about me" page you would have your header, nav, footer and maybe a side bar as separate elements. Your main element would be the part that contains all of your information about you.

Article

Article is used to display a standalone piece of content. This could be something such as a blog post or anything else which would still make sense if it was not on that web page, but on its own page.

Aside

An aside element is also used as a standalone element, however, it must be in relation to the content that is surrounding it. For example, it could be used to contain a group of links that are associated with the main content of the page.

Footer

The footer element is used to contain the information that you wish to display at the bottom of your page on every page. Usually this will include copyright information and possibly some further information about the website author or links to policies and such.

Below is a basic HTML 5 template that you can copy to get started coding.

The important parts to note:

• We need to declare the document type as html so that it can be read
• Information in the head of the document is not displayed on page. We use this to link to other scripts our page might need to function, to link to our CSS file and to set the page title (displayed in the tab above your browser address bar), along with many other possibilities.
• The information that we want displayed on our web page has to be between the <body> and </body> tags.
• H1, h2, h3 etc. are heading tags. They indicate the importance of the heading, with heading 1 being the most important.
• The p tag indicates a paragraph.
• The ul tag indicates an un-ordered list, a list that is not numbered. If we wanted our list to be numbered we would use the tag ol.
• Within our list, we then have li elements. These indicate that each of those are an item in the list.
• <a href=..... this is used to make a link. Between the quotation marks we place the link to the page we want to link to. and between the angle brackets we place the text will be displayed on screen. For example <a href="this is the address of the page we are linking to">This is the text that will be displayed on screen, it should explain where the link will take us</a>.