HTML Text
Formatting
<!DOCTYPE
html>
<html>
<body>
<p><b>This
text is bold</b></p>
<p><i>This
text is italic</i></p>
<p>This
is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Output:
This
text is bold
This text is italic
This is subscript and superscript
HTML Formatting Elements
In the previous chapter, you learned about the HTML style
attribute.
HTML also defines special elements for
defining text with a special meaning.
HTML uses elements like
<b> and <i> for
formatting output, like bold or italic text.
Formatting elements were designed to display special types of
text:
<b>- Bold text<strong>- Important text<i>- Italic text<em>- Emphasized text<mark>- Marked text<small>- Small text<del>- Deleted text<ins>- Inserted text<sub>- Subscript text<sup>- Superscript text
HTML <b> and <strong> Elements
The HTML
<b> element
defines bold text,
without any extra importance.
<!DOCTYPE html>
<html>
<body>
<p>This text is
normal.</p>
<p><b>This
text is bold.</b></p>
</body>
</html>
Output:
This text
is normal.
This text is bold.
The HTML
<strong> element defines strong text, with
added semantic "strong" importance.
<!DOCTYPE
html>
<html>
<body>
<p>This
text is normal.</p>
<p><strong>This
text is strong.</strong></p>
</body>
</html>
Output:
This text
is normal.
This text is strong.
HTML <i> and <em> Elements
The HTML
<i> element
defines italic text,
without any extra importance.
<!DOCTYPE
html>
<html>
<body>
<p>This
text is normal.</p>
<p><i>This
text is italic.</i></p>
</body>
</html>
Output:
This text
is normal.
This text is italic.
The HTML
<em> element
defines emphasized text,
with added semantic importance.
<!DOCTYPE
html>
<html>
<body>
<p>This
text is normal.</p>
<p><em>This
text is emphasized.</em></p>
</body>
</html>
Output:
This text
is normal.
This text is emphasized.
Note: Browsers display
<strong> as <b>, and <em> as <i>. However, there is
a difference in the meaning of these tags: <b> and <i> defines bold
and italic text, but <strong> and <em> means that the text is "important".
HTML
<small> Element
The HTML
<small> element
defines smaller text:
<!DOCTYPE
html>
<html>
<body>
<h2>HTML
<small>Small</small> Formatting</h2>
</body>
</html>
Output:
HTML Small Formatting
HTML
<mark> Element
The HTML
<mark> element
defines marked or highlighted text:
<!DOCTYPE html>
<html>
<body>
<h2>HTML
<mark>Marked</mark> Formatting</h2>
</body>
</html>
Output:
HTML Marked Formatting
HTML
<del> Element
The HTML <del> element
defines deleted (removed) text:
<!DOCTYPE html>
<html>
<body>
<p>The del element
represents deleted (removed) text.</p>
<p>My favorite color
is <del>blue</del> red.</p>
</body>
</html>
Output:
The del
element represents deleted (removed) text.
My favorite color is blue
red .
HTML
<ins> Element
The HTML
<ins> element defines inserted (added)
text.
<!DOCTYPE html>
<html>
<body>
<p>The ins element
represent inserted (added) text.</p>
<p>My favorite
<ins>color</ins> is red.</p>
</body>
</html>
Output:
The ins
element represent inserted (added) text.
My favorite color is red.
HTML
<sub> Element
The HTML
<sub> element
defines subscripted text.
<!DOCTYPE html>
<html>
<body>
<p>This is
<sub>subscripted</sub> text.</p>
</body>
</html>
Output:
This is subscripted text.
HTML <sup> Element
The HTML
<sup> element
defines superscripted text.
<!DOCTYPE html>
<html>
<body>
<p>This is
<sup>superscripted</sup> text.</p>
</body>
</html>
Output:
This is superscripted text.
No comments