Text-Based Elements
HTML provides us with a variety of elements that are used for text-based content. While browsing the web, you might notice that web pages typically have similar text-based content. Most web pages will contain a page heading. The content will typically comprise headings, paragraphs, and lists. HTML equips you with tools to format such elements within a web page.
In this section, we will be looking at the following HTML text-based elements:
- Headings
- Paragraphs
- Inline text elements
- Lists
Headings
Heading elements in HTML offer six levels of hierarchy, ranging from h1 to h6. Now, h1 is typically only used once on a page as it is the topmost heading for the document as a whole. The following code snippet shows how all of these headings are used and what they look like in the browser by default:
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
A web page from the preceding code would appear as follows:
Figure 3.1: Headings shown in a browser
Paragraphs
Paragraphs in HTML can be represented using the p tag. On a web page, you might have chunks of the core content of a topic presented to the reader. Such content is included under a p tag in HTML. The following code snippet shows how you would include paragraphs in a document and what they look like by default in the browser:
<p>Horatio says 'tis but our fantasy,
And will not let belief take hold of him
Touching this dreaded sight, twice seen of us.
Therefore I have entreated him along,
With us to watch the minutes of this night,
That, if again this apparition come,
He may approve our eyes and speak to it.</p>
<p>Tush, tush, 'twill not appear.</p>
<p>Sit down awhile, And let us once again assail your ears,
That are so fortified against our story,
What we two nights have seen.</p>
Note
The text used for the preceding code is a work of Shakespeare sourced from the following: https://packt.live/2Cmvni4.
A web page for the preceding code will appear as follows:
Figure 3.2: Paragraphs shown in a browser
Inline Text Elements
As a designer of web pages, you may often find yourself in a situation where you need to highlight special terms in a paragraph. Fortunately, HTML provides a solution to this.
It is possible to add what are called inline elements around text contained within paragraphs. Think of using a word processor: you are able to make words bold, underlined, italicized, and so on. HTML provides developers with this ability, and we will now look at some of the most common examples.
If you want to emphasize some text, you can use the em tag. An example of how you would use this and what it would look like in a browser is shown here:
<p>I need to wake up <em>now</em>!</p>
A web page for the preceding code would appear as follows:
Figure 3.3: The em tag as it appears on a web page
When you want to show some text as having serious importance, you can use the strong tag. An example of how you would use this and what it would look like in a browser is shown here:
<p>Before leaving the house <strong>remember to lock the front door</strong>!</p>
A web page for the preceding code would appear as follows:
Figure 3.4: The strong tag as it appears on a web page
Perhaps the most important of all the inline text-based elements is the anchor element, which allows you to add hyperlinks. To inline a link, you use an a tag wrapped around some text. An example of how you would use this and what it would look like in a browser is shown here:
<p>Please click <a href="http://www.google.com">here</a> to go to google</p>
A web page for the preceding code would appear as follows:
Figure 3.5: Anchor as it appears on a web page
Another important inline element for you to learn to use is the span tag. This is similar to the div tag but is used for inline elements. The span tag is used as a generic way to divide up content and has no inherent meaning, unlike the other inline tags mentioned previously in this chapter. A common use case is when styling a part of an element's content differently to the rest of the content. The following code shows an example of this:
/* styles */
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
<!-- markup -->
<p>My favorite colors are <span class="red">red</span>, <span class="green">green</span> and <span class="blue">blue</span>.</p>
A web page for the preceding code would appear as follows:
Figure 3.6: Paragraph with highlighted words as it appears on a web page
Lists
Another common type of text-based element that you will be very familiar with is the list. In HTML, these come in three different types: an unordered list, an ordered list, and a definition list. We will take a look at the differences between these types of lists and when you should use them.
Let's begin by taking a look at by far the most common type of list, the unordered list, which is expressed in HTML as ul, with li being used for the list items. You will most likely be very familiar with this type of list in your everyday life. A common example of this type of list could be a shopping list or a list of things you need to pack before going on holiday. What makes this type of list unordered is the fact that the order of the items in the list isn't important. The following code shows an example of this type of list as you would use it in HTML:
<!-- Shopping list -->
<ul>
<li>Ice Cream</li>
<li>Cookies</li>
<li>Salad</li>
<li>Soap</li>
</ul>
A web page for the preceding code would appear as follows:
Figure 3.7: Unordered list as it appears on a web page
Following the unordered list, we have the ordered list, which is expressed in HTML as ol, with li being used for the list items. You are probably also quite familiar with this type of list in your everyday life. A common use case for the ordered list could be a recipe shown in a list of sequential steps. With this type of list, the ordering is important, unlike in the unordered list we just looked at. The following code shows an example of this type of list as you would use it in HTML:
<!-- Cheese on toast recipe -->
<ol>
<li>Place bread under grill until golden brown</li>
<li>Flip the bread and place cheese slices</li>
<li>Cook until cheese is golden brown</li>
<li>Serve immediately</li>
</ol>
A web page for the preceding code would appear as follows:
Figure 3.8: Ordered list as it appears on a web page
If you want to use an ordered or unordered list but don't want to show bullet points or numbers, you have a range of options. Using CSS, you can customize the style of list using the list-style property:
/* Alternative styles for unordered lists */
.square {
list-style: square;
}
.circle {
List-style: circle;
}
/* Alternative styles for ordered lists */
.upper-alpha {
list-style: upper-alpha;
}
.upper-roman {
List-style: upper-roman;
}
The following figure shows the output of the preceding code:
Figure 3.9: Unordered list shown with the different list styles
It is also possible to nest lists and use different list styles for each list. In the following HTML code, you will see that we have different lists being nested:
<ol>
<li>Numbered</li>
<ol class="alphabetic">
<li>Alphabetic</li>
<ol class="roman">
<li>Roman</li>
<li>Roman</li>
</ol>
<li>Alphabetic</li>
</ol>
<li>Numbered</li>
</ol>
We just need to add two class names to style the two nested lists with alphabetic and Roman list styles as shown here:
.alphabetic {
list-style: upper-alpha;
}
.roman {
list-style: upper-roman;
}
The following figure shows the output of the preceding code:
Figure 3.10: Nested lists shown with different list styles
The third type of list is the definition list, which is expressed in HTML as dl. Although this type of list is used less frequently than the two other types of lists, you will probably still be familiar with it. The definition list is used when you want to list out pairs of terms and descriptions. The most common use of this type of list is probably dictionary entries. You have the word you are interested in, which is the term, dt, followed by the definition, which is the description, dd. The following is an example of this type of list as you would use it in HTML:
<!-- Dictionary -->
<dl>
<dt>HTML</dt>
<dd>Hypertext markup language</dd>
<dt>CSS</dt>
<dd>Cascading style sheets</dd>
</dl>
A web page for the preceding code would appear as follows:
Figure 3.11: Definition list as it appears on a web page
Exercise 3.01: Combining Text-Based Elements
In this exercise, we will use the following screenshot from the Packt website and write the HTML to match it as closely as possible. This will give us some practice of creating text-based content and recreating the correct HTML for it.
The following figure shows the sample piece of content that we will recreate from the Packt website:
Figure 3.12: Screenshot from the Packt website
Let's complete the exercise with the following steps:
- First, start by creating a new file in VSCode called text.html and use the following code as a starting point:
<!DOCTYPE html>
<html>
<head>
<title>Combining text based elements</title>
</head>
<body>
<!-- your code will go here -->
</body>
</html>
- Looking at the preceding screenshot, we can see that we will need a heading. Since the heading is not the top-level heading for the page, we will use h2 in this instance. We will wrap the tag around the text in between the opening and closing body tags as follows:
<body>
<h2>eBook Support</h2>
</body>
- Below the heading, we have a list of bullet points. We can assume that these are unordered and, hence, use a ul tag for them. Notice that each list item contains a link as well, so we need to include an anchor tag for each. We will place our code just below the h2 heading as follows:
<body>
<h2>eBook Support</h2>
<ul>
<li>If you experience a problem with using or installing Adobe Reader, the contact Adobe directly at <a href="www.adobe.com/support">www.adobe.com/support</a></li>
<li>To view the errata for the book, see <a href="www.packtpub.com/support">www.packtpub.com/support</a> and view the pages for the title you have.
</li>
<li>To view your account details or to download a new copy of the book go to <a href="www.packtpub.com/account">www.packtpub.com/account
</a></li>
</ul>
</body>
If you now right-click on the filename in VSCode on the left-hand side of the screen and select open in default browser, you will see the web page in your browser:
Figure 3.13: Output of combining text-based elements
You are now getting a feel for the various different text-based HTML elements and when you should use them. Before we start looking into how we will go about styling the HTML elements we have just learned, we will take a look at semantic markup.