Welcome to the third part of our HTML course, where we are going to discover how to work with and format text on a webpage. No doubt that the ultimate backbone of web content is text. That is why there are many elements and techniques in HTML for structuring and correctly styling it. In this section, we are going to learn how to format text, how to align it using the different elements in HTML, and how to display preformatted text exactly as you have written it in your code.
3.1 Formatting Text
When creating text in HTML, you can style and structure the text to make it present information both aesthetically pleasing to the user and readable. There are many elements devoted strictly to text formatting in HTML from the bold and italics to underlined text, etc.
Bold Text :
There are two elements that make text appear bold: <strong> and <b>. Both cause the text to display bold in the browser, but again, there is a semantic difference:
<strong>: Shows text is important.<b>: Makes text appear bold but does not indicate importance.
Example:
<p>This is <strong>important</strong> text and this is <b>bold</b> text.</p>
- Best Practice: Use
<strong>for cases when the bold text conveys semantic importance, such as keyword emphasis.
Italic Text :
Similar to bold text, HTML provides two elements to display text in italics:
<em>: Indicates that text is important and of importance or that it needs stress.<i>: Makes the text appear italic without any form of implication.
Example:
<p>This is <em>important</em> text and this is <i>italic</i> text.</p>
Underlined Text :
Use the <u> element to underline text. Note that underlined text is usually text that is a hyperlink, so use this element sparingly lest you confuse your users.
Example:
<p>This is <u>underlined</u> text.</p>
Strikethrough Text :
To mark text as having been “crossed out,” you can use:
<del>: Indicates that the text has been deleted or marked for removal.<s>: Used when the text is no longer pertinent or correct.
Example:
<p>This is <del>deleted</del> text and this is <s>struck-through</s> text.</p>
Subscript and Superscript :
- Subscript (
<sub>): Writes text slightly below the normal line of text. - Superscript (
<sup>): Writes text slightly above the normal line of text.
Example:
<p>H<sub>2</sub>O is the chemical formula for water. E = mc<sup>2</sup> is Einstein’s equation.</p>
Small Text :
The <small> element is used to display smaller, less prominent text.
Example:
<p>This is <small>small</small> text.</p>
Quotations :
For quoting text:
<blockquote>: Used for long block quotations.<q>: Used for inline quotations.
Example:
<blockquote cite="https://example.com">
This is a long block quote from a source.
</blockquote>
<p>This is an inline quote: <q>This is a quote.</q></p>
Abbreviations :
The <abbr> element is used to define abbreviations or acronyms. The title attribute is required to specify what the abbreviation stands for.
Example:
<p>The abbreviation for Hypertext Markup Language is <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
3.2 Text Alignment
Text-Alignment plays a huge role in the general outlook of your content. In HTML, we can use several elements and styles to align text and other content on the page.
Block-Level Elements: <div>
The <div> element is a block level element that groups content together. It has no inherent meaning but is used to align or organize content using CSS.
Example:
<div style="text-align: center;">
<p>This text is centered.</p>
</div>
In this exercise, we employed the CSS property text-align: center; to center the text inside the <div>.
Alignment Types:
text-align: left;(default)text-align: center;text-align: right;text-align: justify;
Inline Elements: <span>
The <span> element contrasts the <div> element since it’s an inline element (won’t force a line break). In usual, it’s used when one wants to add styles to a small block of text or content within a much larger block of text.
Example:
<p>This is a <span style="color: red;">red</span> word inside a paragraph.</p>
Here, the <span> element will apply inline CSS to change the text color red.
Using CSS for Advanced Text Alignment
HTML has only basic alignment capabilities, but with CSS you have more freedom. Using CSS, you can align your text horizontally or vertically, deal with line spacing, and much more, making it a tool for dynamic layouts.
- Centering Text Horizontally:
<div style="text-align: center;">
<p>This text is centered horizontally.</p>
</div>
- Centering Text Vertically:
<div style="display: flex; align-items: center; height: 100px;">
<p>This text is centered vertically.</p>
</div>
- Justified Text: This stretches the text to the left and right sides of a container, usually used in newspapers and books.
<div style="text-align: justify;">
<p>This is justified text. It will increase or decrease the size of the spaces between words if the text is forced to continue in the container without gaps on either the left or right side.</p>
</div>
3.3 Preformatted Text
Sometimes you will want the text on your page to appear exactly as you have entered it-including whitespaces and line breaks. The <pre> element of HTML allows that by keeping white spaces, line breaks, as well as indents in your source code intact.
The pre Element:
- Preformatted text is mainly applied when it is necessary to show code snippets, examples, or other text which needs to be rendered with their original formatting.
- Content enclosed within the <pre> element is displayed in a monospaced, or fixed-width, font by default, and any white space and line breaks are preserved.
Example:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
In the next example, the spacing, indentation and line breaks in the code will be preserved, so they are preserved when rendered on the page.
When to Use
<pre>:
- Displaying Code: In sample exercises on your page you frequently wish to display code. Be sure to keep the formatting so it will be easy to read and lift.
- ASCII Art: Occasionally one uses the <pre> element to create simple images or graphics using characters.
Interactive Example:
<pre>
/\_/\
( o.o )
> ^ <
</pre>
This produces a plain ASCII cat, demonstrating that the <pre> element also behaves correctly for space and line breaks.
Using CSS with pre:
You can use CSS to enhance the look and feel of preformatted text, such as adding borders, background colors, or even different fonts.
Example:
<pre style="background-color: #f4f4f4; padding: 10px; border: 1px solid #ccc;">
function sayHello() {
console.log("Hello, world!");
}
</pre>
In this example, we have added some style to the preformatted text to make it stand out: background color, padding, and a border.
Exercise: Try using the <pre> element to render a short bit of code or text that you want to be rendered exactly as you enter it.
3.4 Wrapping Up
You have now acquired a basic understanding of how to format text; you know how to center it and how to place preformatted content into an HTML page. This chapter has covered the most essential techniques that would enable control over the appearance of text, techniques that will prove crucial in creating well-designed and readable web pages.
Summary
- Formatting text using strong, emphasis, underline, and many other elements to focus attention on particular information.
- Aligning text with block-level (<div>) and inline (<span>) elements.
- The <pre> element is used to display preformatted text, such as code or ASCII art.
These elements will make your content more structured, styled, and readable. In the next lesson, we’ll see how to create visually attractive layouts with CSS.
Quiz Time:
Interactive Exercise:
Create a web page where you experiment with the various effects of text formatting, alignment, and preformatted text. Use one unique mix-and-match of some of these elements: <strong>, <em>, <div>, <span>, and <pre>. Play with CSS options for aligning your text and see how the text behaves in other circumstances.
By mastering these techniques, you will have complete control over the presentation of text on the web pages built for you, enhance readability, and improve the user experience as a whole. Just keep experimenting with different HTML and CSS combinations, and do not forget to refer to the HTML reference when you are looking for new ways to format and align the text.
We'll take a closer look in the following section at how to work with lists and tables in HTML to organize and present data on your web pages.