Introduction
The <em> 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 <em> tag in HTML and its basic syntax.
Note: You can practice coding in
index.htmland 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.
Adding a Header
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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> tag using CSS. Keep practicing to become a master of HTML tags and elements.
