Learn HTML and CSS: Elements and tags

What HTML is

Maggie puts two scoops of vanilla on the counter. "One for you, one for me. Now then: what is this HTML my nephew keeps going on about?"

Tags and elements

HTML is the language you use to tell a browser what each bit of text is: a heading, a paragraph, a list.

You do that with tags: a word between angle brackets. <h1> is the opening tag of a big heading, </h1> the closing tag. The slash / makes the difference.

The opening tag, the content and the closing tag together are an element. <h1>Cold Comfort</h1> is one element: a heading with the text Cold Comfort. In the same way, <p> makes a paragraph.

You don't see the tags on the page: they only say what the text is. And <main>? That's an element too, a box around the main content. More on that in lesson 3.

index.html

1<main>2  <h1>Cold Comfort</h1>3  <p>The best ice cream on the seafront.</p>4</main>

ijssalon.example

The skeleton of a page

A complete HTML page always has the same skeleton.

<!DOCTYPE html> at the top says: this is modern HTML. Then comes <html lang="en">, with the language of the page, so a screen reader picks the right pronunciation.

<head> holds information about the page, such as the <title>: the name in the browser tab and in Google's search results. What visitors see on the page goes in <body>.

See how neatly it all fits together: <head> and <body> both open and close inside <html>.

index.html

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Cold Comfort ice cream parlour</title>5  </head>6  <body>7    <main>8      <h1>Cold Comfort</h1>9      <p>The best ice cream on the seafront.</p>10    </main>11  </body>12</html>

ijssalon.example

Try it yourself

Your turn. In <main>, add an <h1> heading with Welcome to Cold Comfort and below it a paragraph with Taste the sea in every scoop.

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Cold Comfort ice cream parlour</title>5  </head>6  <body>7    <main>8 9    </main>10  </body>11</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example

Ready for more?

The full lesson has 6 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Tags and elements

HTML is the language you use to tell a browser what each bit of text is: a heading, a paragraph, a list.

You do that with tags: a word between angle brackets. <h1> is the opening tag of a big heading, </h1> the closing tag. The slash / makes the difference.

The opening tag, the content and the closing tag together are an element. <h1>Cold Comfort</h1> is one element: a heading with the text Cold Comfort. In the same way, <p> makes a paragraph.

You don't see the tags on the page: they only say what the text is. And <main>? That's an element too, a box around the main content. More on that in lesson 3.

index.html

1<main>2  <h1>Cold Comfort</h1>3  <p>The best ice cream on the seafront.</p>4</main>

ijssalon.example

The skeleton of a page

A complete HTML page always has the same skeleton.

<!DOCTYPE html> at the top says: this is modern HTML. Then comes <html lang="en">, with the language of the page, so a screen reader picks the right pronunciation.

<head> holds information about the page, such as the <title>: the name in the browser tab and in Google's search results. What visitors see on the page goes in <body>.

See how neatly it all fits together: <head> and <body> both open and close inside <html>.

index.html

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Cold Comfort ice cream parlour</title>5  </head>6  <body>7    <main>8      <h1>Cold Comfort</h1>9      <p>The best ice cream on the seafront.</p>10    </main>11  </body>12</html>

ijssalon.example

Try it yourself

Your turn. In <main>, add an <h1> heading with Welcome to Cold Comfort and below it a paragraph with Taste the sea in every scoop.

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Cold Comfort ice cream parlour</title>5  </head>6  <body>7    <main>8 9    </main>10  </body>11</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example