programminghead Logo

HTML Headings, ParaGraphs and Text Formatting with Examples

Headings in HTML

Headings are used in HTML to declare some Impotent lines, Titles and Heading of Page or Paragraph.
In HTML, HTML Headings are declared inside HTML Headlings starting and closing Tags "<h1></h1>".
Like:

HTML Heading: Example


  <body>
   <h1> My First Heading </h1>
  </body>	

Results :

This text is underlined
This text is not underlined

Headings Tags in HTML

Headings tags are little different then other HTML Tags. They do have starting and Closing Tags but they also have More then one tags for Heading.
They have Six Different Heading Tags in HTML.

Like:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Different Heading Tags :

As we already know, there is Six Tags in HTML for Headings. Those Six Headings tags works the same (Used to Declare Headings) but the Heading Text size/Font Size makes them Different from each other.

So the first Heading tag <h1> has the Largest or biggest font Size among all other Heading Tags.
And
The last Heading Tag <h6> has the Smallest font size amount all other Heading Tags.

Headings Example

	
<html>
  <head>
    <title>HTML Headings</title>
  </head>
  <body>
  <p> 
  <h1> Heading 1 </h1>
  <h2> Heading 2 </h2>
  <h3> Heading 3 </h3>
  <h4> Heading 4 </h4>
  <h5> Heading 5 </h5>
  <h6> Heading 6 </h6>
  </p>
  </body>
</html>

Results

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

<p> Para (Paragraph) Tag in HTML :

Para tag "written as <p>" used in HTML to write paragraphs inside HTML Web-pages. We write p (p for Para/Paragraph) inside these "<" opening and ">" closing Brackets.

Like : <p>
Like other HTML tags This <p> Para Tag also has the Closing tag.
Whom we write as </p>

Para Starting Tag : <p>
Para Closing Tag : </p>

Writing a Paragraph inside HTML Document

To write a Paragraph inside a HTML Document we have to Create a HTML File.
Click here to Know How to Create a HTML file.
After creating your HTML file. write Paragraph's Starting and closing tags <p>......</p> inside Body's <body>......</body> Starting Closing tags.
Like :
<body>
    <p></p>
</body>


Inside the Paragraph's starting and Closing tags <p>......</p> you have to write your Paragraph Data.

Paragraph Example


<html>
  <head>
    <title>HTML ParaGraph</title>
  </head>
  <body>
  <p> 
  This is my First HTML Paragraph. we have to write our paraGraph's Content / data inside the Para's Starting and Closing tags.
  </p>
  </body>
</html>	

Output

This is my First HTML Paragraph. we have to write our paraGraph's Content / data inside the Para's Starting and Closing tags



Text Formatting In HTML

in HTML we have Special Elements to Defining text with Special Meaning. Using those Special Element's Tags we can Make our text Looks unique or has unique profile.

Tags Like:
Bold Element
italic Element
strong Element
Emphasized Element
Marked Element
Small Element
Delete Element
Underline Element
Subscript Element
Superscript Element


Bold Element

Bold Element written as <b> Defines Bold text. Make text little dark/Bold.
To make any Text Bold we only have to write that text Inside yhe Bold Element <b>

Like:
<b>This is My Bold Text<b>

Bold Element Example:


<html>
  <head>
    <title>Bold Text</title>
  </head>
  <body>
  <b> This text is bold  </b> <br/>
  This text is not bold
  </body>
</html>	

Results :

This text is bold
This text is not bold

Italic Element

Italic Element written as <i> Defines Italic text. Make text little Cursive/Rotate.
To make any Text Italic we only have to write that text Inside the Italic Element <i>

Like:
<i>This is My Bold Text</i>

Italic Element Example:


<html>
  <head>
    <title>Italic Text</title>
  </head>
  <body>
  <i> This text is italic  </i> <br/>
  This text is not italic
  </body>
</html>	

Results :

This text is italic
This text is not italic

Strong Element

Strong Element written as <strong> Defines Strong text. Make text little dark/Bold (Works like Bold Element).
To make any Text Strong we only have to write that text Inside the Strong Element <strong>

Like:
<strong>This is My Bold Text</strong>

strong Element Example:


<html>
  <head>
    <title>strong text</title>
  </head>
  <body>
  <strong> This text is strong  </strong> <br/>
  This text is not strong
  </body>
</html>	

Results :

This text is strong
This text is not strong

Emphasized Element

Emphasized Element written as <em> Defines Italic text. Make text little Cursive/Italic. (Works Same as Italic Element)
To make any Text Emphasized we only have to write that text Inside yhe Emphasized Element <em>

Like:
<em>This is My Emphasized Text</em>

Emphasize Element Example:


<html>
  <head>
    <title>emphasize text</title>
  </head>
  <body>
  <em> This text is emphasize </em> <br/>
  This text is not emphasize
  </body>
</html>	

Results :

This text is emphasize
This text is not emphasize

Mark Element

Mark Element written as <b> Defines Marked or Highlighted text. This Element Makes text little Highlighted From Background with Different Color.
To make any Text Marked we only have to write that text Inside the Mark Element <mark>

Like:
<mark>This is My Marked Text</mark>

mark Element Example:


<html>
  <head>
    <title>marked text</title>
  </head>
  <body>
  <mark> This text is marked  </mark> <br/>
  This text is not marked
  </body>
</html>	

Results :

This text is marked
This text is not marked

small Element

small Element written as <small> Defines small text. This Element Makes text little small in Size.
To make any Text small we only have to write that text Inside the small Element <small>

Like:
<small>This is My small Text</small>

small Element Example:


<html>
  <head>
    <title>small text</title>
  </head>
  <body>
  <small> This text is small  </small> <br/>
  This text is not small
  </body>
</html>	

Results :

This text is small
This text is not small

Delete Element

Delete Element written as <del> Defines Deleted text. This Element Draws a line through selected text.
To make any Text Deleted we only have to write that text Inside the Delete Element <del>

Like:
<del>This is My Delete Text</del>

delete Element Example:


<html>
  <head>
    <title>deleted text</title>
  </head>
  <body>
  <delete> This text is deleted  </delete> <br/>
  This text is not deleted
  </body>
</html>	

Results :

This text is deleted
This text is not deleted

Underline Element

Underline Element written as <u> Defines Underlined text. This Element Draws a Underline at the bottom of the selected text.
To make any Text Underlined we only have to write that text Inside the Underline Element <u>

Like:
<u>These are My Underlined Texts</u>

underline Element Example:


<html>
  <head>
    <title>underlined text</title>
  </head>
  <body>
  <u> This text is underlined  </u> <br/>
  This text is not underlined
  </body>
</html>	

Results :

This text is underlined
This text is not underlined

Subscript Elements

Subscript Element written as <sub> Defines Subscript texts. Make text little small in size and reposition text from its Normal Position.
To make any Text Insert we only have to write that text Inside the Subscript Element <sub>

Like:
<p> this is <sub>Subscripted</sub> text </p>

Superscript Elements

Subscript Element written as <sup> Defines Subscripted texts. Make text little small in size and reposition text from its Normal Position (same like Subscripts but in the repositions texts in opposite direction).
To make any Text Superscripted we only have to write that text Inside the Superscript Element <sup>

Like:
<p> this is <sup>Superscripted</sup> text </p>

sub and super Script Example:


<html>
  <head>
    <title>sub and super Script</title>
  </head>
  <body>
  normal text <sub> This text is sub Scripted  </sub> 
  <br/>
  normal text <sup> This text is sub Scripted  </sup>
  </body>
</html>	

Results :

normal text This text is sub Scripted

normal text This text is super Scripted

Comments

USER

01:33 pm

Thank you but where is audio adding video and music?

Admin

Hi. Thanks for writing to US. Actuality this tutorial only Covers HTML Text Elements, But if you Want to know How to ADD Audio files in HTML then Select the Given link and Visit our Another Tutorial about Audio files in HTML.
Click Here

Write to Us

Captcha