HTML- FORMATTING

 WHAT IS HTML FORMATTING?

HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underline. There are more 14 options available that how text appears in HTML and XHTML. In HTML formatting tags are available into two categories:- 

(1) Physical Tag:- These tags are used to provide the visual appearance to the text.

(2) Logical Tag:- These tags are used to add some logical or semantic value to the text.

Now, we will study about 14 HTML formatting tags:-

(1)  Bold Text:-  HTML <b> and <strong> formatting elements. The HTML <b> element is a physical tag which display text in bold font, without any logical importance. If we write anything within <b>---</b> element is shown in bold form. For example-:

<p> <b>Write Your First Paragraph in bold text.</b></p>  

Output:-

Write Your First Paragraph in bold text.

The HTML <strong> tag is a logical tag, which displays the content in bold font and informs the browser about its logical importance. If we write anything in <strong>?????--</strong>, is shown strong text. For example-:

  1. <p><strong>This is an important content</strong>, and this is normal content</p>  
Output:-
This is an important content, and this is normal content.

(2) Italic Text:- HTML <i> and <em> formatting elements. The HTML <i> tag is a physical tag, which displays the enclosed content in italic font, without any added importance. If we write anything in <i> ---- </i>, is shown in italic letters. For example-:

<p> <i>Write Your First Paragraph in italic text.</i></p>

Output:-

Write Your First Paragraph in italic text.

The HTML <em> tag is a logical element, which will display the enclosed content in italic font, with added semantics importance. For example-:

<p><em>This is an important content</em>, which displayed in italic font.</p>

Output:-

This is an important content, which displayed in italic font.

(3) HTML Marked Formatting:- If we want to mark or highlight a text, we should write the content within <mark>-----</mark>. For example-:

<h2>  I want to put a <mark> Mark</mark> on your face</h2>

Output:- 

I want to put a Mark  on your face.

(4) Underlined Text:- If we write anything within <u>-----</u> element, is shown in underlined text. For example-:

<p> <u>Write Your First Paragraph in underlined text.</u></p>

Output:- 

Write Your First Paragraph in Underlined Text.

(5) Strike Text-: Anything written within <strike>-----</strike> element is displayed with strikethrough. It is a thin line which is crossed the statement. For example:-

<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Output:- 

Write Your First Paragraph with strikethrough.

(6) Monospaced Font-: The content of a <tt> ----- </tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width. For example:-

<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Output:- 

Hello Write Your First Paragraph in monospaced font.

(7) Superscript Text-:  If we put the content within <sup> ------- </sup>element, is shown in superscript; means it is displayed half a character's height above the other characters. For example:- 

<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p> 

Output:-

Hello Write Your First Paragraph

(8) Subscript Text-: If we put the content within <sub> ---- </sub> element, is shown in subscript; means it is displayed half a character's height below the other character's. For example:- 

  1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>  

Output:-

Hello Write Your First Paragraph in subscript.

(9) Deleted Text-:  Anything that puts within <del> ------ </del> is displayed as deleted text. For example:-

  1. <p>Hello <del>Delete your first paragraph.</del></p>  

 Output:-

Hello

(10) Inserted Text-:  Anything that puts within <ins> ------ </ins> is displayed as inserted text. For example:- 

<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p> 

Output:- 
Delete your first paragraph. Write another paragraph.

(11) Larger Text-: If we want to put any font size that is larger than the rest of the text then put the content within <big> --------- </big>. It increase one font size larger than the previous one. For Example:- 

 
  1. <p>Hello <big>Write the paragraph in larger font.</big></p>  

Output:- 

Hello Write the paragraph in larger font.


(12) Smaller Text-: If we want to put any size that is smaller than the rest of the text then put the content within the <small>---- </small> tag. It reduces one font size than the previous one. For example:- 


<p>Hello <small>Write the paragraph in smaller font.</small></p>

Output:-

Hello Write the paragraph in smaller font.

(13) Grouping Content-:  The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page. For example, If we might want to pull out of the page within a <div> element relate to the footnotes. We may need to attach the <div>  style elements so that they appear using a special set of style rules. For example:-

Content Articles

Actual content goes here.....

The <span> element, on the other hand, can be used to group inline elements only. So if you have a part of sentence or paragraph which we want to group together we could use the <span> element together. For example:- 

This is the example of span tag and the div tag along with CSS.


Comments

Post a Comment

Popular posts from this blog

HTML Images

Image
 HTML IMAGE:-    HTML img  tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element. Let's see an example of HTML image. < h2 > HTML Image Example </ h2 >    < img   src = "good_morning.jpg"   alt = "Good Morning Friends" />   Attributes of HTML tags:- The src and alt are the two most important attributes of HTML image tag are given below-: (1)  ALT-:  The alt attribute defines an alternate text for the image, that can be displayed. The value of the alt attribute describes the image in words. The alt attribute is considered good for SEO prospective. (2)  SRC-: It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server. The location of the image may be on the same directory or another service. There are two ways...
Read more

Html - Text Links, Image Links, E-mail Links

Image
  HTML - TEXT LINKS   A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage. Linking Documents A link is specified using HTML tag <a>. This tag is called  anchor tag  and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag. <a href = "Document URL" ... attributes-list>Link Text</a> The target Attribute We have used  target  attribute in our previous example. This attribute is used to specify the location where linked document is opened. Following are the possible options − Sr.No Option & Description 1 _blank ...
Read more

Html - Tables

Image
 A table is an arrangement of data in rows and columns, or possibly in more complex structure.Tables are widely used in communication, research, and data analysis. Tables are useful for various tasks such as presenting text information and numerical data. Table can be used to compare two or more items in tabular form layout. Tables are used to create databases. Defining Tables In HTML An HTML table is defined with the "table" tag. Each table row is defined with "tr" tag. A table is defined with the "th" tag. By default tables heading are bolt and centered. A table data/cell  is defined with the "td" tag.  <!DOCTYPE html>  <html>  <body>  <table style="width:100%">  <tr>  <th>Firstname</th>  <th>Lastname</th>  <th>Age</th>  </tr>  <tr>  <td>Priya</td>  <td>Sharma</td>  <td...
Read more