Reference · module 1

Tags and elements

Everything this module explains, on one page.

Your first tag

Read and write an HTML element with opening and closing tags.

HTML describes what each part of a page is. <p>Hello</p> is a paragraph: <p> opens it, </p> closes it, and Hello between them is the content.
The closing tag repeats the name with a slash: </p>, </h1>, </strong>. The opening tag, the content and the closing tag together form an element.
The browser never shows the tags themselves. <strong>Sale</strong> appears as a bold Sale. Tags are instructions to the browser, not text for the reader.

The mistake you are about to make

<p>Hello<p>

<p>Hello</p>

The second tag looks like a copy of the first, so the slash is easy to forget. Without it the browser sees a new paragraph opening instead of this one closing.

Headings and paragraphs

Structure text with headings of the right level.

Headings go from <h1>, the most important, to <h6>, the least. A page has one <h1> for its main title, then <h2> for sections and <h3> inside those.
Pick the level by meaning, not by size. Screen readers and search engines use headings as the page outline, and CSS can make any of them any size.
Line breaks and extra spaces in the code are collapsed into one space. Two lines of text inside one <p> show as a single line; separate paragraphs need separate <p> elements.

The mistake you are about to make

<h3>My blog</h3> as the page title

h3 looks a nicer size, so it gets picked for the title. The level says how important a heading is; change the size with CSS instead.

Elements inside elements

Nest elements correctly and close them in the right order.

Elements go inside each other: <p>This is <strong>important</strong></p>. The <strong> element is a child of the paragraph, and it must close before the paragraph does.
Close tags in reverse order, like stacking boxes: the last one opened is the first one closed. <p><em>hi</em></p> is right; <p><em>hi</p></em> is broken.
<strong> marks important text and shows bold; <em> marks emphasis and shows italic. They carry meaning, which is why they are preferred over purely visual styling.

The mistake you are about to make

The tags were opened p then strong, so closing them in the same order feels tidy. Nesting works like boxes: the inner one must close first.

Back to the map

Reference · module 1

Tags and elements

Everything this module explains, on one page.

Your first tag

Read and write an HTML element with opening and closing tags.

HTML describes what each part of a page is. <p>Hello</p> is a paragraph: <p> opens it, </p> closes it, and Hello between them is the content.
The closing tag repeats the name with a slash: </p>, </h1>, </strong>. The opening tag, the content and the closing tag together form an element.
The browser never shows the tags themselves. <strong>Sale</strong> appears as a bold Sale. Tags are instructions to the browser, not text for the reader.

The mistake you are about to make

<p>Hello<p>

<p>Hello</p>

The second tag looks like a copy of the first, so the slash is easy to forget. Without it the browser sees a new paragraph opening instead of this one closing.

Headings and paragraphs

Structure text with headings of the right level.

Headings go from <h1>, the most important, to <h6>, the least. A page has one <h1> for its main title, then <h2> for sections and <h3> inside those.
Pick the level by meaning, not by size. Screen readers and search engines use headings as the page outline, and CSS can make any of them any size.
Line breaks and extra spaces in the code are collapsed into one space. Two lines of text inside one <p> show as a single line; separate paragraphs need separate <p> elements.

The mistake you are about to make

<h3>My blog</h3> as the page title

h3 looks a nicer size, so it gets picked for the title. The level says how important a heading is; change the size with CSS instead.

Elements inside elements

Nest elements correctly and close them in the right order.

Elements go inside each other: <p>This is <strong>important</strong></p>. The <strong> element is a child of the paragraph, and it must close before the paragraph does.
Close tags in reverse order, like stacking boxes: the last one opened is the first one closed. <p><em>hi</em></p> is right; <p><em>hi</p></em> is broken.
<strong> marks important text and shows bold; <em> marks emphasis and shows italic. They carry meaning, which is why they are preferred over purely visual styling.

The mistake you are about to make

The tags were opened p then strong, so closing them in the same order feels tidy. Nesting works like boxes: the inner one must close first.

Back to the map