HTML Part 1: Your first web page

Every website starts as a plain text file written in HTML. Here's how to write one from scratch and open it in your browser.

HTML labels the parts of a page: this is a heading, this is a paragraph, this is a link. It doesn't choose colours or layout. That's CSS, and it gets its own series after this one.

Tags and elements

You label content with tags. Most tags come in pairs: an opening tag, and a closing tag with a slash.

<p>The chai is ready.</p>

<p> starts a paragraph and </p> ends it. The two tags plus the text between them make one element.

A few elements hold nothing, so they have no closing tag. You'll meet two of them soon: <br> for a line break and <img> for an image.

Attributes

Attributes give an element extra details. They go inside the opening tag, written as name="value".

<a href="https://wiklearn.com">Open WIK</a>

href tells the link where to go. An element can have several attributes, separated by spaces.

The skeleton

Every page sits inside the same frame:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>My first page</title>  </head>  <body>    <h1>Hi, I'm Asha</h1>    <p>This is my first web page.</p>  </body></html>

Line by line:

• <!DOCTYPE html> tells the browser to use modern HTML. It always goes first.
• <html lang="en"> wraps the whole page, and lang says it's in English. Screen readers use it to pronounce the words correctly.
• <head> holds details about the page. Nothing inside it shows up on the page.
• <meta charset="UTF-8"> lets the page show every language's letters, and emoji.
• The viewport line makes the page fit a phone screen. Without it, phones show a tiny zoomed-out desktop page.
• <title> is the name on the browser tab, and usually the headline in Google results.
• <body> holds everything people actually see.

See how the lines are indented? Elements sit inside other elements, and the indent shows what's inside what. The browser doesn't care, but you will once a page grows to a few hundred lines.

Open it in a browser

1. Install a code editor. VS Code is free and works on Windows, Mac and Linux.
2. Paste the skeleton into a new file and save it as index.html.
3. Double-click the file. It opens in your browser.

Now change some text, save, and refresh the browser. Edit, save, refresh: you'll go round that loop thousands of times.

No laptop right now? codepen.io works in a phone's browser. Type HTML into its HTML box and the result shows up as you type.

Try it

Put your own name in the heading. Add a second paragraph about something you'd like to build one day. Then change the title and look at the tab.

Next: HTML Part 2: Headings, text and lists