HTML offers a variety of tags to format text on your webpage, enhancing readability, visual appeal, and conveying meaning. These tags fall into two primary categories:
- Physical Formatting Tags: These tags control the visual appearance of the text without necessarily specifying its semantic meaning.
Examples include:
<b>
(bold) and</b>
: Make text bold, often used for emphasis or highlighting key points.
HTML
This is some **bold** text.
<i>
(italic) and</i>
: Slant text, typically for terms in a foreign language, technical terms, or thoughts within a narrative.
HTML
This sentence contains an _italicized_ word.
<u>
(underline) and</u>
: Underline text, often used for links (although CSS is preferred for modern styling).
HTML
This text is underlined. (Use CSS for styling links)
<sup>
(superscript) and</sub>
: Display text slightly above the baseline, frequently used for scientific notation or footnotes.
HTML
E=mc<sup>2</sup>
<sub>
(subscript) and</sub>
: Display text slightly below the baseline, common for chemical formulas or mathematical equations.
HTML
H<sub>2</sub>O
2. Logical Formatting Tags: These tags convey the meaning or purpose of the text, allowing browsers to interpret and potentially render it differently. Examples include:
<strong>
(strong) and</strong>
: Indicate strong importance, similar to bold but often used for more urgent or critical content.
HTML
**Please remember** to save your work frequently.
<em>
(emphasis) and</em>
: Denote emphasis similar to italic but focusing on the importance of the text.
HTML
I am feeling _especially_ grateful today.
<cite>
: Mark a title of a creative work (book, film, song).
HTML
The novel <cite>To Kill a Mockingbird</cite> is a classic.
<code>
: Display inline code snippets. HTML
HTML
Use the `<code>for` loop to iterate through an array.
<pre>
(preformatted text): Preserve whitespace and line breaks, ideal for code blocks or poems.
HTML
<pre>
This is a poem
written in preformatted text.
</pre>
Choosing the Right Tag: Semantics over Presentation
Browsers can use this information to adjust the presentation based on the context. For instance, a screen reader might emphasize <strong>
content for visually impaired users.
Beyond the Basics: Advanced Text Formatting
HTML offers additional tags for specific formatting needs:
<abbr>
: Abbreviation or acronym (often with a<title>
element for explanation).<blockquote>
: Block quotation, typically indented for distinction.<del>
: Deleted text, often used for strikethrough effects.<ins>
: Inserted text, sometimes underlined.
Visit it for next step to learn 2024’s Beginner-Friendly Roadmap.