Skip to content
html tutorial
Menu
  • About us
  • Disclaimer
  • Privacy Policy
Menu
HTML Text Formatting

HTML Text Formatting

Posted on January 28, 2023

HTML formatting elements are used to add structure and style to web pages. Some common HTML formatting elements include:

  • <p> for paragraphs
  • <h1> to <h6> for headings
  • <i> and <em> for emphasized text (Displayed in Italic)
  • <b> and <strong> for bold text
  • <mark> for highlighted text
  • <del> for deleted text
  • <ins> for inserted text
  • <sub> for subscript text
  • <sup> for superscript text
  • <br> for line breaks
  • <hr> for horizontal rules
  • <pre> for preformatted text

HTML <i> and <em> Elements with example

The <i> and <em> elements in HTML are used to indicate text that should be rendered in an italic font.

The <i> element is used for text that is in an alternate voice or mood, such as technical terms, foreign language phrases, or fictional character thoughts.

The <em> element is used for text that is emphasized, such as keywords in a document or text that is important in the context of the surrounding text.

Example:

<p>The <i>great white shark</i> is a <em>dangerous</em> predator found in the ocean.</p>

This will render as:

The great white shark is a dangerous predator found in the ocean.

HTML <strong> Elements with example

The <strong> element in HTML is used to indicate text that should be rendered in a bold font. This element is used to indicate text that is important, such as keywords in a document or text that is particularly relevant to the context of the surrounding text.

Example:

<p>The <strong>great white shark</strong> is a dangerous predator found in the ocean.</p>

This will render as:

The great white shark is a dangerous predator found in the ocean.

HTML <mark> Elements with example

The <mark> element in HTML is used to highlight text for reference purposes, such as marking a search term in a document or text that is relevant to the context of the surrounding text. The text inside the <mark> element is typically rendered with a yellow background color by default but it can be styled with CSS.

Example:

<p>The great white shark is a dangerous predator found in the <mark>ocean</mark>.</p>

This will render as:

The great white shark is a dangerous predator found in the ocean.

HTML <del> Elements with example

The <del> element in HTML is used to indicate text that has been deleted from a document. The text inside the <del> element is typically rendered with a strikethrough by default, but it can be styled with CSS.

Example:

<p>The <del>great white shark</del> is a dangerous predator found in the ocean.</p>

This will render as:

The great white shark is a dangerous predator found in the ocean.

HTML <ins> Elements with example

The <ins> element in HTML is used to indicate text that has been inserted into a document. The text inside the <ins> element is typically rendered with an underline by default, but it can be styled with CSS.

Example:

<p>The great white shark is a <ins>very dangerous</ins> predator found in the ocean.</p>

This will render as:

The great white shark is a very dangerous predator found in the ocean.

HTML <sub> Elements with example

The <sub> element in HTML is used to indicate text that should be rendered as subscript. Subscript text is text that appears slightly lower than the surrounding text and is typically smaller in font size. Subscript text is often used in scientific or mathematical notation, as well as in certain types of linguistic notation.

Example:

<p>The chemical formula for water is H<sub>2</sub>O.</p>

This will render as:

The chemical formula for water is H2O.

HTML <sup> Elements with example

The <sup> element in HTML is used to indicate text that should be rendered as superscript. Superscript text is text that appears slightly higher than the surrounding text and is typically smaller in font size. Superscript text is often used in mathematical notation, as well as in certain types of linguistic notation, such as in footnotes and citations.

Example:

<p>The speed of light is approximately 2.998 x 10<sup>8</sup> m/s.</p>

This will render as:

The speed of light is approximately 2.998 x 108 m/s.

HTML <br> Elements with example

The <br> element in HTML is used to create a line break, which causes text to start on a new line, rather than continuing on the same line. This can be useful for creating spacing between lines of text or for creating a new line within a paragraph.

Example:

<p>The quick brown fox<br>jumps over the lazy dog.</p>

This will render as:

The quick brown fox

jumps over the lazy dog.

The <br> element is a self-closing element and does not require a closing tag. It is often used to add spacing between lines of text or to separate text into different lines. It can be used to force a line break anywhere you want in the text, unlike the <p> element which creates a new paragraph with a blank line before and after the text.

HTML <hr> Elements with example

The <hr> element in HTML is used to create a horizontal rule, which is a line that is used to separate content on a web page. The line is horizontal by default, but it can be styled with CSS to be different widths, colors, or orientations.

Example:

<p>This is some text</p>
<hr>
<p>This is some more text</p>

This will render as:

This is some text

_____(horizontal line)

This is some more text

The <hr> element is a self-closing element and does not require a closing tag. It is often used to create visual separation between different sections of content on a web page, such as separating a header from the main content or separating different sections of a form. It can also be used to create a design element that is used to separate content or to add emphasis to certain parts of a page. It is a semantic element, it doesn’t provide any meaning to the content it just used for styling and design purposes.

HTML <pre> Elements with example

The <pre> element in HTML is used to indicate preformatted text. Preformatted text is text that is displayed exactly as it is written in the HTML document, including any spaces, line breaks, and other white space. This can be useful for displaying code snippets or other types of text that require a specific format.

Example:

<pre>
  function add(a,b){
    return a+b;
  }
</pre>
This will render as:  
function add(a,b){
    return a+b;
  }

The <pre> element preserves all the spaces and line breaks in the text, so it is often used for displaying code snippets or other types of text that require a specific format. It can be used to display text that is written in a fixed-width font, and it also preserves any leading or trailing spaces. It is mostly used in the context of displaying code snippets or other types of text that require a specific format.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • HTML Images Tag

    HTML Images Tag

    January 27, 2023
  • <strong>HTML a tag- Anchor Tag</strong>

    <strong>HTML a tag- Anchor Tag</strong>

    January 27, 2023
  • HTML Paragraphs: The building blocks of web content

    HTML Paragraphs: The building blocks of web content

    January 17, 2023
  • HTML Heading tags

    HTML Heading tags

    January 17, 2023
  • HTML Attributes

    HTML Attributes

    January 16, 2023
  • HTML Elements

    HTML Elements

    January 16, 2023
  • All HTML code editors and how to use it.

    All HTML code editors and how to use it.

    January 14, 2023
  • HTML Introduction (What is HTML?)

    HTML Introduction (What is HTML?)

    January 8, 2023
©2023 HTML TUTORIAL | Design: Newspaperly WordPress Theme