Free HTML5 Tutorials – A Beginners Guide
HTML (HyperText Markup Language) has gone through many changes over the years, as has the journey of web design and development in general.
The latest iteration of HTML – HTML5 is what I will cover here, along with its partner-in-crime, CSS3 (Cascading Style Sheets). With the move to more responsive (mobile-friendly) web design, coding to the latest standards becomes even more important.
Introduction to HTML5 – the Beginner’s Guide
This starting point assumes you don’t know much about HTML and you’d like to know more. It is intended as a total beginner’s guide. So, let’s begin!
HTML is not a programming language, although it can be combined with other languages such as CSS and JavaScript to create web applications. HTML is primarily a way to mark up different regions of a page for formatting later.
To get started in learning HTML you only need a few basic tools:
- A text editor: Windows comes with Notepad, Mac comes with TextEdit and other systems reliant on Linux come with their own editors such as ‘Nano’.
- A browser – any browser will usually do, but make sure that you’re using the most recent version because old browsers often don’t support the latest coding standards.
There are numerous code editors out there. People in my office use whatever they are most comfortable with (I work in a design agency), but some free examples we have used are
- Atom (my choice)
- Brackets
- Komodo Edit (I have used this one in the past)
- NotePad++
- Sublime Text
The advantage to a better text editor than the one shipped with Windows or Mac OSX is that you can get syntax highlighting, line numbers and error checking, among other things. Some editors will also help auto-complete some of your code to save you remembering.
HTML5 Foundation – Tags
HTML is formed using what are called tags – named ‘labels’ for certain things in a web page. Many of these tags require you to indicate where an element on your page begins (an ‘open tag’) and where it ends (a ‘close tag’).
<article>This is an article tag</article>
So here you can see that we have an <article> tag, which indicates the start of an ‘article’ on a page. Then we have a sentence of written English followed by </article>, which indicates the article has now finished.
This methodology happens a lot in HTML5 and as you build your first HTML page through these HTML tutorials you will notice many open and close tags. For this reason it is better to type both your open and close tag at the same time and then put whatever goes between them. Get into healthy habits like that and you should save yourself headaches further down the line.
A Note About New Lines
Unlike a word processor document, entering new lines or multiple spaces has no effect on your final document. This allows you to space your code out to make it readable and understandable for you.
A Basic HTML5 Layout
So that’s a quick introduction to what HTML5 is used for, how to kit yourself out ready to learn HTML and the role of tags. In the next tutorial we will be building a very basic HTML page and displaying it in your browser.
For now here’s an example of a basic HTML5 document, take a look and spot
- Tags which have open and close tags
- Tags which have no close tags
And we’ll see you for the next HTML5 Tutorial!
<!DOCTYPE html><html><head> <title>Welcome To Your First HTML Page</title> <script type="text/javascript"> function exampleFunction(){ //do nothing } </script> <style type="text/css"> </style> <link rel="stylesheet" href="/link/to/css.css"></head><body> <header> Site Header </header> <article> Your page's main content goes here </article> <aside> Useful for sidebars, or other less-important content </aside> <footer> Indicates a footer, of a page or a section </footer></body></html> HTML Tutorials for Beginners With Examples
All our HTML Tutorials come with code examples you can copy and paste into your own web pages. Sometimes we’ll just given an example of the code and sometimes we’ll show screenshots of the output. If you think an example is missing, please get in touch, and I’ll do my best to add in your request!
More HTML5 Tutorials
Spread the Word
