Lesson 1
Bold, italic and quotes
strong, em, and HTML that means something.
Important and emphasised
<strong> says “this is important”. Browsers show it in bold.
<em> says “say this word with emphasis”. Browsers show it in italics.
They go inside a paragraph, around just the words you mean. Screen readers can even change their voice for them.
<p>Never <strong>ever</strong> touch the stove. It is <em>very</em> hot.</p>Tags that mean something
HTML is about meaning, not looks. Some more tags for text:
<blockquote>for a quote from someone else
<code>for a bit of code, shown in a code font
<mark>for highlighted text
To make something look different (red, bigger, centred), you’ll use CSS. HTML says what it is.
<p>Professor Curly said:</p>
<blockquote>Run it and see.</blockquote>
<p>Type <code>console.log</code> to print.</p>Lesson 2
Links
Attributes, href, and linking pages together.
The “a” in “anchor”
Links are what make the web a web. The tag is <a>, short for anchor:
The address goes in an attribute called href. Attributes are extra settings inside the opening tag: a name, =, and a value in quotes.
The text between <a> and </a> is what people see and click.
<a href="https://curlyscript.com">Learn to code for free</a>Near and far
To link to another website, use the full address, starting with https://.
To link to another page on your own site, a short address is enough: href="about.html" finds about.html next to the current page.
Add target="_blank" to open the link in a new tab. Use it sparingly: people like to stay in control of their tabs.
<a href="about.html">About me</a>
<a href="https://en.wikipedia.org" target="_blank">Wikipedia</a>Lesson 3
Pictures
img, src and alt: pictures everyone can enjoy.
Putting a picture on the page
<img> shows a picture. It has no closing tag: there’s nothing to put inside it.
It needs two attributes:
src(source): where the picture is, likecat.jpgor a full address
alt(alternative text): a short description of the picture
You can also set width to change its size, in pixels.
<img src="curly.png" alt="Professor Curly smiling" width="80">Why alt matters
People who are blind use screen readers, which read the page out loud. They can’t see your picture, so the screen reader reads its alt text instead.
alt also shows up when a picture fails to load, and it helps search engines understand your page.
Describe what matters: alt="A girl kicking a football", not alt="image". If a picture is just decoration, use an empty alt="" so screen readers skip it.
Recap
What Level 2 covers, in a few lines.
<strong>marks important text (bold) and<em>adds emphasis (italic).- Tags can have attributes: extra settings in the opening tag, like
hrefin<a href="...">. The value goes in quotes. <a href="https://...">makes a link. The text between the tags is what people click.<img src="photo.jpg" alt="...">shows a picture.altdescribes it for people who can’t see it, and for when it doesn’t load.- A link to another page on your site can use a short address like
about.html. A link to another site needs the full address, starting withhttps://.
Now try it in HTML School
Write real code and watch your page change as you type, with a check after every step and a test at the end of each level. Free.