You have reached the final topic in the Level 4 HTML Essentials series. Here we cover three small ideas
that make your code clearer and safer: comments, attributes, and
character entities.
Notes, attributes, and special characters
Three small tools make your HTML easier to read and more correct.
A comment<!-- like this --> is a note for humans reading the
code. The browser hides it from the page.
An attribute adds extra information to an element. Common ones are
id (a unique name), class (a group name), title (a hover
tooltip), and lang (the language).
A character entity lets you write a reserved or special character so it shows
correctly in the page instead of being read as markup.
Copy this and open it in a browser. The comment disappears, the title shows a tooltip when
you hover, and the entities display the right characters:
You will not see the comment. Hover over the section to see the "Welcome message" tooltip, and the
paragraph shows an ampersand and a copyright symbol.
Key points
Comments are for people reading the code - the browser never displays them.
You need entities for <, >, and & in text,
because the browser reads those as markup.
An id must be unique on the page; a class can be shared by many elements.
Exercises
Exercise 1 - Document a page with comments
Preparation: re-read the comment part of "Notes, attributes,
and special characters" above.
Add comments to your own page that split it into clear parts - for example a
comment before the header, one before the main content, and one before the footer. Write each
comment in the form <!-- note -->.
Try it in: your editor - comments change nothing visible,
so reload the page and confirm it still looks the same.
Hint 1 - direction
A comment starts with
<!-- and ends with -->.
Hint 2 - partial solution
Place each comment on its own
line, just above the element it describes.
Hint 3 - full solution
Check your work: every comment is in
<!-- ... --> form, and the page looks exactly the same as before.
Exercise 2 - Add a tooltip with the title attribute
Preparation: re-read the attributes part of the theory above.
Add a title attribute to an element on your page (for example a
link or an abbreviation) so that hovering over it shows a small tooltip.
Try it in: your editor, then hover over the element in
the browser and wait a moment for the tooltip to appear.
Hint 1 - direction
The title attribute goes
inside the opening tag.
Hint 2 - partial solution
Write title="…" with
the text you want to appear.
Hint 3 - full solution
Check your work: hovering over the element shows a small grey
tooltip with your text.
Exercise 3 - Predict how < renders
Preparation: re-read the entity table above.
Without running it, predict what the browser will display for this text:
<h1>. Then explain why you need the entities instead of typing
< and > directly.
No code needed - answer in a sentence, then check in the
browser.
Hint 1 - direction
< means "less than"
and > means "greater than".
Hint 2 - partial solution
Think about what
< and > normally start in HTML.
Hint 3 - full solution
The browser shows the literal text
<h1>. If you typed < and > directly, the browser
would read them as a real heading tag instead of showing the characters.
Check your work: you predicted that the characters
< and > would be shown as text, not treated as a tag.
Exercise 4 - Fix a < that breaks your markup
Preparation: re-read the entity part of the theory above.
A page is meant to say "Use < to mean less than", but the
browser hides the text and mis-reads the bare < as the start of a tag. Fix it
using the correct entity so the sentence shows correctly.
Try it in: your editor, then reload the page in the
browser.
Hint 1 - direction
The bare < needs to be
replaced with an entity.
Hint 2 - partial solution
The entity for a less-than sign is
<.
Hint 3 - full solution
Check your work: the browser now shows "Use < to mean less
than" and nothing is hidden.