HTML5 Beginner's Guide

DIY website builders can help you quickly throw something basic together in a few hours.

And fully-fledged content management systems like WordPress, Drupal or Joomla can give you sophisticated features without getting your hands dirty (for the most part).

But being able to build a web page from scratch is a useful skill. Even if you have no plans of ever becoming a professional developer.

It’ll allow you to quickly (in minutes as opposed to hours) throw up a page to present basic information and capture visitor’s information.

Knowing how an HTML document is structure, and which tags do what, can help you quickly make minor tweaks or changes to your WordPress website without hiring an hourly developer.

At the very least, you’ll be able to speak to them intelligently about what’s going on and what you’re looking (avoiding endless back-and-forth or potential costly mistakes).

This guide will walk you through the basics of HTML (including the most recent developments of HTML5 and CSS3). There’s also a ‘HTML5 Cheat Sheet‘ below you can use to reference in the future.

Let’s get started!

HTML5 Cheat Sheet

HTML5 Cheat Sheet

Introduction to HTML


Basic websites are created with HTML, CSS and Javascript.

These ‘front-end’ technologies control a website’s appearance, structure, and function.

Years ago, these languages were more isolated and limited, where:

  • HTML describes the format of a document
  • CSS describes how the document should look
  • Javascript defines how they act

But things have evolved with HTML5. These languages are more integrated now,  allowing you to do complex things without using complicated ‘back-end’ technologies like PHP, Perl or Ruby on Rails.

They’ve also simplified things so that there’s less for beginners to worry about. For example, some HTML tags have been removed or taken away; merged into a single, obvious one (like <video>) which make them easy to remember.

The rest of this guide will walk you through these new developments.

But let’s use a common scenario to give you a practical example of how everything works.

Scenario: California Rock Band Needs a Simple Web Page


Charlie and the Roundheads is an Indie rock band from Huntington Beach, California.

They were recently signed to a record label, and their A&R manager (that’s biz-speak for Artists and Repertoire) wants a website up ASAP.

You just so happen to be the lucky individual tasked with this assignment.

Here’s what the site needs:

  • Blog posts for tour information
  • Some method for fans to sign up for email updates
  • Add music streaming files
  • And a place to display music videos

Oh… and your code needs to use the latest version of HTML5 so it’s modern and current.

No pressure.

This might sound daunting at first.

But trust me, it’s not.

In the next thirty minutes, you’re going to learn how to do ALL of this and more.

Step #1. Start by Downloading a Good Text Editor


Before even discussing a single HTML tag, you’re going to need a place to write it.

Microsoft Word or Apple’s Pages are good for writing letters and documents. But word processors like these can’t handle HTML.

Sure, they can try. But many times you’ll get superfluous information (or random additional elements) added that will screw up your formatting. That means when you eventually open the page in Chrome, Safari, or… whatever Internet Explorer is called these days, it will look disjointed and messed up.

Instead, we need to create bare-bones (or ‘plain text’) files.

These files are created with Text Editors, like Notepad on Windows.

You could actually use that if you wanted to. However we wouldn’t recommend. Programmers and web designers should use text editors specifically designed to write code.

Choosing a Text Editor


If you’re on Windows, you can check out Notepad++ or TSW WebCoder.

Some distributions of Linux come with Gedit, which is also an excellent text editor choice.

While TextMate is a great choice for Mac users.

For this tutorial, I’m going to be using Sublime Text 2, which is available on OS X, Linux and Windows (although they also have a new version, 3, currently in beta).

It’s a great, paid, all-around text editor that comes with an unlimited free trial.

Please download and install it now before we get started diving into writing your few few lines of HTML.

How HTML Markup Works


HTML stands for Hypertext MarkUp Language.

It dictates the structure or layout of a web page.

(However it does NOT add any visual aesthetic or interactivity. CSS and Javascript are responsible for those. We’ll dive into them later.)

First, let’s look at structuring our document.


Create a new folder where you’re going to store all your code. Open up your freshly installed Sublime Text 2 and create a new file.

Save it with the text extension “signup.html”, and make sure it’s stored in the folder that you’ve created.

Ready? Now, let’s add some code.



Don’t worry. While it seems daunting at first, what you’re looking at here is a boilerplate starting point for virtually all websites.

That means you get to copy & paste. Hooray!

You’ll notice that you’ve got two < html > tags surrounding everything else. Then in between those, a pair of < head > and < body > tags. What do they do?


Well, < head > is where you store things like Meta Tags.

That’s where you list the title of your page, any external CSS and Javascript files to reference, as well as additional information to help get your site noticed in search engines.

(If you’re familiar with older versions of HTML, you’ll notice some elements like ‘charset’ have now been simplified and included in meta tags too.)

< body > is where everything else goes. The rest of this guide will explain what. But first, let’s think about how websites are structured.

If you visit the websites of any news organisation like The Guardian, The BBC, CNN or Fox News, you might notice that they share some features in common.

They ALL have headers, footers, articles, and sidebars. (They often also have boxes containing related information, but these aren’t an integral part of an article.)

There are HTML tags that dictate all of these common page element, giving you a way to logically organize code to make it easy to understand and follow.

Best of all, this Semantic Markup means that the tags you use sound exactly like what they do. Here’s what I mean…

Step #2. Understand the Foundation with Structural Elements

As you’ll hear numerous times, HTML dictates structure or form.

So these common elements, like the header or navigation of a website, are all specified by HTML tags that sound exactly like their name. These are also the elements that will  be placed inside the < body > tags that we looked at a second ago, that begin to spell out what each page will display.

HTML elements

Here are the most common.


The < Header > is typically where you’ll store the logo for your website.


< Nav > is for the navigation bar, or primary website menu, where you’ll place links to the main pages of your website.


The < Article > tag contains standalone pieces of content, like individual blog posts, news items, videos, or images.

Think of it this way… if you have a number of content items, each would be suitable for reading on their own. So it would make sense to syndicate each as their own separate RSS feed item for example.



The main content on a page is typically located in-between < Section > tags. Think of these like a chapter in a book, where each encompasses a group of information. That means your < Section > tags can contain multiple articles, diagrams, images, etc.


< Aside > is a useful tag for including related information that helps explain (but isn’t required) the context around your page topic. It’s typically used to create a small sidebar in the content for related text or links.


The < Footer > is where you store contact information, copyright information and sometimes a couple of additional links like Terms of Service or Privacy Policy.

Still with me so far? Good.

Each structural element looks and sounds exactly like what it does. So they’re easy to remember.

Now that you understand the basic layout of an HTML document, let’s create our first page.

Step #3. Create Your First Web Page with a Blog Post

The basic element of any web page is content.

Content can mean simple text-based information or multimedia files like images and video.

Going back to our example earlier, the Charlie and the Roundheads website needs to display the latest tour information so that their fans know exactly where to find them next. You can easily create this with a simple blog post, creating a place for the band to quickly jot down a few notes to publish within a few minutes each.

So let’s create a blog post document in our text editor called ‘Index.html’.

P.S. If you just want to create a blog without messing around with HTML, check this step-by-step guide.

We’ll start by adding the same boilerplate as before, in order to set-up the basic foundation and structural elements we’ve learned so far.

Next, we’re going to add an < article > tag, which we’ve just learned is created specifically for blog posts and news articles. Then inside of that, we’ll create separate paragraphs using the < p > tag. (Get it? ‘P’ for Paragraph.)

Then drop in some placeholder content called ‘lorem ipsum’, which is admittedly a bunch of nonsensical Latin used to simply block out places where text will be changed at a later date.



Once you save the file and view it in your favourite browser, it will look something like this:


Pretty ugly, am I right?

Let’s take care of that now by adding some style.

Step #4. Adding Typography to Your Website Content

The word ‘typography’ probably brings back memories of arcane information you learned in grade school about printing presses.

But in this case, it refers to the ‘art of arranging and stylizing text’ to make your website content more attractive (not to mention, easier to read).


While that sounds simple in theory, it actually gets very complex and sophisticated.

However, you don’t have time for that. So let’s skip all the theory and jump straight into making our text look good.

Your computer and web browsers will come stocked with their own fonts. (You’ve probably already seen and used many of them when creating a document in Word or Pages.)

Design-geeks have also created their own libraries of custom fonts that you can use online. Many are beautiful, distinct, and best of all — free. Google Fonts, for example, contains a ton of free, elegant font styles to choose from.

Let’s use one of my favourite, Droid Sans, to give our first blog post some personality.

How exactly? CSS.

CSS makes your page structure (or HTML) look good, allowing you to control the visual aesthetics of the page.

It works by selecting elements in a page (like the < Body >,< P> or < Section > tags), and then adding rules. So, let’s select all of the content within the < Section > tags and give all of it the Droid Sans font style.

Open up the HTML file you’ve created so far, and copy & paste this following line in between your < head > tags:

< link href=’’ rel=’stylesheet’ type=’text/css‘ >

This link will reference the font you want to use (in this case, Droid Sans), specified by your CSS document.

Now create a new file called style.css and add this:

section {

font-family: 'Droid Sans', sans-serif;



Congrats! You just styled your first page with typography. Here’s what your default text should look like now:


Already a little better.Now we’ve got some housekeeping to do. We need to add links to each page, add some backgrounds and add some borders. The last chapter will look at aesthetics in closer detail.

However, most websites have additional design basics like colors and borders. Here’s how to add that stuff too.

Step #5. Adding Colors, Borders and Other CSS Basics

The Charlie and the Roundheads‘ site is starting to come together.

But beyond the first blog post, we’re going to want to add a few more pages and give it some color so that it resembles a fully-fledged website for fans.

First up, let’s create a navigation bar for visitors to easily click from page to page. There’s going to be a lot going on here, but it’s pretty easy if you can follow along.

  1. Above the < Section > tag on each page, we’re going to create a new < Nav > tag.
  2. And inside of that, we’re going to create an unordered list. This is identified by the < ul > (which is simple ‘Unordered List’ abbreviated). Unordered lists are like bullet points, where as ordered lists include numbers to show sequence or priority (like this one you’re reading right now).
  3. Inside of the new < ul > tags, we have < li > tags for each line item or bullet point (in this case, signifying new pages).
  4. Because this is going to be a navigation menu, each page will need to link out with a URL. These are added by using the < a href > tags. Here’s the format for those: <a href=”yourpageurl.html”>Your Page Name</a>.

When all is said and done, yours should look like the < nav > element listed below:


As you’ll notice, each of those navigational tags (or pages) are cascading downwards. However, if you think about most website navigation menus, they’re all listed out horizontally in one single line.

So let’s change that.

Go back into the CSS file you just created and add the following lines.

li {

display: inline;


While we’re in the CSS file, let’s edit the blog text to give it a little extra oomph.

Specifically, let’s give the font a fixed width of 640 pixels, a thick, shaded border, and some background color too.

So, let’s edit that CSS file again. We’re going to add the following lines. While most should be relatively self-explanatory, the #CCFFFF is a hex color code .

article {

border-style: solid;

border-width: medium;

background-color: #CCFFFF;

width: 640px;



Last but not least, let’s add a uniform background color that will appear on all of our pages.

Because we want this to appear on ALL pages, we’re going to create a selector for the < body >.

Solid block color backgrounds don’t look too hot. Textured backgrounds do. Let’s go to CSSMatic and generate a texture that we like. Play around with the settings until you’re happy, and then click ‘Download Noise Texture’.


Now, we’re going to apply this as a background. Let’s dive into our CSS file and add a selector for ‘body’. We’re also going to apply a background from image. Before moving forward, please make sure that your image is in the same directory as your HTML files.


Once edited, your page should look like this. As you can tell, there’s a lot more to do from here. This was just a very basic look at editing and designing content with CSS & HTML5.

If you want to build a site using WordPress, head over to my homepage.



Now that we’ve learned about the different kinds of semantic markup that HTML5 has on offer, we’re going to use some of it to add some of the features required for Charlie and the Roundheads’s website. And where better to start with than a form?

Since we’re not adding a blog post or a news story, we’re going to use the Section Tag. It is here where we’ll write the code for our forms. Before we continue, it’s important to add a caveat that in order to do anything really useful with the data from our forms, we’ll have to use a back-end technology. Those are a little bit out of the scope for this article unfortunately. However, if you’re interested in back-end technologies, look into PHP. It’s easy to get started with, and is used by millions of developers worldwide.


But first, let’s talk about the data we’re going to try and record. Charlie and the Roundheads will want to keep in touch with their fans by email. They’ll also want to know where they should go on tour, so it might be a good idea for you to collect ZIP/Post codes. Finally, fans might want to leave a message for the band.

With this in mind, let’s start work on our first form, and bring in concepts from HTML5 as we progress.

Forms consist of labels, inputs and buttons, and are surrounded with < form > tags.


The first input we’re going to accept is for an email address. To do that, we add a tag of < input > and do not close it. We’re going to preface this with ‘Email : ‘.


emailsThis isn’t an issue anymore. You simply give your ‘input’ tag a type of ‘email’, as seen in the example below.

Before HTML5, you would have just accepted any old input, and then would have written some code to make sure that the information you had received from the user was a genuine, legitimate email address. That was time-consuming and tedious.


We also want to make this a required field, so we’re going to give it another attribute of ‘required’. Should a user attempt to submit this form with the email field blank, it will respond with an error message saying “Please enter an email address”. It will also do this if the user tries to submit something that isn’t a valid email. Finally, we should also give it a name to identify the field, should we end up writing some back-end code. This is done by adding an attribute of ‘name’ with a value of ‘email’. This is demonstrated below.


Now, let’s go ahead and add the fields for zip code and for the message. As I’m sure you imagined, you can’t use a type of ‘email’ for these. So, what do we know about Zip codes? Well, they’re always represented by a numerical value. Can you guess the type for that? That’s right. Number.


Finally, let’s look at how we’re going to accept messages. As I’m sure you’d expect, Charlie and the Roundheads have a lot of fans who might want to These break with tradition somewhat and don’t use the input tag, but rather something else.


The < textarea > tag is used for when your input is likely to span multiple lines.

Whilst this would be appropriate for a message from fans, it is less so for things like emails, passwords and names.

< textarea > can take a whole bunch of attributes. We’re interested in four of then. Firstly, we want to give it a name. We also want to define some rows and columns; these specify how large the text area is going to be. Finally, we want to define if it is required or not.


With this in mind, I’ve decided to give it a meaningful name and make it reasonably large. I don’t want to make it required, as I don’t think that every fan will want to leave a message for the band.

What we’re left with is not exactly pretty. Don’t worry about that. We’re going to make it look good later, but first we’re going to look at adding rich media to our website.

Music and Videos


It used to be that to if you wanted to add music and movies to a web page, you’d have to rely upon a bulky, slow framework such as Flash or Silverlight. HTML5 has effectively thrown these out and replaced them with something much better.

For the next bit of Charlie and the Roundheads’ web page, we’re going to create somewhere for them to publish and share music and videos. This sounds complicated, but it’s actually really easy.

But let’s first talk about dreaded codecs.

Here’s an < aside >:

A codec refers to compression / decompression, which is simply an algorithrm used to help you (1) intially make large files smaller for easier  storage and transfer, then (2) making the file larger again when someone views it.

As I’m sure you know, there are a huge amount of web browsers on the market right now. There’s Internet Explorer by Microsoft, Chrome by Google, Firefox by Mozilla, Safari by Apple and Opera by… er, Opera.

Each of these handle playing music and videos slightly differently. For example, whilst Internet Explorer is capable of playing music and video encoded with the H.264 MOV codec, it cannot use the Theora codec which is favored by Opera and Firefox.

So, how do we get around that? Well, there’s no clever trick really. We just have to encode our music and movies in a whole bunch of different ways.


So, let’s get started. Create a new file using the same HTML5 boilerplate we used before. Let’s also add a section semantic tag.


Now, we’re ready to add some music and videos. But first, would you like to hear what I really love about HTML5? It does what it sounds like. Not sure what I mean?

Okay, would you like to take a guess at the tag for adding videos to a page? Yep. Video.


So, now we need to add the video files. All we’ve done here is add a container for them. So, given what we know above, we’re going to add H.264 MOV and WebM8 media. As an added bonus, we’re going to have a placeholder so that should someone visit the page with an old web browser, they will see a message informing them that they ought to upgrade to something more modern.

Adding a video is easy. You just type in a < source > tag for each video you wish to embed. Fallback messages don’t need to be in a tag, either.


We also want to have some music. Unlike video, there are only two codecs you should care about.


As you’d expect, the tag for audio is < audio > and you can add your sources in the same way you did with movies.


notepadNow that we’ve got that sorted, we’re going to tackle the last requirement for Charlie and the Roundhead’s website.

Let’s quickly recap what we’ve learned so far. We’ve introduced semantic markup, HTML5 forms and embedding rich media.  This won’t take long.




This was a brief foray into web design using HTML5 technologies, as well as some standard HTML and CSS techniques. Whilst I hope I’ve effectively taught you about the basics of web design, I’d be even more pleased if you came away from this article confident with the knowledge that creating beautiful web pages is within your grasp.

And oh, if you wish to download the Roudheads website files, click here.

Update 2016, Feb: People behind put together an video that explains all the steps listed in this article in this awesome video. You can see it below.

Update 2016, June: HTML5 support can differ significantly from one browser to another. There is even a site that helps web developers to find out which feature is supported. It’s aptly called “Can I Use“. A big “thank you” for the addition goes out to HTML5 veteran Ted Goas –

  • +


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  1. Hey Robert,

    I started to get myself into webpage building. Your tutorials help a lot!
    I managed to install WordPress – and it’s working perfectly fine – props for that.

    About HTML5, I’m having a lot of fun with it. My question regarding it, is how can I make it visitable by people?
    Because now it’s really just a HTML file on my computer isn’t it.

    Thanks and keep up with the good work!

    Best regards,

    • Hi Sara,

      Thanks for the kind words. You’ll need to upload the html files you hosting company server. Once that’s done, they’ll be visible for visitors.

    • Hi Robert, Thanks for putting together these pages – they are great, and just what I need to get going on my project. I am also trying to decide whether to go for WordPress or HTML. I have coding experience, but not recent. Does WordPress produce an editable form of HTML that you can play with? I have worked with code generators in the past which are “editable in theory” i.e. they produce editable code but it is very difficult to work out what is actually going on :-).
      Many thanks,

      • Hi Liz,

        Thanks for your comment. WordPress does have an option to make HTML on single pages and posts… If I were you, I’d play around with WordPress a bit. It’s pretty cusotmizable and cool to edit. Worth trying it out 🙂


        • Hi Robert, Thanks for your tutorials. I’m a serious newbie to HTML5, CSS, Java, but saw an effect the other day on a website I’d love to recreate. There was a background wallpaper, and the text seemed to be on a transparent ground, so you could scroll the text over the top of the wallpaper. How is that done? Would love to use it on a website. Thanks, Dianne

  2. One of the best guides I’ve seen for, thanks for sharing.

    I’m still confused though about what is better: I’m writing HTML at the moment but I’m confused about what is better: a CMS (WordPress) or raw HTML? I believe the answer is “it depends on what you want to do”. If you want to update it everyday you need a CMS. Otherwise you can do whatever you want. But still … I’m a bit confused.

    • Hi Stefanos,

      Thanks for your kind words. Great question too.

      In short, if you want to build a decent site quickly and you don’t have much previous coding/designing experience, hands down – go with WordPress. There’s a full tutorial on my homepage –

      If you want to learn the basics of web development, try messing around with HTML5. At first you obviously won’t be able to create something really awesome – as it takes time to learn HTML5, but eventually you’ll get the hang of it.


  3. Hi there! Found this awesome guide, how lucky am I? ;D

    I just have a short question: I made my own website using HTML5 and CSS3 and so now I want to upload it to the internet. I have bought myself a domain-name ( and have signed up/uploaded the files to a hosting client. (

    However, is there anything else that I have to do in order for it to work?


    Björn Steck

    • Hi Björn,

      Now you’ll just need to change your domain nameservers to your hosting nameservers. You can ask this information from your hosting support. It should be easy 🙂

      Hope that helps,

  4. Thanks for the awesome guide, I was so lost when I first tried HTML but I’m starting to get the hang of it, the only problem is I cant get the CSS file to change the attributes of the HTML files. I was wondering if you could help?
    Thanks in advance! 🙂

    • This guide has a small little mistake in it. He copied the same css-line two times. So instead of writing two times, write one.

      and then save your css-File to style.css


  5. By the way, thank you for taking the time to put this together. I needed to get familiar with sections and articles, and this tutorial was very helpful.

  6. Thank you for this great guide, I was wondering, can you make an advanced html guide? I’m trying to learn everything about html to start a business creating websites. Thank you so much for writing this out.

  7. Hi Robert,

    I’m starting out developing a website using wordpress but ultimately may try and recreate/improve the end result using HTML&CSS in the future (trying to get into development!). If I make a website using wordpress and then create something better with HTML5 will it be possible to use my HTML version with the same host on the same domain? (hope that made sense!)

  8. Hi Robert,
    Thank you for helping us all learn HTML5 🙂 I had a quick question for you. I want to build a website using WordPress. I’ve found a few themes that work with the design I’ve created, installed them, but all of the source files for them are in php, which I am, unfortunately, not very familiar with. While I realize that I should probably catch up on that, would you say that I should just keep looking for a theme that’s HTML-based? I haven’t been able to find a single theme that has html files in it at all so far.
    Thanks again!

    • Hi Alisa,

      Most WordPress themes can be edited with a little knowledge of HTML & CSS in the back-end. But if you’re starting out, I realise that this can be a pain. What I’m suggesting you is to pick a free or paid theme that is somewhat suitable for you. Then, when you log in to your WordPress site dashboard, you can tweak it a bit under “Appearance -> Customize” 🙂

  9. This guide helped me a lot. Please make an advanced tutorial series for HTML5 too.

    I would prefer learning from you rather than reading boring traditional texts written by old monks.

    Will be waiting for it!

    – Pingal

  10. Thanks so much for this article. I’ve dabbled with learning HTML/CSS with Code School and Codeacademy, but with these you create code in-browser. I didn’t fully understand how to make my own website using a popular text editor such as Sublime Text.
    I did have a question about the zip code submit on the signup page. Could you use the pattern attribute? Like:

  11. Hi Robert
    I’m looking for a change in career and am considering web design as a future path and I’d like to ask,as I am an absolute beginner and nearing my 40’s,where would be best to start and is it ever too late to start a career in and make some money doing web design.
    Regards David

  12. wooooooooooooooooooow
    you really wowed me lol. I am a learner but now I am feeling like competing with you kkk joks.

    can you please make some more advance tutorials like this.I THANK you for making your time for all of us.

    I have two questions though.

    1. Is it possible to create forms with image field ?such that readers can submit their image.

    2.How can I direct my web visitors to the very music I want them to download ?

    I really enjoyed Robert, we all cant thank you enough, it takes a BIG heart.

    • Dont worry Tom, there was a mistake in step 4 but I did have someone to help me through that. I am a complete novice()and blonde) and if I did not have someone to help me though this I would be in your shoes. However, once you start understanding what you need to do it becomes clearer. Do not give up!!! All will be revealed eventually.