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 Bottega Bootcamp license
APPLY NOWLEARN MORE

One of the first things you need to know is that HTML uses a tag-based system. These tags are what the browser reads to display what you have coded.

One of the most basic HTML 5 skeletons you'll encounter is displayed below:

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

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

This structure and all other code will be available to you in the show notes and/or within a repository called GitHub.

The first thing you'll have to type is <!DOCTYPE html>. This tag to be exactly as shown. The angle brackets, exclamation mark, uppercase letters "DOCTYPE" and lowercase letters "html" must all be included in the first tag. When a browser opens a page, this precise HTML 5 file format is what it searches for. Once registered, the browser will then render it accordingly.

Next, you must wrap your preceding code in tags underneath the first. We begin with <html>, and close it off with: </html> In general, every opening tag demands a closing one; your code can get distorted if you don't implement the right pairs. Although the closing tag may seem the same as the opening tag, it does include the symbol "/" just after the angle bracket, making it slightly differentiate from the opening tag.

Inside the <html> tag, you may include a <head> and/or <body> tag, where the majority of content is placed. The details of each of these tags will be featured in the subsequent videos. For now, note that <head> carries all your meta-data, and <body> contains all the information displayed on the browser.
Also, HTML does not recognize "end of line" characters, so line breaks can be added between different sections for improved readability, without a change to the content on your browser.

To summarize, you first begin with your declaration, DOCTYPE. Then, establish an opening and closing <html> tag to notify the browser of the content with the book-end tags. Finally, inside the <html> tags, <head> and <body> tags is the bulk of your content.