HTML Beginner's Tutorial Step-by-step Introduction to HTML and creating a simple page.

These days, if you want to build a website, you have several different ways of doing so. DIY website builders can help you quickly throw something basic together in a few hours while fully-fledged content management systems like WordPress, Drupal or Joomla give you sophisticated features to build complex websites without the need for technical knowledge (for the most part).

However, there is also still the old-school way: writing websites in pure HTML, which is actually how the Internet started out. However, still today there are very good reasons to acquire at least basic coding skills and in this HTML beginner’s guide, we will help you acquire them.

In the following, you will learn what exactly is HTML and the benefits of using the markup language to build websites from scratch. After that, we will show you how to do so with a concrete example. You will learn how to create an HTML document, fill it with content, make design changes, add navigation, web forms and rich media like videos and audio files.

Before you start developing an HTML website, keep this handy HTML5 Cheat Sheet next to you.

Let’s Start With the Basics: What is HTML?

HTML stands for Hypertext MarkUp Language. If that doesn’t really tell you much, don’t worry. All you need to know is that it is one of the main ingredients of any website and one of the so-called front end languages.

The frontend is the part of the website that you see in your browser when visiting any website. In modern websites, it is mostly made up of HTML, CSS, and JavaScript. These three markup/programming languages control the appearance, structure, and function of a website.

The classic role of HTML is to provide the basic skeleton of the website, its structural elements and building block. CSS, on the other hand, adds styling in form of colors, shapes, fonts and other design elements while JavaScript can be used to make things more interactive and influence how elements behave.

With the ascent of HTML5 (which came out in 2014), things are not as clear cut anymore. HTML has become more powerful and the three languages more integrated with one another. As a consequence, you can do more complex things with HTML alone that used to require backend technologies like PHP, Perl or Ruby on Rails.

Another benefit of HTML5 is that many things have been simplified. A number of HTML tags have been removed or merged into a single, more obvious versions (like <video>) that make them easier to use and remember. You will see examples of that in the tutorial below.

The Benefits of Writing HTML Websites

Yet, with great technology like WordPress, Drupal, and other content management systems around, why would anyone go back to writing websites from scratch? Isn’t that redundant knowledge in today’s web?

Far from it. Being able to build a web page from the ground up remains a useful skill, even if you have no plans of ever becoming a professional developer.

First of all, it’ll allow you to quickly (in minutes as opposed to hours) throw up a page to present basic information and capture visitor information. That’s a great skill if you need to build a page with basic contact information, a placeholder, presentation or something similarly simple.

Secondly, basic coding knowledge transfers to other areas. If you have a WordPress website, knowing how an HTML document is structured and which tags do what allows you to quickly make tweaks or changes without hiring a developer. Or, at the very least, you’ll be able to speak to others intelligently about what’s going on and what you’re looking for instead of a lot of vague back-and-forth communication.

Apart from that, a pure HTML website makes you less vulnerable to security concerns and independent from outside updates or support. In addition, HTML is one of the basics of the modern web and knowing it can never be a bad thing. Being able to understand it lets you look into the source code of other websites and figure out how they work so you can use this knowledge for your own web presence.

Sounds convincing? Then let me tell you a little more about the website we will be building in this tutorial.

Our Example: A California Rock Band Needs a Simple Web Page

In order to have something concrete to work with, we will use a concrete example: The fictional indie rock band Charlie and the Roundheads from Huntington Beach, California were recently signed to a record label and need 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 to catch fan email addresses
• Music streaming abilities
• 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.

While this might sound daunting at first, you don’t have to fret too much over it. In the next thirty minutes, you’re going to learn how to do all of this and more.

And oh, If you haven’t registered a domain yet, do it now.

Tools You Will Need

Before even discussing a single HTML tag, you’re going to need a way to write them. For that, your best option is a quality text editor.

We are not talking about Microsoft Word or Apple’s Pages here. While these are good for writing letters and documents, they are not suitable for HTML. That’s because they add a lot of invisible formatting that will screw up your page when viewed in a browser.

Instead, we need to work with bare-bones (or ‘plain text’) files. These are created with Text Editors like Notepad on Windows. In fact, it’s completely possible to write a web page with Microsoft’s standard tool. However, we wouldn’t recommend it since there are better alternatives out there that come with extra functionality to make coding easier.

For example, good editors offer code highlighting. That means coloring code elements in different colors so they are easier to read and distinguish. Another common feature is automatic indentations and other advanced formatting options.

If you’re on Windows, you can check out Notepad++ or TSW WebCoder while Mac users might want to try TextMate. Some distributions of Linux come with Gedit, which is also an excellent text editor choice. Plus, there are text editors that work across all three platforms like Atom, Brackets and Sublime Text, which is what we will be using in this tutorial.

So, before you move on, make sure you have downloaded and installed one of the options above.

The second thing we need is a web browser to view the fruit of our labor. Since you are reading this article, I will go ahead and assume that you already have one of those at hand. If you don’t (which would be miraculous), make sure you install one of your choosing (it’s up to you, no need to open up the browser debate right here).

Once you are done gathering your tools, we are ready to get started for real.

Step #1: Create a Basic HTML Template

As a first step, we will create a basic HTML template. So let’s go over how to do that.

Create the File

First, we need to create an HTML file. That is quite easy. Just set up a folder on your hard drive in which you will place all files for the website. After that, open up you're your freshly installed text editor and create a new file. Save it as index.html inside the folder you’ve set up. The .html extension automatically turns it into an HTML file. See, wasn’t so hard now, was it?

Add Basic Code Structure

Once we are done with that, we are ready to add this piece of code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>

  </body>
</html>

Say what?! Ok, did I lose you already? Don’t worry, I’ll explain what all this means right away.

What you’re looking at here is a boilerplate starting point for virtually all websites (which also means you get to copy and paste, hooray!). The<html> </html> tags surrounding everything else are HTML brackets that open and close the document.

Everything inside is<head> the head of the document. Here we store things like meta tags, 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 are included in meta tags too.)

Finally, <body> is where the main content of your page goes and most of this guide is dedicated to explaining how to get it there.

The HTML tags that dictate all of these common page elements give you a way to logically organize your code and make it easy to understand and follow. The structure you see above is very typical for web pages and you see it all around the Internet, including on the websites of a news organization like The Guardian, The BBC, CNN or Fox News.

The diagram below explains how the HTML elements correspond to what you see on the finished website. This should make things even clearer.

[add HTML layout structure image]

Besides the ones mentioned above, there are a couple more.

Other Structural HTML Tags

When looking at HTML tags, you will notice that their names also describe their function:

• <header> – The top part of a website. It’s typically where you would place a logo and it usually precedes the web site navigation.
• <nav> – Stands for navigation. This mostly describes the primary web site menu where you’ll place links to the main pages of your website.
• <article> – Contains standalone pieces of content, like individual blog posts, news items, videos, or images.
• <section> – The main content on a page is typically located between <section>tags. Think of these as a chapter in a book, where each contains a group of information like multiple articles, diagrams, images, etc.
• <aside> – A useful tag for including related information that helps explain (but isn’t required for) the context around your page topic. It’s typically used to create a sidebar for related text or links.
• <footer> – The bottom part of the website. The footer is where you store contact information, copyright claims and sometimes additional links like Terms of Service or Privacy Policy.

Still with us? Cool. As you can see, these are pretty easy to remember. For more info, check the HTML5 cheat sheet. Also, now that we have our basic HTML document we can start adding content to our page.

Step #2: Fill in Some Content

The most basic element of any web page is content. This can mean anything from simple text-based information over images to multimedia files like audio and video.

For our example, the Charlie and the Roundheads website needs to display their latest tour information so that their fans know exactly where to find them. You can easily create this in the form of a simple blog post, so let’s do that now.

(Btw, if you want to create a blog without messing around with HTML, check this step-by-step guide to creating a blog.)

In our index.html file, we will now add a new <section> and element<article> nested inside one another within the <body> tags.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <section>
      <article>
      </article>
    </section>
  </body>
</html>

As we’ve just learned, <article> is created specifically for blog posts and news items. Inside of that, we’ll create several separate paragraphs using the tag<p>. (Get it? ‘P’ stands for paragraph.)

Since we don’t have any real content to add yet, we will use Lorem Ipsum, which is a bunch of pseudo-Latin that is used as a placeholder in web development. It ends up looking like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href=style.css>
  </head>
  <body>
    <section>
      <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna quam, hendrerit sodales volutpat consectetur, convallis ac tortor. Integer vel turpis nec orci semper vestibulum id a risus. Suspendisse potenti. Nulla rhoncus odio quis gravida imperdiet. Pellentesque non pellentesque nulla. Etiam sollicitudin tellus sem, nec ornare ligula malesuada ac. Mauris sed erat convallis, elementum eros eu, aliquet eros. Suspendisse potenti. Aliquam eu condimentum odio. Praesent hendrerit congue facilisis. Nullam justo nunc, porttitor vel ligula in, pulvinar blandit elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna quam, hendrerit sodales volutpat consectetur, convallis ac tortor. Integer vel turpis nec orci semper vestibulum id a risus. Suspendisse potenti. Nulla rhoncus odio quis gravida imperdiet. Pellentesque non pellentesque nulla. Etiam sollicitudin tellus sem, nec ornare ligula malesuada ac. Mauris sed erat convallis, elementum eros eu, aliquet eros. Suspendisse potenti. Aliquam eu condimentum odio. Praesent hendrerit congue facilisis. Nullam justo nunc, porttitor vel ligula in, pulvinar blandit elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur magna quam, hendrerit sodales volutpat consectetur, convallis ac tortor. Integer vel turpis nec orci semper vestibulum id a risus. Suspendisse potenti. Nulla rhoncus odio quis gravida imperdiet. Pellentesque non pellentesque nulla. Etiam sollicitudin tellus sem, nec ornare ligula malesuada ac. Mauris sed erat convallis, elementum eros eu, aliquet eros. Suspendisse potenti. Aliquam eu condimentum odio. Praesent hendrerit congue facilisis. Nullam justo nunc, porttitor vel ligula in, pulvinar blandit elit.</p>
      </article>
    </section>
  </body>
</html>

Now, if you save that file and then view it in your favorite browser, you will already be able to see something. To do so, right click the file, choose Open with and then pick the browser of your choice.

Functional but not very pretty yet. For that reason, our next step is to make it look better with some styling.

Step #3. Add Typography to Your Website Content

To make the text look better, we first want to change the font. Right now, it looks the way it does because our computer and web browser come stocked with their own fonts. You’ve probably already seen and used many of them when creating a document in Word or Pages and there are a number of standard web fonts that are present on pretty much any computer.

However, it’s also possible to use custom fonts. The good news: Many of them are available for free from places like Google Fonts. This service offers a ton of free, elegant font styles for your website.

In this case, we want to use one of my favorite fonts, Droid Sans, to give our first blog post some personality. This happens via CSS, which, as mentioned earlier, is responsible for adding styling to websites. Here’s how to do it.

Load the Font

To change the font, we first need to load it. Otherwise, we can tell the browser a million times to use it, if it’s not present, there’s nothing it can do.

We mentioned earlier that additional resource is loaded inside the section<head>. That is also true for fonts. So, as the first step, copy and paste the following line of code in between the two <head> brackets (in case you are wondering, we got this piece of code from the Google Fonts website):

<link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css‘>

This will tell the browser to load the font from Google’s website. After that, we need to assign it to our content for it to change.

Add CSS to Apply the Font

To add CSS to our document, you will now create a new file (inside your text editor) and name it style.css. This is the so-called stylesheet where all of our page’s styling is saved. Save it in the same folder as the rest of the documents.

Before we can use the stylesheet, we first need to tell the browser to load it for our document. This happens by adding this line of code to the <head> section of index.html:

<link rel="stylesheet" type="text/css" href=style.css>

From now on, everything that is added in style.css will be applied to our document. Time to truly it out. We will now tell the browser to use the font we loaded earlier for our paragraphs like this:

section {
  font-family: 'Droid Sans', sans-serif;
}

That’s it. This piece of code basically tells the browser to apply the font family Droid Sans to all text inside tags<section>. The sans-serif part is the fallback font. If the browser can not find the first font (maybe because we forgot to load it in the header) it will use the second one instead, which is one of the standard fonts mentioned earlier.

Now save the file and go back to your browser. If you reload the newly created web page, it should now look a little something like this:

Somewhat better, isn’t it? However, still pretty bland, so let’s add some more things.

Step #4: Create a Linked Navigation Bar

By now, the website is slowly starting to come together. However, beyond the first blog post, we will want to add a few more pages in the future. In order for our visitors to reach those, we need a navigation bar.

If you have ever used a website before, I probably don’t have to explain to you what that is. Creating a navigation bar might seem a bit complicated at first but if you have followed along so far, I am sure you can get your head around it.

Here’s how to do it step by step:

1. Create a <nav> tag between the <body> end <section> tag (don’t forget to close it with </nav>)
2. Inside of that, create an unordered list. Unordered lists show up as bullet points (as opposed to ordered or numbered lists, which is what you are looking at right now). The tag for them lists is <ul>.
3. Inside the new <ul></ul> tags, we have to place <li> tags for each line item or bullet point (in this case, signifying new pages). For our website, we will need three.
4. Inside of that, we will place the links to the other pages. The format for that is: <a href=”yourpageurl.html”>Your Page Name</a>. The <a> tag signifies a link. Everything after href= is the address the link is pointing to. “Your Page Name” is the text that appears on the website.

When all is said and done, the markup for your navigation bar should look like this:

<nav>
  <ul>
    <li><a href="media.html">Media</a></li>
    <li><a href="index.html">Homepage</a></li>
    <li><a href="signup.html">Signup</a></li>
  </ul>
</nav>

As you will notice, the menu items are aligned vertically in the HTML document (as are all elements) and without additional styling, they will merely appear like this:

However, on websites, the navigation is most often aligned horizontally. This, again, is achieved with some CSS. In your style.css file, add the following:

li {
  display: inline;
  list-style-type: none;
  padding: 5px;
}

The display: inline property makes the links appear next to one another instead of on top of each other. The rest is to make the menu look a little better. For example, list-style-type is to remove the dots that are usually in front of bullet points and we have also added some space around each item.

Looks much better, doesn’t it? Now let’s add some more styling to the rest of the page.

PS: Right now we only have one page. To use the navigation on all pages, we would have to copy its code to all other pages as well.

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

While we’re already in the CSS file, let’s make the rest of the page look better as well. Specifically, we want to give the text area a fixed width of 640 pixels, a thick, shaded border, and some background color.

We can achieve this by adding the following lines to our style sheet:

article {
  border-style: solid;
  border-width: medium;
  background-color: #CCFFFF;
  width: 640px;
}

Most of these should be relatively self-explanatory. If you are confused about #CCFFFF, that’s a hex color code that tells the browser which shade of color to use.

Last but not least, we want to add a uniform background color to all of our pages. Because we want this to appear on all pages, we’re going to create a CSS selector for the <body> section.

In addition to that, instead of just assigning a color, let’s add textured backgrounds. We can get one of those at CSSMatic. Play around with the settings until you’re happy and then click Download Noise Texture to get the file. Place it in the same folder as the rest of the website files.

After that, to apply it as the page background, we use the following CSS:

body {
  background-image:url('texture.png');
}

This applies the file as a background. Here is the result:

While it won’t win any beauty pageants at the moment, it’s more important that you understand the principles behind the design process. If you do that, there is very little you can’t do some research. (If you want to build a site using WordPress, head over to my homepage.)

Step #6: Create a Form

Next up, we will add a form to our sample website. That way, Charlie and the Roundheads can start collecting email addresses from their fans.

Be aware that in this tutorial we are only dealing with the front end part of the form. To do anything useful with the data submitted, we would also have to set up some backend technology. Unfortunately, this is outside the scope of this article. If you want to look further into this, I recommend starting with PHP. It’s relatively easy to get into and is used by millions of developers worldwide.

What data do we want to collect from the fans who come to the website? Email, of course.

However, it also makes sense to collect zip codes to figure out where to go on tour next. Finally, fans might want to leave a message for the band so we will take this into account as well.

With this in mind, let’s start work on our first HTML5 form.

Set up the Email Field

First, we will open a new section as we did before. This is where the form goes. Forms themselves consist of labels, inputs, and buttons that are surrounded by <form> tags so that’s the first thing we will add to our new section.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href=style.css>
  </head>
  <body>
    <section>
      <form action="">
      </form>
    </section>
  </body>
</html>

After that, it’s time to create the first input. Inputs are fields where others can fill in their data (like an email address) that then gets submitted via the form.

The first input we’re going to accept is to an email address. To do that, we add a tag of <input> and do not close it. We’re also going to preface it with Email :. Then we give the input tag a type, which is also email. That way, it will only accept email addresses in the right format.

Email <input type="email" >

Before HTML5, this field you would have accepted any old input and you would have had to write some extra code to make sure that the information you received from the user was a legitimate email address. With HTML5 that is no longer necessary.

Aside from that, we also want to make this a required field. To do so we’re going to give it another attribute, that 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”. The same will happen if the user tries to submit something that isn’t a valid email.

Finally, we also provide a name to identify the field, should we end up writing some back-end code. We do this by adding an attribute of name with a value of email. Here’s what it ends up looking like:

Email <input type="email" name="email" required>

Add Other Fields

Now, let’s go ahead and add fields for the zip code and the message. It basically works the same, except that the type of field is different. After all, it doesn’t make sense to use an email field for a zip code, does it? So, for the zip code we use a ‘number’ field instead, give it a name and make it required.

Zip Code <input type="number" name="number" required>

Finally, the field to accept messages somewhat breaks with the tradition since it doesn’t use the <input> tag, but rather <textarea>. This tag is used for inputs that are likely to span multiple lines, which is appropriate for fan messages yet less so for things like emails, passwords, and names.

<textarea> can take a whole bunch of attributes. We’re interested in four of them. Firstly, we want to give it a name. We also want to define some rows and columns to specify how large the text area is going to be. Finally, we will define whether it is a required field or not. All of this happens like this:

<textarea rows="4" columns="50">

</textarea>

Now all that’s left is to add a submit button. This is as simple as creating another input type, this time of the type submit and the same value. The value defines the text on the button.

<input type="submit" value="submit">

All put together in our document, it comes out like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href=style.css>
  </head>
  <body>
    <section>
      <form action="">
        Email <input type="email" name="email" required>
        Zip Code <input type="number" name="number" required>
        <textarea rows="4" columns="50">
        </textarea>
        <input type="submit" value="Submit">
      </form>
    </section>
  </body>
</html>

And here is what it looks like inside the browser:

Not exactly pretty, is it? However, don’t worry. We can spruce it up with additional CSS:

input {
  display: block;
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 10px 5px;
}

Now it appears like this:

Much better, right? Cool, then let’s move on to the final chapter: How to add rich media to our website.

Step #7: Include Music and Videos

In former days, if you wanted to add music or movies to a web page, you’d have to rely upon slow, bulky frameworks like Flash or Silverlight. HTML5 has effectively thrown these out and replaced them with something much better.

For the next bit, we’re going to create a place to publish and share music and videos. Might sound complicated, but it’s actually really easy (as everything else).

But First, Let’s Talk About Codecs

To deal with media, we first need to deal with codecs. Codecs are compression/decompression algorithms that help make large files smaller for storage and transfer and then larger again when someone wants to view it.

As I’m sure you know, there are a huge number of web browsers on the market right now and each of these handles playing music and videos slightly differently. Therefore, codec support among web browsers is far from universal as you can see below.

For that reason, we have to encode our music and movies in a whole bunch of different ways for the best possible result.

Start With Video

To get started we create a new file with the same HTML5 boilerplate we used before and also add a section tag.

At this point, we are already ready to add some music and videos. Fortunately, the HTML5 tag for adding videos is exactly what you would expect, which is <video>.

But before we can use it, we first need to add our video files. So far, all we’ve done is add a container for them. Given what we learned about codecs, we’re going to add both H.264 MOV and WebM8 media to our folder named video.mp4 and video.webm.

After that, adding a video is easy. You just include a <source> tag for each video you wish to embed. As an added bonus, we will add a placeholder that tells visitors with old web browsers that they ought to upgrade to something more contemporary. This goes outside the tag. Here’s what it looks like:

<video>
  <source src="video.mp4"></source>
  <source src="video.webm"></source>
  Sorry, your browser doesn't seem to support HTML5 video
</video>

Add Audio

Now we move on to audio files. Unlike videos, there are only two codecs to care about:

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

<audio>
  <source src="song.mp3"></source>
  <source src="song.ogg"></source>
  Sorry, your browser doesn't seem to support HTML5 audio
</audio>

After that, the entire document comes out like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Media</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href=style.css>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="media.html">Media</a></li>
        <li><a href="index.html">Homepage</a></li>
        <li><a href="signup.html">Signup</a></li>
      </ul>
    </nav>
    <section>
      <video>
        <source src="video.mp4"></source>
        <source src="video.webm"></source>
        Sorry, your browser doesn't seem to support HTML5 video
      </video>
      <audio>
        <source src="song.mp3"></source>
        <source src="song.ogg"></source>
        Sorry, your browser doesn't seem to support HTML5 audio
      </audio>
    </section>
  </body>
</html>

And that’s it. The basic requirements of the site have been fulfilled. All it took was a text editor, a handful of files and a few lines of code. Pretty cool, right? Told you you would be able to follow along.

Summing Up

In this article, you have learned the basics of writing web pages in pure HTML. We have talked about what HTML is exactly and why it makes sense to learn to use it in the real world.

Besides that, you have learned how to create a basic HTML template, fill it with content and enhance that with CSS. We have also dipped our toes in adding linked navigation, forms, and rich media.

With the basics covered, you are now ready to start exploring further on your own. By adding more HTML and CSS knowledge to your repertoire you will be able to do more complex maneuvers in the future and build more powerful websites.

If you’d like to download the entire website we created above, you can do so here. For more information on HTML5 support in different browsers use this website(thanks to Ted Goas)

There’s also an animated video below on the topics of this tutorial.

However, first, we want to hear from you. What did you find most useful in this tutorial? How are you going to use it? Any other thoughts? Let us know in the comment section below!