HTML Heading and Paragraph 2024

HTML stands for Hyper Text Markup Language.HTML is used for creating webpages. When we click on the text it redirects us to another page, this text is called hypertext. Markup Language means it marks the text into HTML tags like bold tags italic tags etc. Many Elements like HTML heading, HTML paragraph, HTML image, HTML link and many html tag combine to make a web page and Elements contain tags and content.HTML elements tell the browser how to show the content.

Version:

Editors:

Basic Structure:

<!DOCTYPE html>

It tells the browser that the document type is HTML5

<html>

It tells the browser it is the root element of the html page

<head>

The head tag contains the meta description

Meta tag help in the SEO of the website

Many link files are written in the head tag

<title>

It tells the browser title of the web pages

<body>

Body tags contain all the other tags to show the content on the web pages

Like heading tags , paragraph tags, image tags, HTML link and bold tags.

Basic Structure Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 
</body>
</html>

HTML document always starts with .html

watch our complete video click here :Rashid Technical

HTML Heading tag:

Heading tag start from h1 to h6. Heading tags describe the importance of the content. People usually use headings for bold text without understanding its importance. One page contains only one h1 heading. The heading is the most important tag in SEO.

<h1> This is heading</h1>

<h1>

This is start tag

</h1>

This is closing tag

This is heading is a content tag

HTML Heading Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>This is First heading</h1>
  <h2>This is second heading</h2>
  <h3>This is third heading</h3>
  <h4>This is Fourth heading</h4>
  <h5>This is five heading</h5>
  <h6>This is six heading</h6> 
</body>
</html>

Output:

Default Size of Heading:

h1=32px

h2=24px

h3=18.72px

h4=16px

h5=13.28px

h6=10.72px

The font size of H4 is almost the same as that of paragraphs.

HTML Paragraph:

Paragraph tag is donated by <p> tags and </p>

Every paragraph starts on a new line, and browsers add a margin before and after each paragraph. Extra space in the paragraph can not be displayed on the webpage. Browser automatically removes the extra space in the paragraph.

Use lorem ipsum for Dumy text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>This is paragraph</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, voluptatum?</p>
</body>
</html>

HTML Pre Tag:

Pre element defines preformatted text. It displays space and line breaks in the text and shows the same text as written in tags

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 <pre>
  
  My Sorrow, when she's here with me,

  Thinks these dark days of autumn rain

  Are beautiful as days can be;

  She loves the bare, the withered tree;

  She walks the sodden pasture lane.
  
 </pre>
</body>
</html>

Output:

Hr and br tag:

<hr> is used for horizontal breaks into the HTML pages.

<br> is used for line break into the HTML pages

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 <h1>this is heading</h1>
 <h3> follow us for more update <br>follow me on pinterest and instagram</h3>
 <hr>
 <h3>rashid technical</h3>
 <hr>
 <h3>subscribe us</h3>
</body>
</html>

Output:

About Author

Muhammad Rashid Iqbal

My name is Muhammad Rashid Iqbal. I belong to Muzaffargarh,Punjab,Pakistan .My graduation in bachelor in Information Technology. Am expert in Web designing, web development ,Mern Stack developer, Email Marketing ,content writing, guest posting and lead generation.

See author's posts

HTML Heading and Paragraph