HTML/CSS - 3

HTML/CSS - 3: Text Formatting

HTML can make certain words stand out from the rest of a paragraph. You can make text bold, italic, underlined, highlighted, or smaller by placing the right tag around the words you want to change.

For example, <strong> is useful when something is important, while <em> adds emphasis. Tags such as <mark>, <u>, and <small> give you a few more ways to change how parts of your text appear.

Your challenge: Write one short paragraph or mini-story and use at least four different formatting tags inside it.

What should you notice?

Formatting tags can appear inside a paragraph. You do not need to put every formatted word on a separate line. The browser changes only the text enclosed by each pair of tags.

For example, in <p>This cake is <strong>very important</strong>.</p>, only the words very important are affected.

Experiment: Try placing one formatting tag inside another. For example, can you make the same words both bold and highlighted?

Small HTML tip: <strong> and <em> are especially useful because they describe the meaning of the text as well as changing how it usually looks.

<h1>The Strange Sandwich</h1>

<p>
I opened my lunchbox and found a
<strong>gigantic sandwich</strong> inside.
The label said it was <em>definitely normal</em>,
but one ingredient was <mark>glowing</mark>.
</p>

<p>
There was also a note saying
<u>DO NOT PRESS THE RED BUTTON</u>.
<small>I pressed it anyway.</small>
</p>