Tuesday 11 April 2023

HTML Text Formatting

  1. <i> - This tag is used to italicize text, meaning the text enclosed within <i> tags will be rendered in italic font style. However, it is recommended to use CSS for styling purposes instead of the <i> tag, as it is mainly used for semantic purposes.

  2. <b> - This tag is used to make text bold, meaning the text enclosed within <b> tags will be rendered in bold font style. However, similar to the <i> tag, it is recommended to use CSS for styling purposes instead of the <b> tag, as it is mainly used for semantic purposes.

  3. <u> - This tag is used to underline text, meaning the text enclosed within <u> tags will be rendered with an underline. However, it is also recommended to use CSS for styling purposes instead of the <u> tag, as it is mainly used for semantic purposes.

  4. <mark> - This tag is used to highlight text with a marker-like effect, usually in a yellow background color. The text enclosed within <mark> tags will be rendered with the defined background color, making it stand out.

  5. <sub> - This tag is used to render text as subscript, meaning the text enclosed within <sub> tags will be rendered in a smaller font size and slightly below the baseline of the surrounding text. This is commonly used for mathematical or chemical formulas.

  6. <sup> - This tag is used to render text as superscript, meaning the text enclosed within <sup> tags will be rendered in a smaller font size and slightly above the baseline of the surrounding text. This is commonly used for mathematical exponents or footnotes.

  7. <strong> - This tag is used to emphasize text with strong importance, typically rendered in bold font style. It is commonly used to highlight important or critical information on a webpage, and it carries semantic meaning to indicate the text's significance.

  8. <em> - This tag is used to emphasize text with italic or emphasized style. It is commonly used to highlight text for emphasis or to convey stress or importance, and it also carries semantic meaning to indicate the text's emphasis.

  9. <small> - This tag is used to render text in a smaller font size compared to the surrounding text. It is commonly used for fine print or legal disclaimers, and it can also be used for indicating smaller or less important information.

  10. <code> - This tag is used to represent inline code or computer code within text. It is commonly used to display code snippets, programming instructions, or other code-related content, and it is usually rendered in a monospace font for clarity.

  11. <pre> - This tag is used to define preformatted text, preserving whitespace and font spacing. It is commonly used for displaying text in a fixed-width font, such as monospace, and it is often used for displaying code blocks or other content that requires precise formatting.


    The <ins> and <del> tags in HTML are used to represent inserted and deleted text respectively. The <ins> tag is used to mark text that has been inserted into the document, and the <del> tag is used to mark text that has been deleted or removed from the document.



    HTML Code for text formatting:



    <!DOCTYPE html>
    <html>
    <head>
    <title>Text Formatting</title>
    </head>
    <body>
    <h1>Formatting text</h1>
    <p>
    This is a paragraph of text with <i>italicized text</i>,
    <b>bold text</b>, <u>underlined text</u>, and
    <mark>highlighted text</mark>. The paragraph also
    contains <sub>subscript text</sub> and
    <sup>superscript text</sup>. Additionally, there is
    <strong>strongly emphasized text</strong> and
    <em>emphasized text</em>. The paragraph also
    includes <small>smaller text</small> and
    <code>inline code</code> snippets. Finally, there
    is a block of preformatted text:
    </p>
    <p>
    The <ins>quick</ins> brown <del>fox</del> 
    jumps over the <ins>lazy</ins> dog.
    </p>
    <pre>
    This text
    will be
    formatted
    exactly
    as
    it
    appears
    here.
    </pre>
    </body>
    </html>

Output

It's important to note that while these HTML text formatting tags can be used for styling purposes, it's generally recommended to use CSS for styling in modern web development practices, as it provides more flexibility and separation of concerns. These tags are mainly used for semantic purposes, indicating the intended meaning or importance of the text, and they can be used in combination with CSS for achieving desired visual effects on web pages.

Practice Time!

  1. Create a paragraph of text that includes italicized, bold, and underlined text, as well as a highlighted text using the <i>, <b>, <u>, and <mark> tags.

  2. Display a chemical formula using subscript and superscript text using the <sub> and <sup> tags.

  3. Highlight an important sentence in a paragraph using the <strong> tag for strong emphasis and the <em> tag for italicized emphasis.

  4. Display a piece of inline code with a monospace font style and a background color using the <code> tag and inline CSS.

  5. Create a paragraph of text with smaller font size for fine print or disclaimers using the <small> tag.

  6. Display a block of preformatted text using the <pre> tag with a fixed-width font style.

  7. Design a web page that shows a paragraph of text, with some words marked as inserted using the <ins> tag and others marked as deleted using the <del> tag.

  8. Create a paragraph of text that includes a combination of different text formatting tags to achieve a specific visual effect, such as a paragraph with italicized, bold, and underlined text, along with a highlighted keyword, subscript and superscript text, and emphasized text.




    HAPPY CODING!

No comments:

Post a Comment

HTML Text Formatting

<i> - This tag is used to italicize text, meaning the text enclosed within <i> tags will be rendered in italic font style. How...