So now we have brought some structure to our content with the use of the headings, paragraph and forced line break tags. Its time to learn how to make important textual stuff stand out from the crowd.
The <em> Tag
The <em> and its closing </em> tag emphasise our text with italics.
The <strong> Tag
The <strong> tag and its; closing </strong> tag strongly emphasise the enclosed content, making it bold in word processor parlance.
Open the file with Notepad we created and tested in Lesson: 4 Paragraphs and Line Breaks
You saved the file to your computer in the C:\_HTMLBasics folder as lesson_4_webpage.html
Copy and paste the following code into the reopened file, overwriting the existing contents:
<html xmlns="http://www.w3.org/1999/xhtml/"> <head> <title>HTML Tutorials - Basic HTML Lesson 5 - Emphasising Text</title> </head> <body> <h1>Heading 1</h1> <p><strong>Heading 1</strong> tags should be used <em>sparingly</em>.</p> <h2>Heading 2</h2> <p><strong>Heading 2</strong> good for <em>section</em> headings.</p> <h2>Heading 3</h2> <p><strong>Heading 3</strong> good for <em>sub-section</em> headings.</p> <h4>Heading 4</h4> <p><strong>Heading 4</strong> generally same size as <em>standard</em> text.</p> </body> </html>
When your file matches the HTML code above, save in the C:\_HTMLBasics folder as lesson_5_webpage.html and close the Notepad.
Viewing Our Changed File
From the C:\_HTMLBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.
As you can see the <em> tag emphasises the text and the <strong> tag strongly emphasises the text.
Lesson 5 Complete
In this lesson we learned about making content stand out by using the <em> and <strong> tags.
In the next lesson we learn all about ordered and unordered lists.