Basic HTML Website Structure
This guide explains how to build a basic HTML website, including the HTML5 syntax that works with all modern browsers.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
  • Complete the Exercise
Video locked
This video is viewable to users with a free Dev Camp account
GET FREE ACCOUNT

One of the first things you need to know is that HTML uses a tag-based system. These tags are what the browser looks for to display what you want to show.

One of the most basic HTML 5 skeleton you'll see is:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Site Title</title>
  </head>

  <body>
    <h1>Hi there again</h1>
  </body>
</html>

Just a quick note here. I'll make this structure and all code available to you in the show notes. What I typically do is push up all these files to a repository called github, and you can access it from there.

Now, going back to the code, the first thing you'll have to type is <!DOCTYPE html>. This has to be exactly this way with angle brackets, an exclamation mark and the letters "DOCTYPE" in uppercase and "html" in lowercase. When a browser opens a page, this is what it looks for. Once it sees this tag, it knows this is a HTML 5 file, and it will render it accordingly.

Next, you'll have to wrap your code in tags underneath that. We start off with <html>, and if you see right at the bottom, we close it off like this: </html> In general, every opening tag needs a closing one, and your code can get distorted if you don't have matching opening and closing tags. If you see, the closing tag is the same as the opening tag, except it has the symbol "/" just after the angle bracket.

Inside the <html> tag, you can have a <head> and <body> tag, where you can put a whole lot of content in these two sections. We'll go in detail about each of these tags in the subsequent videos. For now, just remember that <head> contains all your meta-data, and <body> contains all the information you see on the browser.
Also, HTML doesn't recognize end of line characters, so you can have line breaks between different sections for better readability, and it won't change the content on your browser.

So, to recap, you start off with your declaration where you declare your DOCTYPE. Then, have an opening and closing <html> tag to tell the browser that it has to process all the content inside these tags. Inside the <html> tags, you can have <head> and <body> tags that'll contain all your content.