What Is the Web, and What Is HTML?

What you'll learn

• What happens when you open a web page.
• What HTML is and what its name means.
• How HTML, CSS and JavaScript work together.
• That you can read and change the HTML of any page you visit.

You don't need to know anything about programming to start. If you can use a web browser and type, you're ready.

The idea

What happens when you open a web page

When you type an address such as readycamel.com into your browser and press Enter:

1. Your browser (Chrome, Firefox, Safari, Edge...) asks another computer on the internet, called a web server, for the page.
2. The server sends back a text file written in HTML.
3. The browser reads that file from top to bottom and turns it into the page you see: headings, paragraphs, pictures, links and buttons.

So a web page is, at its heart, a plain text file. Everything else (colours, animations, videos) is added on top of it.

What HTML is

HTML stands for HyperText Markup Language:

• HyperText is text with links in it. Clicking a link takes you to another page. That simple idea is what turned separate documents into a web of pages.
• Markup means adding labels to content to say what each part is. Think of a teacher marking up an essay with notes such as "this is the title" or "this is a quote". HTML does the same with tags written in angle brackets:

<h1>My Holiday</h1>
<p>We went to the sea.</p>

<h1> says "this is the main heading" and <p> says "this is a paragraph". The browser reads those labels and shows the heading big and bold and the paragraph as normal text.

• Language means there are agreed rules, so every browser in the world understands the same tags in the same way.

HTML is not a programming language. It doesn't calculate anything or make decisions. It describes content, and that's why it's the easiest place to start building for the web.

HTML, CSS and JavaScript

Almost every website uses three languages together. A house is a good way to picture them:

You always start with HTML, because CSS and JavaScript need something to style and control.

What "HTML5" means

HTML5 is the modern version of HTML that every browser uses today. When people say "HTML5" they usually just mean "modern HTML", with features such as video, audio and better forms built in. You'll learn where it came from in the next lesson.

Try it

This is a complete web page. Press Run to let your browser draw it, then change the words between the tags and run it again:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This page is written in <strong>HTML</strong>.</p>
  <p>Change this sentence and press Run again.</p>
</body>
</html>

Notice that you never see the tags themselves on the page. The browser uses them as instructions and shows only the content.

Your turn

1. Change the heading to your own name.
2. Add another paragraph under the others: type <p>, a sentence, then </p>.
3. Open any website in your browser, right-click the page and choose View Page Source. You're looking at that page's HTML. You'll recognise <h1>, <p> and <a> tags already.

Common mistakes

• Thinking you need special software. A browser and a plain text editor are enough. You'll set them up in lesson 3.
• Using HTML to make things look a certain way. HTML says what something is; CSS says how it looks. Choose a tag because of its meaning, not its size.
• Worrying about memorising every tag. Professionals look tags up all the time. You'll use about 20 tags for most pages.

Key points

• A web page is a text file of HTML that a server sends and a browser draws.
• HTML = HyperText (text with links) + Markup (labels that say what content is).
• HTML gives structure, CSS gives style, JavaScript gives behaviour.
• HTML5 is the modern HTML that all browsers use today.