2.1. Text Formatting in HTML (25 minutes
Objective: By the end of this lesson, students will be able to add and style text content and include media like images and videos on a web page.
2.1. Text Formatting in HTML (25 minutes)
Text Formatting with Bold and Italic Tags
In HTML, there are various ways to format text to change its appearance and emphasis. The most basic text formatting tags are for bold and italic text.
Bold Text (`<b>`):
The <b> tag is used to make text appear bold, visually emphasizing it but without adding importance in terms of accessibility or meaning.
Example
// Some code
<b>This text is bold.</b>Italic Text (<i>):
The <i> tag is used to italicize text, typically used for stylistic emphasis, such as titles, foreign words, or names.
Example:
// Some code
<i>This text is italicized.</i>These tags are purely for visual formatting and don't imply any special importance or meaning to screen readers.
Emphasizing Text with <strong> and <em>
In addition to bold and italic, HTML also provides tags for emphasis that carry semantic meaning (important for screen readers and accessibility).
Important Text (<strong>):
The <strong> tag is used to indicate that the text is important. Browsers usually display this as bold, but its primary function is to add meaning to the text for accessibility.
Example:
// Some code
<strong>This is important text.</strong>Emphasized Text (<em>):
The <em> tag is used to emphasize text, often displayed as italic by browsers. Like <strong>, it carries semantic meaning and is typically used to convey emphasis in pronunciation or tone.
Example:
// Some code
<em>This text is emphasized.</em>The difference between <b>/<i> and <strong>/<em> is that the latter adds semantic meaning to the content, making it important for accessibility and SEO (Search Engine Optimization).
Adding Special Characters
HTML allows the use of special characters called HTML entities, which are predefined codes that represent characters not easily typed on the keyboard.
Common special characters:
© → © (copyright symbol)
→ non-breaking space (useful for creating extra spaces in text)
€ → € (Euro symbol)
" → " (quotation mark)
& → & (ampersand symbol)
Less Than: < (represents <)
Greater Than: > (represents >)
Pound Sign: £ (£)
Yen Sign: ¥ (¥)
Registered Trademark: ® (®)
These characters are written as HTML entities using an ampersand (&) followed by the entity name and ending with a semicolon (;). For example:
// Some code
<p>© 2024 Your Website. All rights reserved.</p>Other Inline Text Elements
Besides the basic formatting tags, HTML also provides other useful inline text elements for specific formatting needs:
Highlighted Text (<mark>):
The <mark> tag highlights text, typically in yellow. It is useful for drawing attention to specific parts of the content.
Example:
<mark>This text is highlighted.</mark>
Subscript Text (
<sub>):The <sub> tag is used to display subscript text, commonly used in scientific notations or mathematical formulas.
Example:
H<sub>2</sub>O (Water)
Superscript Text (
<sup>):The <sup> tag is used to display superscript text, also useful in scientific or mathematical notations.
Example:
E = mc<sup>2</sup>
These inline text elements are helpful for providing additional context or styling to parts of the text, especially in documents that involve formulas, references, or specific highlights.
Student Activity: Students add a few different text styles to their HTML file and preview the results.
Activity for Students
Objective:
In this activity, students will experiment with various HTML text formatting elements by applying them to an existing HTML file, seeing how each element affects the appearance of the text.
Activity Steps:
Open the Existing HTML File:
Ask students to open their previously created HTML file (e.g., exercise.html) using their text editor (Notepad, Visual Studio Code, etc.).
Add Text Formatting Elements:
Instruct students to modify the file by adding bold, italic, and emphasized text. They can insert these elements inside the <body> of their HTML file.
Example code to add:
// Some code
<h1>Text Formatting Example</h1>
<p>This is an example of <b>bold</b> text and <i>italicized</i> text.</p>
<p>This is <strong>important</strong> and <em>emphasized</em> text.</p>
<p>Special characters like copyright: © and non-breaking space: are also used.</p>
<p>Highlighting text using <mark>highlight</mark> and using <sub>subscript</sub> and <sup>superscript</sup> for scientific notation.</p>
Save the HTML File:
After adding the text formatting, students should save their HTML file.
Preview the Changes in a Browser:
Instruct students to open their updated HTML file in a web browser to view the results. They should see the bold, italicized, emphasized, highlighted, subscript, and superscript text, along with any special characters they used.
Experiment with Additional Changes (Optional):
Encourage students to experiment further by:
Changing the content of the text inside each tag.
Trying out other special characters (such as
€ for € or" for ").Adding multiple formatting elements within the same text block (e.g., bold and italic together).
Discussion and Reflection:
Ask students to reflect on the following questions:
How did the different text formatting elements change the appearance of their webpage?
When might they use <strong> and
<em>instead of <b> and<i>?How do special characters make a webpage more readable or professional?
By the end of this activity, students will have hands-on experience with text formatting elements in HTML and will understand how to control the appearance and meaning of text on their webpages.
Last updated