Text Styling

The Art of Giving Words Meaning

In HTML, words carry more than just their plain appearance — with the right text markup, they reveal deeper meaning. Through semantic elements like  and , you can emphasize certain parts of your copy, much like dramatically lowering your voice during a reading.

Semantic markups act like little helpful elves, making key points shine brightly as if someone cast a spotlight on them. With these small magical tricks, you’ll become a true master of digital storytelling. Every element in your copy comes together like a well-choreographed ballet, guiding your readers through your content with awe and smiles.

Let’s Keep Going

strong
emphasis
small
strike-through

underline
mark
sub
sup

Text Markup

Give Your Texts Weight and Meaning

The Brave Protectors

Courage to Emphasize

The element is like a valiant knight in shining armor, accenting your words with bold letters. But when it comes to true significance, reach for the element—beyond prominence, it provides real weight and substance. As for purely visual boldness, let CSS handle the heavy lifting. After all, even knights need a bit of delegation.

<strong>bold text</strong>

Graceful Emphasis

The Elegance of Italics

Like a graceful dancer gliding effortlessly across the stage, the element lends your text a touch of elegance and flair with its italicized style. But when true emphasis is needed, call upon the element—it adds not just form, but depth and meaning to your words, as if they carried a secret worth whispering.

<em>italicized emphasis</em>

Small Text

Reading the Fine Print

The element is like a gentle whisper in a crowded room—quiet but significant, delivering subtle information with a delicate touch. It scales text down to an unassuming size, making it perfect for footnotes or understated remarks. This ensures the main text stays in the spotlight, while the finer details hum softly in the background, adding layers of nuance without stealing the show.

<small>small text</small>

Strikethrough

Erasing the Past

The <s> element is like a crossed-out entry in an ancient spellbook, declaring what is no longer valid. With a single, graceful stroke, it signals that the text has lost its relevance or has been corrected—a subtle reminder that the tides of time and truth have shifted.

<s>strikethrough</s>

Underline

Marking With Care

The element is like the scholar meticulously underlining vital passages in ancient tomes. It ensures that certain parts of your text stand out. However, caution is advised—many links also wear the mark of the underline. Use this spell sparingly and only when the importance truly warrants it!

<u>underlined text</u>

Mark

The Highlighter for Text Passages

The element is like a magical highlighter, casting a neon glow over your text as if touched by an enchanted marker. It ensures that no one misses the crucial bits, directing all eyes straight to the heart of the matter.

<mark>highlighted text</mark>

Subscript

The Art of Shrinking

The element is like a mischievous magician, conjuring text below the baseline and shrinking it ever so slightly – as if it’s hiding in the shadows of the grander letters. It’s perfect for footnotes, chemical formulas, or small secret messages that remain subtle yet essential. A quiet helper that gracefully steps aside for the big words, all while discreetly working its magic.

H<sub>2</sub>O

Superscript

The Power of Elevation

The element is the expert of elevation, lifting text above the baseline – smaller yet undeniably significant. Be it superscript numbers, copyright symbols, or secret annotations, this magic raises them to lofty heights where they instantly catch the eye.

Logo<sup>©</sup>

In this lesson, you have learned…

How to emphasize text in bold or italics by using  for meaningful emphasis and  for purely visual highlighting, as well as  for meaning and  for style.
Why you use  for subtle notes, to unobtrusively display footnotes or legal disclaimers.
How to use <s> to mark text as outdated, making previous or invalid information visible.
When to use sparingly, as underlined text is often confused with links.
How , , and create special effects to highlight text, add subscripts, or superscripts — ideal for highlights, chemical formulas, or exponents.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Art of Markings

Deep within the secret temple of Greenwood Hollow, Seran, the slightly eccentric ranger, uncovered ancient scripts adorned with peculiar symbols—symbols that seemed to reveal more about the text’s meaning than the words themselves ever could. To solve these riddles, you must learn how to resurrect such symbols in the digital realm. With HTML markups, you can unveil hidden meanings and bring order to the chaos of words.

Your Task: Applying Text Markups

apply the text markups

Questions:

What is the difference between and , and when should they be used?
What is the significance of and in emphasizing and visually representing text?
In what situations might it be useful to use and <s>, and how do they change the visual representation of text?
What are the applications of and ?

Open Editor in a New Tab

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Hidden Signs</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <article>
        <h2>The Writings of Greenwood Hollow</h2>
        <p>In the deep forests, the <strong>ancient secrets</strong> of nature are hidden. It is said that the spirits 
            of the woods sometimes <em>whisper</em> when the wind moves through the trees.</p>
        <p>The tales of the forest are often concealed in <small>subtle hints</small> and can <mark>only be discovered</mark> 
            by those who listen with their hearts.</p>
        <p>Sometimes it is necessary to <s>hide</s> the truth or to <u>make it clearly visible</u>.</p>
        <p>The old Seran spoke of a <strong>foretold encounter</strong> where heroes must look <sup>above</sup> 
            and <sub>below</sub> the branches of the great tree to find the answer.</p>
    </article>
</body>

</html>

Let’s Keep Going