airmyekong

Getting started with HTML (part 2)

Getting started with HTML (part 2)

Emem Moses Ekong's photo
Emem Moses Ekong
·

8 min read

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.

HTML5Web Developmentprogramming languagesBeginner DevelopersWeb Design