HTML Headings, paragraphs, and text formatting tags

on


HTML Heading Tags


HTML provides six levels of heading tags.  These tags are used to define Headings in web pages. The tags are  <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

<h1> is the highest (most important) and <h6> is the lowest.

<h1> is used to define main Heading of the page and there should be one <h1> in a web page.

<h2> is used to define sub heading under the main Heading <h1>. 

<h3> is used define further sub heading under <h2> and so on down to <h6>.


Example :



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Heading Tags</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <h1>Main Heading</h1>
        <h2>Section Heading</h2>
        <h3>Subsection Heading</h3>
        <h4>Fourth Level Heading</h4>
        <h5>Fifth Level Heading</h5>
        <h6>Sixth Level Heading</h6>

        <script src="" async defer></script>
    </body>
</html>


Output :

Main Heading

Section Heading

Subsection Heading

Fourth Level Heading

Fifth Level Heading
Sixth Level Heading

Notes :

  • In HTML Headings help organize content and improve accessibility.
  • Search engines use headings to understand the structure of content of a webpage.
  • It is recomnded to use headings for better document structure.

HTML Paragraph Tag 

A paragraph is a block of text that is separated from other blocks by vertical space in the browser. Paragraphs help organize content and make it easier to read.

HTML paragraphs are defined using the `<p>` tag. 

<p> is the go to tag to wrap a block text that is to be displayed in a webpage. 

A paragraph in a web page covers 100% with of the screen unless we set the width of the paragraph.


Syntax : 

<p> This is a paragrpah </p>

Example :


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Paragraph Example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <p>This is a Paragraph. </p>
        <script src="" async defer></script>
    </body>
</html>


Output : 

This is a paragraph.


It is best practise to use `<p>` tags to improve readability and maintain a clean, semantic structure in your HTML documents.

Notes :
  • In Browsers <p> automatically add space before and after each paragraph.
  • We should use paragraphs to separate different ideas or sections of text.
  • Avoid using multiple `<br>` tags for spacing; use `<p>` for proper structure.
  • Paragraphs can contain text, inline elements (like `<a>`, `<strong>`, `<em>`), but not block-level elements (like another `<p>` or `<div>`).






Comments

Post a Comment