INTRODUCTION
In the last article , we defined HTML as Hypertext Markup Language and also discussed on: HTML tags, elements, attributes, and steps to be followed when writing an HTML document. In this article, we will learn about the different formatting tags that are used in HTML 5 for styling texts.
TEXT FORMATTING TAGS
In HTML, the way a text appears on the browser can be modified, styled, and changed using HTML text formatting tags. Put simply, text formatting tags are tags that are used to define a text with a special meaning. They are divided into two groups:
1. Physical Tags:
These tags are used to define how the text will be presented on the browser. Examples includes; <b>, <i>, <u>, <small>, <sup>, <sub>.
2. Logical Tags:
These tags are used to describe to the browser that the enclosed text has a specific meaning. Examples includes; <strong>, <em>, <ins>, <code>, <h1> to <h6>, <cite>, <address>, <dfn>, <blockquote>, <abbr>, <pre>
Taking each tag one after the other:
• Heading Tag <h1>-<h6>
These are tags used to define headings or titles of a web page. They are six in number and are numbered from 1 to 6. They are defined with the <h1> to <h6> tags where;
<h1> has the biggest font-size and is used to define the most important heading on a webpage.
<h6> has the smallest font-size and is used to define the least heading on a webpage.
Example
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset ="UTF-8">
<meta name="viewport" content= "width= device-width, initial-scale=1.0">
<title >Heading Tag </title >
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
</html>
Result:
Try it on your browser and notice the gradual decrease in font-size as the header value increase.
• Bold tag <b>
This is used to define a bold text without any logical importance
Example:
<p> My name is <b> Charisma </b> and I am a participant of <b> technical writing boot camp.</b> </p>
Result:
My name is Charisma and I am a participant of technical writing boot camp.
• Italic tag <i>
This is used to define a text in an alternate mood without any logical importance. It is displayed in italics.
Example:
<p>My name is Charisma and I'm <i>happy to be part </i> of technical writing boot camp. </p>
Result:
My name is Charisma and I'm happy to be part of technical writing boot camp.
• Emphasized tag <em>
This is used to define an emphasized text. It is displayed in italics, but the screen reader will pronounce the words parsed with <em> with emphasis.
• Strong tag <strong>
This is used to define a text with very strong importance. It is displayed in bold but it has logical importance.
•Delete Tag <del>
This is used to define a text that has been deleted from the document. It is displayed on the browser as a strike-through.
• Underline tag <u> and Insert tag <ins>
The <u> element defines an underlined text.
The <ins> element defines a text that has been added to a document. In the browser, text written inside an <ins> tag appears underlined. It is used together with the deleted tag <del>.
•Mark Tag <mark>
This is used to define a text or part of the text that is highlighted.
•Preformatted Tag <pre>
This tag is used to display text on the web browser the way it is written on a text editor. This tag is always used alone or with other tags such as the <code> and <address> tag
<pre>
<p>My name is
Charisma.
I am just happy to
Attend this bootcamp
</p>
</pre>
Result:
My name is Charisma. I am just happy to Attend this bootcamp
•Code Tag <code>
This is used to define a text as a computer code. The <code> tag is always used with the <pre> tag.
•Address Tag <address>
This tag is used to define a text that specifies the contact information or location of an author.
Example:
<pre>
<address>
Plot 56, F-line,
Ewet Housing Estate,
Uyo.
Akwa Ibom State.
Nigeria.
</address>
</pre>
Result:
Plot 56, F-line,
Ewet Housing Estate,
Uyo.
Akwa Ibom State.
Nigeria.
•Break Tag <br>
The <br> is a self-closing tag as it doesn't need an end tag.
It is used to add a single line break to a text.
Example:
<p> The pandemic has made <br> video conferencing apps popular. </p>
Result:
The pandemic has made
video conferencing apps popular.
•Horizontal Line Tag <hr>
The <hr> is also a self-closing tag.
It is used to add a horizontal line break to an HTML document.
Example:
<p> The pandemic has made <hr> video conferencing apps popular. </p>
Result:
The pandemic has made
video conferencing apps popular.
•Definition Tag <dfn>
This is used to specify a term that will be defined within the content.
•Quotation Tag <q>
This is used to define a single line or short quotation derived from other sources. It is displayed with quotation marks on the browser.
Example:
<p>For a quotation; </p>
<q> All that Glitters is not gold.</q> <cite> -Williams Shakespeare. </cite>
Result:
For a quotation; "All that Glitters is not gold." -Williams Shakespeare.
•Blockquote Tag <blockquote>
This tag is used to defines a multi-line quotation from other sources. It is displayed as indented on the web browser.
•Cite tag <cite>
This tag is used to define the title of a work or the name of an author that is being referred to or quoted from. It is displayed as an italicized text by the browser.
Example:
<p>For a blockquote:</p>
<blockquote> By the pricking of my thumbs, something wicked this way comes open, Lock and whoever knocks.</blockquote> <cite> -Williams Shakespeare. </cite>
Result:
For a blockquote:
By the pricking of my thumbs, something wicked this way comes open, Lock and whoever knocks.-Williams Shakespeare.
•BDO Tags <bdo>
This tag is used to change the direction of the text. The two common directions are the '"RTL"(right to left) and "LTR"(left to right).
Example:
<p> <bdo dir="rtl">Hello sunshine!</bdo></p>
Result:
!enihsnus olleH
•Subscript Tags <sub>
This tag defines subscript text. Subscript texts are texts that appear half of the character below the normal line and are presented in smaller font.
Example:
<p> The chemical formula for Water is H <sub>2 </sub>O</p>
•Superscript <sup>
This tag defines superscript text. Superscript texts are texts that appear half of the character above the normal line and are presented in smaller font.
Example:
<p> Using this formula, 60= r <sup>3 </sub> + 3r <sup>2 </sup>, find r.</p>
Result:
Using this formula, 60= r³ + 3r², find r.
•Small Tag <small>
This tag is used to define a text that will appear in small font.
Example:
<p>This is an example showing how the <small> small tag works.</small> </p>
Marquee Tag <marquee>
This tag is used to display scrollable or movable text on a browser. It uses attributes to work effectively.
It is worth noting:
(that the use of <marquee> tag in HTML 5 has greatly reduced as this tag causes breaks in web document. ). To achieve moveable texts, Cascading Style Sheet (CSS) is used.
(In subsequent articles, CSS will be discussed.)
Example:
<marquee direction="left" width="50%"> This is a moveable text </marquee>
What Next?
After discussing the different HTML formatting tags in HTML 5 and it's use cases, the next in this series, will discuss on what a hyperlink tag is and how to make effective use of it in HTML.