HTML5 Tutorial for Beginners: Creating a Simple HTML5 Webpage in 30 Minutes

html5tutorialforbeginnersIf you ask a web developer, he’ll probably say that HTML5 is the greatest thing to have happened to humanity since the invention of Nerf guns the printing press. HTML5 helps you create powerful, interactive web pages and applications packed with the goodness of CSS3 and jQuery. It is used in every new website/web app and is an essential skill to learn for any web developer. You can master HTML5 programming the easier way by taking this popular course from Sushant Das.

In this HTML5 tutorial for beginners, we will create a simple, barebones webpage using HTML5.

What You’ll Need

  • Some familiarity with basic HTML tags such as
    ,, and.
  • A basic knowledge of CSS.
  • A text editor such as Notepad or Notepad++. You can also use a professional web editor like Adobe Dreamweaver.

Creating a Simple HTML5 Website

The best way to learn something is by actually doing it. With that in mind, we’ll jump right into this tutorial and create our very own HTML5 website.

First, create a new document in your favorite text editor. We highly recommend Notepad++, a free alternative to Notepad.

In the blank document, copy and paste the following code:

<!DOCTYPE html>
<html lang=”en”>
<head>
        <meta charset=”utf-8”>
        <title>Awesome HTML5 Webpage</title>
        <meta name=”description” content=”An awesome HTML5 page YOU built from scratch!”>
        <meta name=”author” content=”Udemy”>
        <link rel=”stylesheet” href=”style.css”>
</head>
<body>
        <div id=”wrapper”>
                <header class=”main_headline”>
                        <nav>
                                <ul>
                                        <li><a href=”#”>About</a></li>
                                        <li><a href=”#”>Services</a></li>
                                        <li><a href=”#”>Products</a></li>
                                        <li><a href=”#”>Contact</a></li>
                                </ul>
                        </nav>
                        <h1>Super Duper Awesome Headline! </h1>
                </header>
                <div id=”primary_content”>
                        <section id=”left_column”>
                                <h3>A Hitchhiker’s Guide!</h3>
                                <p>To the Galaxy!</p>
                        </section>

                        <section id=”right_column”>
                                <article>
<header>
<h3>The Answer to Life?</h3>
<p>Published: 30 August 2013</p>
                                        </header>
                                        <p>Douglas Adams, when asked: “What is the answer to life, universe and everything”, replied:</p>
                                        <blockquote>”42”</blockquote>
                                </article>
                        </section>
                </div>

                <footer>
                        <p>The Footer is where all useless info goes!</p>
                </footer>
</div>
</body>
</html>

Confused? Don’t worry. We’ll look at every line of code in detail below.

Skip the learning curve by taking this FREE course on learning HTML5 programming from scratch!

Understanding the HTML5 Code

Let’s start with the very top:

The Header

<!DOCTYPE html>

This simple tag basically tells the browser that “Hey, this is a HTML webpage, so you better render it correctly!”. With HTML5, this tag has been made extremely simple. If you were to use HTML4, you would probably have to write something like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" “http://www.w3.org/TR/html4/loose.dtd">

Quite a mouthful, right? This is why HTML5 is the best!

<meta charset=”utf-8”>

The meta character set tag directs the browser to use the appropriate encoding. Don’t bother yourself too much with this tag except for making sure to include it in your webpage!

<title>Awesome HTML5 Webpage</title>

The <title> tag should be familiar enough – it’s the text that shows up at the top of the browser window. This tag is crucial for SEO, so make sure to get the keywords right.

<meta name=”description” content=”An awesome HTML5 page YOU built from scratch!”>
<meta name=”author” content=”Udemy”>

The first meta tag, as you might be aware, gives a brief description of the webpage. Although it has no real SEO benefits, search engines often display this description in search results, so it’s a good practice to include it in your websites.

The second meta author tag tells the browser about the page’s creator. Here, we’ve used Udemy, but you should use your own name or your company’s name under “content”.

<link rel=”stylesheet” href=”style.css”>

There’s little change from HTML4 to HTML5 in the link tag which is used to connect external files. Here, we are using the tag to refer to an externally stored CSS stylesheet, style.css.

That’s it for the <head> section. Now let’s take a look at the <body>!

The Main Content

<div id=”wrapper”>

<div>, as HTML4 veterans would know, is a tag used to identify any particular part of a webpage. A div can be as big or small as you want – it can include an entire webpage, or just the first line of a paragraph. Here, we’ve created a <div> with a CSS ‘id’ of “wrapper”. This wrapper specifies the width of the entire page and holds all the content.

Worried about site widths? Master responsive web design with this course and make your website look good on any platform!

<header class=”main_headline”>
<header> is  a new tag in HTML5. Although it doesn’t have any particular function, it makes for a more semantic webpage. Include the <header> tag whenever you’re referring to any header – the main headline, sub-headline, etc.

Here, we’ve also assigned the header a class of “main_headline”.

[Note: The difference between ‘id’ and ‘class’ is that an ‘id’ can be used only once on a webpage, while a ‘class’ can be used as many times as you want.]

<nav>

Keeping with HTML5’s mission for creating a more semantic web, the <nav> tag was introduced to refer to the navigation menu. Like the <header> tag, it has no functional value except for identifying the navigation menu and making for easier custom styling.

After the <nav> tag, we’ve used a simple unordered list to create our menu items. This should be familiar to anyone with prior HTML experience, so we won’t go further into it.

<div id=”primary_content”>

Another <div> to identify the main content area as separate from the header, and for applying custom CSS.

<section id=”left_column”>

<section> is another new tag introduced in HTML5. As the name suggests, it is used to refer to any section of the webpage (here, a floated left column). Functionally, it is the same as <div> but has more semantic coherence.

<article>

This is a HTML5 that refers to any standalone piece of content on a webpage. Usually, this includes blog posts, articles, forum posts, etc. You can use it just like a <div>. Here, we’ve used it to refer to the main content of the webpage.

<footer>

<footer> is another semantic HTML5 tag used to identify the footer area. Although you can use a <div>, <footer> is easier to read, both for browsers and fellow developers.

So that’s it! You have now made an HTML5 webpage!

Save your page as “index.html” on your Desktop (make sure that you select ‘All Files’ instead of ‘Text File’ in the save dialog box if using Notepad). Double click to open it in your browser. If you did everything as above, you should see the following webpage:

Not very pretty, is it? For that, you’ll have to use CSS to create the custom stylesheet (style.css) we linked to in. Basic CSS is quite easy, and the popular CSS and CSS3 crash course will help you master it.

So that is for our HTML5 beginner’s tutorial. Creating a simple page is just the starting point; HTML5 can help you develop incredible apps, interactive webpages, and more.

What is your favorite way to use HTML5? Share it in the comments below!