Web Developer Path · lesson 2 of 18

Elements, attributes and text formatting

Learn the anatomy of an element, give it attributes, nest tags correctly and format text with bold, emphasis, highlight and small raised or lowered text.

What you will learn

the opening tag, content and closing tag that make up an element
attributes such as id, class and title
nesting: closing tags in the reverse order of opening
formatting tags: , , , , , <del>

Understand the idea

An element is a complete piece of a page: an opening tag, the content and a closing tag. In Hello the element is a paragraph. Some elements have no content and so no closing tag, such as   (line break), <hr> (a divider line) and <img> (a picture). These are called void elements.

Attributes give an element extra information. They go inside the opening tag as a name, an equals sign and a value in quotes: . An id names one element and must be unique on the page. A class names a group, and many elements can share it. You will use both heavily when you learn CSS. Other common attributes are title (a tooltip) and lang (the language of the text).

Elements can sit inside other elements, which is called nesting. The rule is simple: close tags in the reverse order you opened them. Hi is right, because the strong element closes before the paragraph does. Hi is a mistake that browsers try to repair, sometimes in surprising ways.

Some elements only change how text looks and what it means.  marks important text (usually bold),  adds emphasis (usually italic),  highlights,  and  lower and raise text as in H₂O and x², <del> shows removed text and <code> shows computer code. Prefer these meaningful tags over just making things bold, because screen readers and search engines understand them.

Example

Attributes, nesting and formatting

<p id="intro" class="lead">
  Water is <strong>very</strong> <em>important</em>:
  H<sub>2</sub>O, and E = mc<sup>2</sup>.
  <mark>Remember</mark> to drink it.
</p>

The paragraph has an id and a class. Inside it the other tags are nested and each one closes before the paragraph does.

Your turn: code to type and practise

Write a paragraph with the id notes that contains important text (strong), emphasised text (em), highlighted text (mark) and a subscript (sub).

Stretch challenge

Add a superscript with  to write 10 squared as 10², and a deleted word with <del>.

← How the web works and your first HTML page Links, lists and tables →

HTML

Keep going in Web Developer Path

How the web works and your first HTML page

Complete the page: give it the title `My page`, put an `h1` heading inside the body, add two lines of text separated by ` `, and add an HTML comment.

Start →3

Links, lists and tables

Build a timetable table with a heading row of three `th` cells (Day, Subject, Time) and at least two rows of three `td` cells. Then add an ordered list of three steps and a link to `#top`.

Start →4

Images, audio, video and embeds

Write a figure that contains an image (with `src` and `alt`) and a caption, then an `audio` player with `controls` and a `video` player with `controls`.

Start →5

Semantic page layout

Build the layout: a `header` with an `h1` and a `nav` holding two links, a `main` with a `section` that contains an `article`, an `aside`, and a `footer` with some text.

Start →6

Forms and user input

Build a sign-up form with labelled text, email and password fields, two radio buttons that share the name `level`, a checkbox, a `select` with two `option`s, a `textarea` and a submit button.

Start →

Practise the idea

🐞 Play Bug Hunter

A Python program prints the wrong answer. Find the one line with the bug, then see the fix and why it was wrong.

Play now

FAQ

Elements, attributes and text formatting: common questions

What is the difference between an id and a class?

An id identifies one single element and must be unique on the page. A class names a group of elements, and the same class can be used on as many elements as you like.

Which tags have no closing tag?

Void elements such as br, hr, img and input have no content, so they have no closing tag.

Should I use strong or b to make text bold?

Use strong when the text is important, because it carries meaning that screen readers and search engines understand. Use CSS to make text bold for looks only.

I am stuck. What can I do?

Press Hint for a nudge, read the message next to each goal, and compare your code with the lesson text. If you still need it, Show answer reveals a model solution. Try to type it yourself rather than copy it.

Does my work get saved?

Your ticks and XP are saved in this browser, and in your account if you log in. The code you type is not stored on a server.

Start a conversation

Enjoying coding? Meet a teacher.

Tell us the learner's age, country and what they would like to build, and we will suggest a class. A parent or guardian can make the enquiry.

Tell us the learner’s age or grade and goals
We’ll suggest a suitable class or learning path
We’ll confirm format, timing and fees with a parent or guardian

Play it, don't just read it

Write some code right now

Free games that need no sign-up. Pick one and play for five minutes.

All free games →

Pick a game

Today's maths challengeFive questions · the same for everyone today · keep your streak goingPlay