Learn

HTML – Formatting

Advertisement

If you happen to use a phrase processor, you should be conversant in the flexibility to make text bold, italicized, or underlined; these are simply three of the ten choices obtainable to point how textual content can seem in HTML and XHTML.

Bold Text

Something that seems inside <b>…</b> element, is displayed in bold as proven under

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text </title>
   </head>
  
   <body>
      <p>i am <b>Hamza Alvi</b> & age 35.</p>
   </body>
  
</html>

This may produce the next outcome

i am Hamza Alvi & age 35.

Italic Text

Something that seems inside <i>…</i> element is displayed in italicized as proven under

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text</title>
   </head>
  
   <body>
      <p>i am <i>Hamza Alvi</i> & Age 35.</p>
   </body>
  
</html>

This may produce the next outcome

i am Hamza Alvi & Age 35.

Underlined Text

Something that seems inside <u>…</u> element, is displayed with underline as proven under

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text</title>
   </head>
  
   <body>
      <p>I am <u>Hamza Alvi</u> & My Age 35.</p>
   </body>
  
</html>

This may produce the next outcome

I am Hamza Alvi & My Age 35.

Strike Text

Something that seems inside <strike>…</strike> element is displayed with strikethrough, which is a skinny line via the textual content as proven under

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text</title>
   </head>
  
   <body>
      <p>My Name is <strike>Hamza</strike> & age 35.</p>
   </body>
  
</html>

This may produce the next outcome

My Name is Hamza & age 35.

Monospaced Font

The content material of a <tt>…</tt> element is written in monospaced font. Many of the fonts are often known as variable-width fonts as a result of completely different letters are of various widths (for instance, the letter ‘m’ is wider than the letter ‘i’). In a monospaced font, nonetheless, every letter has the identical width.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
  
   <body>
      <p>Mu Name is <tt>Hamza</tt> & age 35.</p>
   </body>
  
</html>

This may produce the next outcome

Mu Name is Hamza & age 35.

Superscript Text

The content material of a <sup>…</sup> element is written in superscript; the font size used is similar size because the characters surrounding it however is displayed half a personality‘s peak above the opposite characters.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
  
   <body>
      <p>My Name is <sup>Hamza Alvi</sup> & age 35.</p>
   </body>
  
</html>

This may produce the next outcome

My Name is Hamza Alvi & age 35.

Subscript Text

The content material of a <sub>…</sub> element is written in subscript; the font size used is similar because the characters surrounding it, however is displayed half a personality‘s peak beneath the opposite characters.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text</title>
   </head>
  
   <body>
      <p>My Name is <sub>Hamza Alvi</sub> & age 35.</p>
   </body>
  
</html>

This may produce the next outcome

My Name is Hamza Alvi & age 35.

Inserted Text

Something that seems inside <ins>…</ins> element is displayed as inserted textual content.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
  
   <body>
      <p>My Name is <del>Hamza Alvi</del> <ins>& age 35</ins></p>
   </body>
  
</html>

This may produce the next outcome

My Name is Hamza Alvi & age 35

Deleted Text

Something that seems inside <del>…</del> element, is displayed as deleted textual content.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
  
   <body>
      <p>My Name is <del>Hamza Alvi</del> <ins>& age 35</ins></p>
   </body>
  
</html>

This may produce the next outcome

My Name is Hamza Alvi & age 35

Bigger Text

The content material of the <big>…</big> element is displayed one font size bigger than the remainder of the textual content surrounding it as proven under

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
  
   <body>
      <p>My Name is <big>Hamza Alvi</big> & age 35.</p>
   </body>
  
</html>

This may produce the next outcome

My Name is Hamza Alvi & age 35.

Smaller Text

The content material of the <small>…</small> element is displayed one font size smaller than the remainder of the textual content surrounding it as proven under

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>My Name is <small>Hamza Alvi</small> & age 35.</p>
   </body>

</html>

This may produce the next outcome

My Name is Hamza Alvi & age 35.

Grouping Content

The <div> and <span> elements let you group collectively a number of elements to create sections or subsections of a web page.

For instance, you would possibly need to put the entire footnotes on a web page inside a <div> element to point that the entire elements inside that <div> element relate to the footnotes. You would possibly then connect a method to this <div> element in order that they seem utilizing a particular set of favor guidelines.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
  
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/">HOME</a> | 
         <a href = "/contact-us/">CONTACT</a> | 
         <a href = "/privacy-policy/">Privacy Policy</a>
      </div>

      <div id = "content" align = "left" bgcolor = "white">
         <h5>Content 1</h5>
         <p>content 2.....</p>
      </div>
   </body>
  
</html>

This may produce the next outcome

Content 1

content 2…..

The <span> element, alternatively, can be utilized to group inline elements solely. So, you probably have part of a sentence or paragraph which you need to group together, you could possibly use the <span> element as follows.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag</title>
   </head>
  
   <body>
      <p>Example of <span style = "color:green">span</span>
         & the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
  
</html>

This may produce the next outcome

Example of span
& the div tag alongwith CSS

These tags are generally used with CSS to let you connect a method to a piece of a web page.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close
Privacy Policy | DMCA | Contact US
Back to top button
Close