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.