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.