Hack University - Emphasis, comments, and special characters

Meaningful emphasis

Real content needs emphasis, and HTML gives it meaning rather than only a look. That matters for the same reason headings did in lesson 2-2, since screen readers change their voice for emphasized text and search engines weigh it, but only when the elements that carry meaning are used.

<p>Submissions close <strong>Friday at noon</strong>.
You <em>must</em> include your email.</p>

Element	Meaning	Default look
`strong`	importance, such as a deadline or warning	bold
`em`	stress emphasis, the word you would lean on	italic
`b`	none	bold
`i`	none	italic

The bottom two rows produce the same pixels with no information attached, which is why strong and em are the default choice. Wanting only the look with no emphasis intended is a CSS job, covered in unit 4.

Comments and reserved characters

Two practical tools appear in every real file.

Comments are notes for humans that the browser ignores. Teams use them to label regions and to temporarily disable markup while debugging:

<!-- TODO: swap placeholder logo before launch -->

Character entities solve a genuine conflict, since < and & are reserved and the browser reads < as the start of a tag. Displaying those characters as content requires an entity, written &name;.

To display	Write
`<`	`<`
`>`	`>`
`&`	`&`

So a page that shows the literal code <p> must be written as <p>, or the browser interprets it as a real paragraph tag instead of showing it.

Documentation sites rely on this constantly, and this course's own code snippets are no exception. The trailing semicolon is part of the entity, and leaving it off usually renders the raw text &lt on the page.

Displaying a less-than sign

To make the text a < b appear on the page, the HTML reads a < b.

A bare < starts a tag, so the browser would swallow it and everything after it while hunting for a tag name. < is the entity that displays a literal less-than sign.

Written	Rendered
`a < b`	unpredictable, the browser looks for a tag
`a < b`	`a < b`

The failure is visually dramatic, since a chunk of the page simply disappears. That makes it one of the easier HTML bugs to spot once the cause is known.

Emphasis, comments, and entities together

Three details that trip people up, in one document.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Entities</title>
  </head>
  <body>
    <!-- main title -->
    <h1>Math club</h1>
    <p>Submissions close <strong>Friday at noon</strong>.</p>
    <p>Fun fact: 5 &lt; 10 is always true.</p>
  </body>
</html>

Feature	Syntax	Reaches the reader
importance	`<strong>...</strong>`	yes, bold and meaningful
a note to the team	`<!-- text -->`	no
a literal `<`	`<`	yes, as one character

The comment never appears on the page, and it does travel to the browser inside the source, so it is not a place for anything private. The entity keeps its semicolon, which is what marks where the entity name ends.

The element that carries importance

The element is strong.

It renders bold and carries the meaning of importance, so screen readers and search engines treat it accordingly. The b element produces the same pixels with no meaning at all.

Element	Bold	Meaningful
`strong`	yes	yes
`b`	yes	no

That is why strong is the default choice, since it costs nothing extra and carries more information. b survives for the rare case where bold text genuinely signals no emphasis, such as a keyword in a technical index.