Lesson 5

Structure

Setting up your page

Every HTML page has the same basic structure. We start with a doctype declaration; this tells the browser that the entire page is HTML. After the doctype comes our main HTML element's opening tag,and at the very bottom we have its closing tag. Everything else is content inside the HTML element.

The majority of the HTML we write will be visible to the user but sometimes we want to give instructions to the browser that the user doesn't need to see. We do this by splitting the page into a head and a body.

The head is where we put meta information about our page. Inside the head tag we have a title element which defines the title of the page. The browser uses this in the tab bar at the top of your window, and Google uses it in search results. We also link to our CSS stylesheets and JavaScript files in the head.

We can include our CSS stylesheet file with a link element. As you can see, the background colour has changed. This link element tells the browser the location of the CSS file via the href attribute, just like the anchor element.

The body is where we put our content. Everything in the body is visible to the user.

Play
Go to the next lesson

index.html

the web page

New Window

Tasks

  • Try adding one of the following CSS files to the href attribute:
    1. /css/red.css
    2. /css/blue.css
    3. /css/green.css
  • Update the content in the title tag
  • Change the content in either the h1 or p tag
Next Lesson
Practical understanding of  HTML images, structure and semantic HTML5 Badge

Intermediate HTML

Congratulations! You’ve just earned the Intermediate HTML badge!

If you'd like to send this badge to your Mozilla backpack, just fill out the form below.

This will push your badge to the Mozilla Badge Backpack which is governed by the Mozilla Badge Backpack Terms of Use and Privacy Policy.