Your first web page
What HTML is, how a page is put together, and how to see your own page in a browser.
What is HTML?
HTML (HyperText Markup Language) describes what is on a web page: this is a heading, this is a paragraph, this is a picture. Your browser reads the HTML and draws the page.
HTML is not a programming language. It does not calculate or make decisions; it marks up content so the browser knows what each part is.
Elements and tags
A page is built from elements. Most elements have an opening tag, some content and a closing tag:
<p>This is a paragraph.</p>| Part | Example | Meaning |
|---|---|---|
| Opening tag | <p> | Where the element starts |
| Content | This is a paragraph. | What the visitor sees |
| Closing tag | </p> | Where it ends (note the /) |
The shape of every page
Every HTML page follows the same outline. Read it from top to bottom:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>I built this page myself.</p>
</body>
</html>| Part | What it does |
|---|---|
| <!DOCTYPE html> | Tells the browser this is a modern HTML page |
| <html lang="en"> | Wraps the whole page and says it is in English |
| <head> | Information about the page; not shown on the page itself |
| <meta charset="UTF-8"> | Lets the page show every alphabet and emoji correctly |
| <title> | The text on the browser tab and in search results |
| <body> | Everything the visitor sees |
See it in your browser
- Open a plain text editor such as VS Code or Notepad.
- Paste the code above and save the file as
index.html. - Double-click the file. Your browser opens it.
- Change some words, save, and refresh the browser to see the change.
Exercise
Change the page so the heading shows your name and the paragraph says what you want to build.
<h1>Hello, world!</h1>
<p>I built this page myself.</p>Show a possible solution
<h1>Hello, I am Ada</h1>
<p>I want to build a website for my church youth group.</p>Check your understanding
Quick check
Which part of a page holds the content visitors see?
Quick check
What does the first line <!DOCTYPE html> do?
Quick check
Which file name is correct for an HTML page?