Highlighted Text with Mark Tag

Introduction

In HTML, the  tag is used to highlight or mark the portion of text in order to show the importance of the text. In this lab, we will learn how to use the  tag to create highlighted text.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") subgraph Lab Skills html/basic_elems -.-> lab-70796{{"`HTML Highlighted Text`"}} html/charset -.-> lab-70796{{"`HTML Highlighted Text`"}} html/lang_decl -.-> lab-70796{{"`HTML Highlighted Text`"}} html/head_elems -.-> lab-70796{{"`HTML Highlighted Text`"}} html/text_head -.-> lab-70796{{"`HTML Highlighted Text`"}} html/para_br -.-> lab-70796{{"`HTML Highlighted Text`"}} end

Set up the HTML file

To begin, create an index.html file and set up the basic structure of the HTML file. Insert the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Highlighted Text with Mark Tag</title>
  </head>
  <body></body>
</html>

Add Text to Markup

In between the <body> tags, add some text. In this example, we will highlight the text "Brown fox" within a sentence.

<body>
  <p>The quick <mark>brown fox</mark> jumped over the lazy dog.</p>
</body>

Add a CSS style to change the default color

By default, the highlighted text will have a yellow background color and black text color. You can change these colors by adding CSS to the  tag. For example, to change the highlighted background color to red and the text color to white, add the following CSS style:

<style>
  mark {
    background-color: red;
    color: white;
  }
</style>

Optional): Add a Class Selector for Styling

If you have multiple instances of highlighted text on a page and you want to style them all the same way, you can add a class to the  tag and add a CSS class selector. In the following example, we will add a class named highlight to the  tag and then style it using CSS.

<body>
  <p>
    The quick <mark class="highlight">brown fox</mark> jumped over the lazy dog.
  </p>
  <p>The <mark class="highlight">sun</mark> is a star.</p>
</body>

<style>
  .highlight {
    background-color: green;
    color: white;
  }
</style>

Summary

That's it! You have learned how to create highlighted text with the  tag in HTML. By using the  tag and a few CSS styles, you can easily draw your readers' attention to important parts of your text.

HTML Highlighted Text