1.
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
HTML Formatting Elements
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> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <b> and <strong> Elements
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importan
Example
<!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.
HTML <i> and <em> Elements
The HTML <i> element defines a part of text in an alternate voice or mood.
The content inside is typically displayed in italic.
Tip: The <i> tag is often used to indicate a technical term, a phrase from
another language, a thought, a ship name, etc.
Example
<!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.
HTML <small> Element
The HTML <small> element defines smaller text:
Example
<!DOCTYPE html>
<html>
<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>
Output
This is some normal text.
This is some smaller text.
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
Example
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
Output
Do not forget to buy milk today.
2. HTML Quotation and Citation Elements
In this chapter we will go through
the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements.
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another
source.
Browsers usually indent <blockquote> elements.
Example
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="[Link]
For nearly 60 years, WWF has been protecting the future of nature. The world's
leading conservation organization, WWF works in 100 countries and is
supported by </blockquote>
</body>
</html>
Output
Browsers usually indent blockquote elements.
For nearly 60 years, WWF has been protecting the future of nature. The world's
Conservation organization, WWF works in 100 countries and is supported by
HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
Example
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony
with nature.</q></p>
</body>
</html>
Output
Browsers usually insert quotation marks around the q element.
WWF's goal is to: Build a future where people live in harmony with nature.
HTML <address> for Contact Information
The HTML <address> tag defines the contact information for the author/owner
of a document or an article.
The contact information can be an email address, URL, physical address,
phone number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.
Example
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a document or
article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
Output
The HTML address element defines contact information (author/owner) of a
document or article.
Written by John Doe.
Visit us at:
[Link]
Box 564, Disneyland
USA
[Link] Comments
