Mastering HTML Emphasized Text

Introduction

The  tag in HTML is used to add emphasis or importance to a specific text on a webpage. It is very useful to highlight specific content and make it more noticeable. In this lab, you will learn how to use the  tag in HTML and its basic syntax.

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(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") subgraph Lab Skills html/basic_elems -.-> lab-70749{{"`HTML Emphasized Text`"}} html/head_elems -.-> lab-70749{{"`HTML Emphasized Text`"}} html/text_head -.-> lab-70749{{"`HTML Emphasized Text`"}} html/para_br -.-> lab-70749{{"`HTML Emphasized Text`"}} html/nav_links -.-> lab-70749{{"`HTML Emphasized Text`"}} end

First, create an HTML file named index.html and open it in your preferred code editor.

Let's start by adding a title header to our HTML file. Type the following code in your index.html file.

<!doctype html>
<html>
  <head>
    <title>HTML Em Tag Lab</title>
  </head>
  <body></body>
</html>

Using the HTML `` Tag

Now that we have created our HTML file, it's time to use the  tag. In the next few steps, we will learn how to use this tag and its basic syntax.

Start by adding a short paragraph to your HTML file and use the  tag to emphasise a specific word. Here's an example:

<p>HTML <em>Emphasized</em> text is important for your web page.</p>

Adding more Emphasized Text

You can also use the  tag to emphasize multiple words in a sentence. Here's an example:

<p><em>HTML</em> stands for <em>HyperText Markup Language.</em></p>

Using CSS to style the HTML `` Tag

By default, the emphasized text is displayed in italics. However, you can also use CSS to customize the style of the  tag. Here's an example:

<style>
  em {
    font-style: normal;
    font-weight: bold;
  }
</style>
<p><em>CSS is</em> used to style HTML web pages.</p>

Adding a Link

You can also use the  tag inside a link, to emphasize the anchor text. Here's an example:

<a href="https://www.wikipedia.org"
  ><em>Wikipedia</em> is a free online encyclopedia.</a
>

Summary

Congratulations! In this lab, you learned about the HTML  tag and how to use it to add emphasis or importance to text on a webpage. You also learned how to customize the style of the  tag using CSS. Keep practicing to become a master of HTML tags and elements.

HTML Emphasized Text

Introduction

Skills Graph

Adding a Header

Using the HTML `<em>` Tag

Adding more Emphasized Text

Using CSS to style the HTML `<em>` Tag

Adding a Link

Summary

Other HTML Tutorials you may like

HTML Emphasized Text

Introduction

Skills Graph

Adding a Header

Using the HTML <em> Tag

Adding more Emphasized Text

Using CSS to style the HTML <em> Tag

Adding a Link

Summary

Other HTML Tutorials you may like

Using the HTML `<em>` Tag

Using CSS to style the HTML `<em>` Tag