f-r f-r.space your corner of the web Sign up

Lesson 1 of 5

HTML basics

HTML stands for HyperText Markup Language. It's how every web page on the internet is described to a browser — including the one you're reading right now.

HTML is just plain text, with little tags wrapped in angle brackets to mark what each piece is. <h1> is a heading. <p> is a paragraph. <a> is a link. That's most of it.

Your first page

Here's a complete, working web page. Copy it into your editor as index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My website</title>
</head>
<body>
  <h1>Hello, world.</h1>
  <p>This is my page on the internet.</p>
  <p>I made it. With my hands. Sort of.</p>
</body>
</html>

Save it, hit preview, and you're a web developer. That's it. That's the entire game.

The pieces

Every page starts with <!doctype html>. That tells the browser "I'm using modern HTML, please."

Then the page is wrapped in <html>, which contains two main parts:

  • <head> — metadata about your page. The title that shows up in the browser tab, the character encoding, links to stylesheets. Stuff browsers and search engines need but visitors don't see.
  • <body> — the actual content. Headings, paragraphs, images, links. Everything visitors see.

Tags you'll use a lot

Most of the web is built with these dozen-ish tags:

<h1>Big heading</h1>
<h2>Smaller heading</h2>
<h3>Even smaller</h3>

<p>A paragraph of text.</p>

<a href="https://friendrewind.com/">A link</a>

<img src="cat.jpg" alt="My cat Bingus">

<ul>
  <li>An item in a list</li>
  <li>Another item</li>
</ul>

<strong>Bold text</strong> and <em>italic text</em>.

<br>  <!-- a line break -->
<hr>  <!-- a horizontal rule -->
Comments are written between <!-- and -->. Anything inside is ignored by the browser — useful for leaving notes for yourself.

Attributes

Tags can carry extra information called attributes, written inside the opening tag. The most important ones are:

  • href on <a> — where the link goes.
  • src on <img> — where the image file is.
  • alt on <img> — a text description for screen readers and people on slow connections.
  • class and id on anything — labels you'll use later when you write CSS.

Try it

Pop open the editor, drop the example above into index.html, and hit Save. Then click Preview to see your page. Edit the text, add a paragraph, swap out the heading. Mess with it.

You break nothing. The internet is forgiving. Refresh, repeat.

Where to next

You now have a page that works. Next we'll make it look like yours with CSS — colors, fonts, spacing, the works.