HTML5 Text Tags & Lists Tags with Examples

HTML5 Text Tags & Lists Tags

In this section, we are going to learn about HTML5 text tags (bold, italic, line break and horizontal rule) and lists (ordered and un-ordered) tags.

Formatting Text or Text Decoration

HTML 5 documents include a lot of text, images, videos, multimedia, and other types of content, making it important for you to format blocks of content to lay a strong foundation for your web page. In chapter 2, you learned how to organize text in HTML 5 using block-level elements, such as paragraphs and headings. In this chapter, you will explore other important elements that will help you format the text properly.

Bold and Italics

HTML 5 introduces some new formatting elements that were missing from previous versions. For instance, it is strongly recommended that you use opening and closing tags for making a chunk of text bold instead of using .

Similarly, HTML 5 experts prefer using emphasize element tag for italic rather than . This effectively informs the browser that it is an HTML 5 document and that the content between the and tags is in italics.

Example 1

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Basic Page Structure</title>
</head>
<body>
<h1>HTML 5 Beginner Level Course</h1>
<p>This is a <strong>bold</strong>text</p>
<p>This <em>text</em> is in italics</p>
</body>
</html>

OUTPUT

Line Breaks and Horizontal Rule

HTML 5 normally ignores line breaks unless you use certain formatting elements or tags which break the line as needed. The most common of these elements is the line break element, commonly referred to as . Look at example 2 to see what happens when we try to put some space between two words or lines within a paragraph without

Example 2

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Basic Page Structure</title>
</head>
<body>
<h1>HTML 5 Beginner Level Course</h1>
<p>This is a <strong>bold</strong>text</p>
<p>This <em>text</em> is in italics</p>
<p>This line is broken into two parts</p>
</body>
</html>

OUTPUT

As you can see, HTML5 has totally ignored the line breaks. Now we’ll put in a to break the line and see what happens.

Example 3

<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8">
<title>Basic Page Structure</title>
</head>
<body>
<h1>HTML 5 Beginner Level Course</h1>
<p>This is a <strong>bold</strong>text</p>
<p>This <em>text</em> is in italics</p>
<p>This line is broken into<br>
two parts</p>
</body>
</html>

OUTPUT

Now, HTML 5 has inserted the line break as we wanted it to. Remember that is a self-closing tag and does not require any separate closing tag to complete the code.

Just like , horizontal rule, or <hr>, is also a self-closing tag; it is used to put solid straight lines, called rules, on your page. A horizontal rule is a good option to break a page into logical sections or to separate headers and footers from the rest of the page.

Another important tag that is commonly used in HTML 5 is the opening and closing tag. The tag informs the browser that a specific piece of content is underlined. The following example demonstrates how to use these tags in HTML 5.

Example 4

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Basic Page Structure</title>
</head>
<body>
<h1>HTML 5 Beginner Level Course</h1>
<p>This is a <strong>bold</strong>text</p>
<p>This <em>text</em> is in italics</p>
<p>This line is broken into<br>
two parts</p>
<hr>
<p>This <u>text</u> is underlined</p>
</body>
</html>

OUTPUT

Organizing Text in Lists

You will create lists if you are looking to group similar information on your page. Lists allow your visitors to easily go through groups of information. You can include anything in the list from sets of information to links. There are four main types of lists: the unordered list, the ordered or numbered list, the definition list, and the nested list.

The Unordered Lists

An unordered or bulleted list contains one or more items prefaced by bullets. An unordered list requires at least three elements in the following order.

<ul> the unordered list element
<li> which marks each element in the list
</ul> the closing tag which indicates the unordered has ended

The following example contains the markup for unordered lists.

Example 5

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Organizing Content</title>
</head>
<body>
<h1>Following is an unordered list</h1>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
</body>
</html>

OUTPUT

Ordered or Numbered List

A number prefaces all the items in an ordered or numbered list. An ordered list always has at least two items. Just like unordered lists, an ordered list contains the following three elements.

<ol> the ordered list element
<li> which marks each element in the list
</ol> the closing tag indicating the ordered has ended

The following example contains the markup for an ordered list.

Example 6

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Organizing Content</title>
</head>
<body>
<h1>Following is an ordered list</h1>
<ol>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ol>
</body>
</html>

OUTPUT

The Definition List

Definition lists are used to group definitions and terms into a single list on a page. Again, the definition list requires the following three elements.

<dl> the element which defines the definition list
<dt> the element which marks the term in the definition list
<dd> defines the term in the definition list

The HTML for the definition list is as follows.

Example 7

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Organizing Content</title>
</head>
<body>
<h1>Following is Definition List</h1>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascade Stylesheets</dd>
<dt>W3C</dt>
<dd> World Wide Web Consortium</dd>
</dl>
</body>
</html>

OUTPUT

It is pertinent to note that different browsers display definition lists differently. Similarly, each search engine handles them in different ways, as do text-to-speech translators.

Nesting Lists

Finally, there are nesting lists that are actually subcategories within lists. They are mostly used for creating navigation tools, site maps, table-of-contents for online papers and books, and outlines. You can combine any of the first three types of lists with each other to create a nested list.

The following example starts with a numbered list, which defines things you need to do to lose weight, and further divides them into specific tasks.

Example 8

<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8">
<title> Organizing Content</title>
</head>
<body>
<h1>How to Lose Weight</h1>
<ol>
<li>Exercise Regularly
<ul>
<li>Go to Gym Daily</li>
<li>Take Morning Walk</li>
<li>Play sports Regularly</li>
</ul>
</li>
<li>Take Balanced Diet
<ul>
<li>Minimize fats in your diet</li>
<li>take protein rich diet</li>
<li>Avoid Junk Food</li>
</ul>
</li>
</ol>
</body>
</html>

OUTPUT

You can include as many items as you like in nested lists. However, when working with nested lists, you need to keep few things in mind:

A complete second-level list follows each list in a top-level ordered or unordered list.
The second level list does not rest in the list items but in the top-level list.
Nested lists can become quite complex; therefore, you should close all tags very carefully to avoid any rendering issues.

Exercise 3

Task:
Create an ordered list containing the names of any three states of the United States. Then, create three nested lists within the ordered list containing the names of two cities of each state.

Solution:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Exercise 3</title>
</head>
<body>
<h1>States of USA</h1>
<ol>
<li>California
<ul>
<li>Sacramento</li>
<li>Los Angeles</li>
</ul>
</li>
<li>Florida
<ul>
<li>Miami</li>
<li>Orlando</li>
</ul>
</li>
<li>Texas
<ul>
<li>Austin</li>
<li>Houston</li>
</ul>
</li>
</ol>
</body>
</html>