HTML Structure

The HTML tag and DOCTYPE

Having a fancy list of great things about calamondins is nice, but our browser tab doesn't actually say what our page is about yet. To get the tab itself to display our page title, we need to learn a bit more about HTML structure.

There is a special element you will often see at the top of HTML files that looks like this: <!DOCTYPE html>. This is the "document type" element, and it tells the browser which flavor of HTML you're using. <!DOCTYPE html> tells your browser you're using HTML5, the latest version of HTML.

Unlike most HTML elements, the DOCTYPE element does not need a closing tag. You do not need to put </!DOCTYPE> at the end of the document.

In addition to the <!DOCTYPE html> element, there are a few other elements that make up the standard structure of an HTML file.

You'll notice you've done just fine without using these so far. Most browsers don't strictly need you to use these elements, but they will help your site work correctly on some browsers, and they are important for accessibility.

The full standard structure for a modern HTML web page includes <!DOCTYPE html> and the html, head, and body elements, arranged like this:

<!DOCTYPE html> <html>   <head>     
Important information about your site will go here inside the head element
  </head>   <body>
Visible stuff that shows up on the page will go here inside the body element
  </body> </html>

The Head

Elements in the head do not show up on your web page the way that the ones in the body do. The head element is where you put "metadata" elements that can tell a search engine or another program more about your page, like who wrote it or what icon should be displayed on its browser tab. Here are some examples of things you might put in the head element:

  • If you want to add some search engine keywords: <meta name="keywords" content="calamondin, fruit, sour, amazing"/>
  • If you want to add a title that will show up in the browser tab for your page: <title>Calamondins are delicious!</title>
  • If you want to reference some other files to change how your page looks (we'll talk more about this in another lesson): <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css"/>

Here's an example of a head element with a few things in it:

<head>
  <title>Calamondins are delicious!</title>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <meta name="keywords" content="calamondin, fruit, sour, amazing">
  <meta name="description" content="A page about how great calamondins are.">
</head>

The Body

The body element contains the stuff that's actually visible on the page — the things you'll want your users to be able to see, read, or interact with!

In the exercises you've done so far, you've been writing HTML that would normally go inside a body element. This time, let's try a basic "Calamondins are delicious!" inside a complete, properly structured HTML page with <!DOCTYPE html>, and html, head, and body elements.

Once you've entered the <! part of <!DOCTYPE html>, the SiteGarden errors will show up to walk you through getting the rest of these standard elements right.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    Calamondins are delicious!
  </body>
</html> Calamondins are delicious!

Everything should look mostly the same as the very first "Calamondins are delicious!" exercise.

Now try adding a title element inside the head section like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Calamondins are delicious!</title>
  </head>
  <body>
    Calamondins are delicious!
  </body>
</html> Calamondins are delicious!

Clicking the "new view" button to the left of your text editor will open a preview of your web page in a new browser window.

Click that button now and you should see the title "Calamondins are delicious!" show up on the browser window that opens up.

Once you've got that working, let's add back the whole list from before:

<!DOCTYPE html>
<html>
  <head>
    <title>Calamondins are delicious!</title>
  </head>
  <body>
    <h1>Calamondins are <em>delicious!</em></h1>

    <p>Awesome things about calamondins:</p>

    <ul>
      <li>they are delicious</li>

      <li>they are sour</li>

      <li>they are small enough to eat in one bite</li>
    </ul>
  </body>
</html>

Calamondins are delicious!

Awesome things about calamondins:

  • they are delicious
  • they are sour
  • they are small enough to eat in one bite

Next

That's it for basic HTML. Even with all of these tags, though, we don't have a way to change font colors, margins, layout, etc. If we want to make our page look really nice, we're going to have to dig into the lesson about CSS.