HTML: Live coding

Tracing

What does the following markup do?

A

<li>Choose a color using the <strong>Color Pane</strong>.</li>

B

<img
  src="george-birkbeck-portrait.avif"
  alt="A portrait from eighteen-thirty of 
  George Birkbeck gazing steadily forward with poise">

C

<section id="reader-comments" class="comment-section">
  ...
</section>

D

<navigation>
  <item>Home</item>
  <item>Shop</item>
  <item>Cart</item>
</navigation>

E

<form>
  <button>Log in</button>
</form>

F

<img href:cat.png>

Template recognition

Go to any website, find something that might have interesting HTML, and inspect it.

• Great British Bake Off
• Facebook
• GOV.UK

Questions for inspecting websites:

1. Can you predict what markup something will use before you inspect it?

2. Considering what you know about presentational and semantic HTML, what would you change about the markup, if anything?