HTML for Web Development

0% completed

Previous
Next
HTML Formatting

HTML formatting refers to the methods used to style and represent text content on a webpage to enhance readability, provide semantic meaning, and improve visual appeal. By using formatting tags, you can emphasize certain parts of your text, highlight important information, or style content for aesthetic purposes.

Types of HTML Formatting Tags:

  1. Physical Tags: These tags are used to change the visual appearance of text, such as making it bold, italicized, or underlined.
  2. Logical Tags: These tags add semantic meaning to the text, helping search engines and screen readers understand its purpose (e.g., <strong> for important text or <em> for emphasized text).

Why Use HTML Formatting?

  • Improves Content Presentation: Formatting highlights key points, adds emphasis, and organizes content for better readability.
  • Semantic Clarity: Logical tags help search engines and assistive technologies understand the purpose of the text, improving accessibility and SEO.
  • Enhanced Visual Layout: Formatting makes text content more attractive and easier to digest for users.

HTML Formatting Tags

Here’s a table of commonly used HTML formatting tags:

TagDescriptionExample
<b>Defines bold text (no added importance).<b>Bold Text</b>
<strong>Defines important text (semantically stronger than <b>).<strong>Important Text</strong>
<i>Defines italic text (no added emphasis).<i>Italic Text</i>
<em>Defines emphasized text (semantically stronger than <i>).<em>Emphasized Text</em>
<u>Defines underlined text.<u>Underlined Text</u>
<mark>Defines highlighted or marked text.<mark>Highlighted Text</mark>
<small>Defines smaller text.<small>Smaller Text</small>
<del>Defines text that has been deleted (strike-through).<del>Deleted Text</del>
<ins>Defines text that has been inserted (underlined).<ins>Inserted Text</ins>
<sub>Defines subscripted text.H<sub>2</sub>O
<sup>Defines superscripted text.X<sup>2</sup>
<code>Defines a piece of computer code.<code>console.log('Hello')</code>
<pre>Preserves preformatted text (spaces and line breaks).<pre>Preformatted Text</pre>

Examples of HTML Formatting Tags

Example 1: Bold Text (<b>)

The <b> tag is used to make text bold. It provides a visual emphasis to the text.

HTML
. . . .

Example 2: Italic Text (<i>)

The <i> tag is used to make text italicized. This tag is generally used for stylistic purposes, such as indicating titles, foreign words, or technical terms.

HTML
. . . .

Example 3: Highlighted Text (<mark>)

The <mark> tag is used to highlight text, usually with a yellow background. It is commonly used to call attention to important or relevant content.

HTML
. . . .

Example 4: Strikethrough Text (<del>)

The <del> tag is used to indicate text that has been removed or is no longer valid. The text is displayed with a line through it.

HTML
. . . .

Example 5: Subscript Text (<sub>)

The <sub> tag is used to display subscript text, which is smaller and positioned below the normal text line. It is commonly used for chemical formulas or mathematical expressions.

HTML
. . . .

Example 6: Superscript Text (<sup>)

The <sup> tag is used to display superscript text, which is smaller and positioned above the normal text line. It is commonly used for exponents in mathematics.

HTML
. . . .

Mastering these tags helps you create visually appealing and semantically meaningful text content. In the next lesson, we’ll dive into HTML Quotations, where you’ll learn how to represent quoted text effectively.

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next