HTML5 Beginner's GuideThese 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 a 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 frontend 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 an website.

The classic role of HTML is to provide the basic skeleton of the website, it’s 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 was recently signed to a record label and needs 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 recommended 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 your 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> and </html> tags surrounding everything else are HTML brackets that open and close the document.

Everything inside <head> is 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 explain 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 news organisation 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 website navigation.
  • <nav> – Stands for navigation. This mostly describes the primary website 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 like 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> – 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 <article> element 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 <p> tag. (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.

paragraphs without css

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 favourite 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 are loaded inside the <head> section. 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 truy 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 <section> tags. 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:

html paragraphs after applying font

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> and <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:

unformatted html menu

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.

formatted html menu

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 a 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:

formatted html paragraphs

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 with 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 frontend 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 for 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:

unformatted html form

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:

formatted html form

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 handle playing music and videos slightly differently. Therefore, codec support among web browsers is far from universal as you can see below.

available video codecs

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:

available audio codecs

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!

Update 2016, Feb: People behind www.webucator.com 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 – http://www.tedgoas.com/

  • +

38 comments

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,
    Sara

    • 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.
      Robert

    • 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,
      Liz

      • 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 🙂

        Cheers,
        Robert

        • 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 – https://websitesetup.org

      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.

      Robert

  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 (bjornsteck.com) and have signed up/uploaded the files to a hosting client. (www.heliohost.com).

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

    Cheers

    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,
      Robert

  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

      David

  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

    • 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.

  12. I am finishing up with a degree in web development next semester and was contemplating creating websites for small companies. In your opinion what is a better route for creating modern websites for companies. Should I use raw HTML, CSS and so on or should I use WordPress to create them. Would love to hear your opinion on the topic.

    Thanks,
    Tyler

    • Hi Tyler,

      While I’m a big fan of *raw* HTML & CSS, I’d still use WordPress to create sites for clients.

      Why?

      Because it’s a content management system = your clients can add/remove/change content without your help. It’s way more convenient from a client perspective, too.