Lesson 3: HTML Tags

Learning goals: By the end, you'll know what tags do, how to use the most common ones, and how attributes change how tags behave in web design.

What is a tag?
A tag is a label in angle brackets that tells the browser what a piece of content is. Most tags come in pairs.

htmlCopy<p>This is a paragraph.</p>  
Try:Agent|Desktop

• <p> is the opening tag.
• </p> is the closing tag (note the /).
• Together with the content, they form an element.

Void (self-closing) tags
Some tags have no content, so they have no closing tag:

htmlCopy<br>              <!-- line break -->  
<hr>              <!-- horizontal line -->  
<img src="cat.jpg" alt="A cat">  
<input type="text">  
Try:Agent|Desktop

Headings: <h1> to <h6>
Headings create a hierarchy. <h1> is the most important and <h6> the least.

htmlCopy<h1>Main title</h1>  
<h2>Section</h2>  
<h3>Subsection</h3>  
Try:Agent|Desktop

Rules of thumb:

• Use one <h1> per page.
• Don't skip levels (for example, <h1> straight to <h4>).
• Choose headings for meaning, not size. CSS controls size.

Paragraphs and line breaks

htmlCopy<p>This is the first paragraph.</p>  
<p>This is the second.<br>This line starts on a new line inside it.</p>  
Try:Agent|Desktop

Use <p> for blocks of text and <br> only when a line break is part of the content, like an address or poem.

Text formatting tags

htmlCopy<p>This is <strong>very important</strong> and <em>emphasised</em>.</p>  
Try:Agent|Desktop

Prefer <strong> and <em> over the older <b> and <i>. They carry meaning, which helps screen readers.

Attributes: extra information for tags
Attributes sit inside the opening tag as name="value".

htmlCopy<a href="https://example.com" target="_blank">Visit Example</a>  
<p id="intro" class="highlight" title="Hover to see me">Hello</p>  
Try:Agent|Desktop

Tag cheat sheet

Common mistakes

• Forgetting the closing tag or the /
• Using headings just to make text big
• Using <br> repeatedly to create space (use CSS instead)
• Missing quotes around attribute values
• Using more than one id with the same name
• Not making full use of a page's H1, H2, H3 tags for web design.

Key takeaways

• Tags label content so browsers know what it is.
• Most tags come in pairs. Void tags stand alone.
• Headings give structure, so use them in order.
• Attributes add extra information inside the opening tag.

Exercises

1. Identify. In <a href="page.html" title="Go">Home</a>, name the tag, the attributes and the content.
   Answer: tag a, attributes href and title, content Home.
2. Fix the errors.

   htmlCopy<h1>My Recipe  
   <p>Mix <strong>flour and eggs</p></strong>  
   <p class=intro>Enjoy!<p>  
   Try:Agent|Desktop

   
   Hints: close <h1>, fix the misnesting, quote "intro", and close the last paragraph with </p>.
3. Build it. Create tags.html with:
   • an <h1> with your name
   • an <h2> called "About Me"
   • two paragraphs, one using <strong> and one using <em>
   • a <hr> between the paragraphs
   • a title attribute on one paragraph
4. Challenge. Add a <mark> word, a <small> note and a <code> snippet. Hover over your title paragraph to see the tooltip.

Lesson 3 checkpoint

• I can tell opening, closing and void tags apart.
• I can use headings in the right order.
• I can add attributes to a tag.
• I know why <strong> and <em> are better than <b> and <i>.