HTML Text Formatting

byLearn Code and Programing -
0
HTML Text Formatting

HTML Text Formatting

HTML text formatting means using special HTML tags to change how text looks and is arranged on a webpage. You can make text bold, italic, underlined, marked, small, big, deleted, inserted, and so on with this tool. Tags for formatting aid in making parts of the text stand out and make it easier to read.

Physical Tags

Physical tags directly affect the visual appearance of the text without focusing on meaning. They are purely presentational — they tell the browser how the text should look, not what it means.

TagPurpose
<b>Makes text bold
<i> Makes text italic
<u>Underlines text
<strike>Strikethrough text
<big>Makes text bigger
<small>Makes text smaller
<tt>Monospaced (typewriter) text

Logical Tags

Logical tags are used to describe the text's meaning or purpose, not its appearance. They may be styled differently by browsers, but the main point is semantics, which is helpful for SEO and screen readers.

TagPurpose
<strong>Strong importance (usually bold)
<em>Emphasized text (usually italic)
<abbr>Abbreviation (with tooltip)
<cite>Title of a work
<dfn>Definition of a term
<code>Inline code
<kbd >Keyboard input
<var>Variable in programming/math

HTML <b >Tag

Text can be made bold using the HTML <b> tag. Because it is a physical tag, it emphasizes appearance rather than meaning. Unlike the <strong> tag, the <b> tag is only used to make text bold and doesn’t show that the text is important.

<!DOCTYPE html> <html> <head> <title>HTML b Tag Example</title> </head> <body> <p>In this paragraph normal text used.</p> <p>This is <b>bold text</b> using the <b> tag.</p> </body> </html>

HTML <strong> Tag

The <strong> tag is used to highlight important text by giving it semantic meaning (importance) and usually displaying it in bold by default. It is a logical tag, indicating to browsers as well as assistive technologies like screen readers that the text holds a high level of significance.

Note: The <b> tag makes text bold purely for visual styling, while the <strong> tag not only makes text bold but also conveys semantic importance to its content.


<!DOCTYPE html> <html> <head> <title>HTML strong Tag Example</title> </head> <body> <p>In this paragraph normal text used.</p> <p>This is <b>bold text</b> using the <b> tag.</p> </body> </html>

HTML <i> Tag

Text can be displayed in italic style by using the HTML <i> tag.

<!DOCTYPE html> <html> <head> <title>HTML i Tag Example</title> </head> <body> <p>This is <i>italic text</i> using the <i> tag.</p> </body> </html>

HTML <em> Tag

Text is typically highlighted by default using the HTML <em> tag, which renders it in italic style. <em> tag indicates emphasis. It is an inline element, so screen readers and search engines recognize it as important. Unlike <i> tag, it adds semantic meaning.

<!DOCTYPE html> <html> <head> <title>HTML em Tag Example</title> </head> <body> <p>The <em>AI</em> stands for Artificial Intelligence.</p> </body> </html>

HTML <big> Tag

The HTML <big> tag was used to make text slightly bigger than the text around it. The <big> tag is an inline element that makes the font size one level bigger than the current font size. It’s no longer recommended in HTML5. Instead, you should use CSS (font-size) to set the text size.

<!DOCTYPE html> <html> <head> <title>HTML big Tag Example</title> </head> <body> <p>The <big>tag</big> was used to make text slightly bigger <big>than the text around</big> it.</p> </body> </html>

HTML <small> Tag

The HTML <small> tag is used to make text slightly smaller than the surrounding text. <small> decreases the font size by one level relative to the current font size. Unlike <big>, the <small> tag is still valid in HTML5 and is commonly used for fine print, disclaimers, or side notes. It can be further styled with CSS to create custom sizes.

<!DOCTYPE html> <html> <head> <title>HTML small Tag Example</title> </head> <body> <p>This is normal text and <small>this is smaller text</small>.</p> </body> </html>

HTML <sup> Tag

The HTML <sup> tag is used to show superscript text, which appears slightly above the regular text line and in a smaller font size. It stands for “superscript” and is an inline element. It’s often used in mathematical formulas, exponents, and ordinal indicators (like 1st, 2nd) and is fully supported in HTML5.

<!DOCTYPE html> <html> <head> <title>HTML sup Tag Example</title> </head> <body> <p>Mathematics example: 2<sup>3</sup> = 8</p> <p>Ordinal example: 21<sup>st</sup> Century</p> </body> </html>

HTML <sub> Tag

The HTML <sub> tag is used to make text appear a bit lower than the normal line and in a smaller font size. It stands for “subscript” and is an inline element. It’s commonly used in chemical formulas, mathematical notations, and footnotes, and is fully supported in HTML5.

<!DOCTYPE html> <html> <head> <title>HTML sub Tag Example</title> </head> <body> <p>Chemistry example: H<sub>2</sub>O (Water)</p> </body> </html>

HTML <ins >Tag

The HTML <ins> tag is used to show text that has been added to a document compared to an earlier version. insert is spelled <ins>. By default, browsers display this text with an underline. It might also include things like: cite: a link to the reason the text was added. datetime is the time and date of the change.

<!DOCTYPE html> <html> <head> <title>HTML ins Tag Example</title> </head> <body> <p>My favorite color is <del>blue</del> and <ins>green</ins>.</p> </body> </html>

HTML <del> Tag

The HTML <del> tag is used to show text that has been deleted or removed from a document.

<!DOCTYPE html> <html> <head> <title>HTML del Tag Example</title> </head> <body> <p>My favorite color is <ins>green</ins>.</p> </body> </html>

HTML <u> Tag

In HTML <u> tag is used to underline the text without giving it any special semantic meaning. It’s purely a visual styling tag, unlike <ins> (inserted text) or <em> (emphasized text) which have semantic purposes.

<!DOCTYPE html> <html> <head> <title>HTML u Tag Example</title> </head> <body> <p><u>HTML</u> stand for Hypertext Markup Language.</p> </body> </html>

HTML <strike> Tag

The HTML <strike> tag was used to show text with a horizontal line through it, often to indicate that the text is outdated, incorrect, or removed. However, this tag is deprecated in HTML5, so it’s no longer recommended for modern websites. Instead, you can use the <del> tag for deleted content (which also carries semantic meaning) or simply style text with CSS to achieve the strikethrough effect.

<!DOCTYPE html> <html> <head> <title>HTML strike Tag Example</title> </head> <body> <p>The old price of book is<strike>$50</strike>, and new price of book is $30!</p> </body> </html>

HTML <mark> Tag

The HTML <mark> tag is used to highlight text to indicate that it is important, relevant, or matches a search term. By default, browsers display <mark> text with a yellow background and black text.

<!DOCTYPE html> <html> <head> <title>HTML mark Tag Example</title> </head> <body> <p>HTML was created by <mark>Sir Tim Berners-Lee</mark>.</p> </body> </html>

In earlier versions of HTML, the <tt> tag—short for teletype text—was used to display text in a monospaced, fixed-width font, similar to that produced by typewriters or computer terminals. However, the CSS property font-family: monospace; is recommended because <tt> is no longer supported in HTML5.

<!DOCTYPE html> <html> <head> <title>HTML tt Tag Example</title> </head> <body> <p>Normal text vs <tt>monospaced text</tt></p> </body> </html>
Tags:
أحدث أقدم