Underline and Highlight

Learn how to underline text and highlight relevant content using HTML and CSS.

Introduction

HTML and CSS provide different ways to visually distinguish text. The <u> element can represent text with an unarticulated annotation, while the <mark> element highlights text because it is relevant to the current context.

The <u> Element

The <u> element represents text with a non-textual annotation. Browsers commonly render it with an underline.

Syntax

<u>Underlined Text</u>

Example

<p>
    Learn <u>HTML</u> step-by-step.
</p>

Output

Example Uses of <u>

<p>
    This word has an
    <u>annotation</u>.
</p>

<p>
    Check the
    <u>speling</u>
    in this sentence.
</p>

The <mark> Element

The <mark> element represents text that is highlighted because it is relevant to the user's current context.

Syntax

<mark>Highlighted Text</mark>

Example

<p>
    Learn <mark>HTML</mark> first.
</p>

Output

Common Uses of <mark>

<p>
    Search result:
    <mark>HTML</mark>
</p>

<p>
    Learn
    <mark>semantic HTML</mark>.
</p>

<p>
    Found:
    <mark>JavaScript</mark>
</p>

<p>
    Focus on
    <mark>HTML Tags</mark>
</p>

<u> vs <mark>

Underline Using CSS

When the goal is purely visual styling, CSS is usually more appropriate than using HTML semantics.

<p class="underlined-text">
    HTML Course
</p>

<style>

    .underlined-text {
        text-decoration: underline;
    }

</style>

Different Underline Styles with CSS

Custom Highlighting with CSS

CSS can also be used when you need a custom visual highlighting style.

<span class="custom-highlight">
    Important Text
</span>

<style>

    .custom-highlight {
        background-color: yellow;
        padding: 2px 5px;
    }

</style>

Combining Underline and Highlight

<p>
    <u>
        <mark>Important HTML Topic</mark>
    </u>
</p>

Semantic Meaning

Accessibility Considerations

Text styling should not be the only way important information is communicated.

Real-World Example

<h2>
    HTML Course
</h2>

<p>
    Focus on the
    <mark>HTML Tags</mark>
    chapter first.
</p>

<p>
    Review the
    <u>important note</u>
    before continuing.
</p>

Common Mistakes

• Using <u> only because you want visual decoration.
• Using highlighting everywhere without a meaningful reason.
• Using color alone to communicate important information.
• Forgetting that CSS can control visual underline and highlight styles.

Practice Exercise

1. Underline a word using <u>.
2. Highlight an important keyword using <mark>.
3. Create a custom underline using CSS.
4. Create a custom highlight using CSS.
5. Compare semantic HTML with purely visual CSS styling.