html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Basics

Lesson 5 - Emphasising Text

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> tag 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


<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>

Reviewing Our Changes

Ok with the changes copied and pasted into the file, your HTML code should now look like the code below.


<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML and CSS 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.

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.

notepad

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.

Related Tutorials

HTML4 Intermediate Tutorials - Lesson 3 - Formatting Text

HTML4 Advanced Tutorials - Lesson 2 - A Final Tour of Text Tags

What's Next?

In the next lesson we learn all about ordered and unordered lists.



Paragraphs  << Prev           Next >>  Ordered and Unordered Lists

HTML4 Reference

The <em> emphasis tag

The <strong> strong emphasis tag

go to home page Homepage go to top of page Top

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>