How the web works and your first HTML page

What you will learn

• the difference between the internet and the web, and what HTTP and HTTPS do
• what HTML is and what a tag is
• the five parts every page needs: <!DOCTYPE html>, <html>, <head>, <title> and <body>
• line breaks with <br> and comments with <!-- -->

Understand the idea

The internet is the worldwide network of connected computers. The web is one of the things that runs on it: pages that you ask for with an address or a link. When you type an address, your browser sends a request to a server using HTTP, or HTTPS, the secure version that shows a padlock. The server answers by sending back a file, and for a web page that file is written in HTML.

HTML stands for HyperText Markup Language. It does not make decisions like a program does. Instead it labels content: this part is a heading, this part is a paragraph, this part is a list. The labels are called tags and are written in angle brackets. Most tags come in pairs, an opening tag such as <h1> and a closing tag with a slash such as </h1>, and whatever sits between them is the content.

Every page has the same skeleton. <!DOCTYPE html> tells the browser that this is modern HTML. <html> wraps the whole page. Inside it, <head> holds information about the page, for example its <title>, which is the name shown on the browser tab. <body> holds everything people actually see. Two small extras are worth knowing now: <br> ends a line and has no closing tag, and <!-- text --> is a comment that the browser ignores, useful for notes to yourself.

You can write HTML in any plain text editor and open the saved file in a browser. Many developers use a free editor such as Visual Studio Code and keep every version of their work safe with Git. In this course the editor is built into the page, so you can start straight away.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>My first page</title>
  </head>
  <body>
    <!-- This is a comment: the browser skips it -->
    <h1>Hello, web!</h1>
    Line one<br>
    Line two
  </body>
</html>

Your turn: code to type and practise

Complete the page: give it the title My page, put an h1 heading inside the body, add two lines of text separated by <br>, and add an HTML comment.

← All lessonsElements, attributes and text formatting →