In this post, we will learn about HTML headings and HTML paragraphs , which are among the most important HTML tags. But before we begin the explanation, we would like to welcome our dear website visitors. Welcome!
Defining headings in HTML:
HTML headings consist of six levels. The <h1> tag is the highest level, while the <h6> tag is the lowest. h stands for (Heading). Headings are considered (block elements).
How to write headings in the editor:
<h1>Title Content</h1>
<h2>Title Content</h2>
<h3>Title Content</h3>
<h4>Title Content</h4>
<h5>Title Content</h5>
<h6>Title Content</h6>Warning: If you write a heading element larger than h6, i.e. h7 or h8, the browser will consider it as content without an element, in other words as if you only wrote the content.
The correct way to use headings:
It’s important to know that heading order is crucial when using HTML headings. If the main heading is <h1>, then the subheading should be <h2>. For a better understanding, see the code below.
<h1>Learn Programming</h1>
<h2>Web Application Development</h2>
<h2>Desktop Application Development</h2>
<h2>Mobile Application Development</h2>Notice: that the title “Learn Programming” is the main title, and the other titles are subheadings. If you look closely at the articles I write, you will find the same idea.
Definition of paragraphs in HTML:
A paragraph in HTML is a <p> tag, the letter p is an abbreviation for (Paragraph), Paragraphs are considered (block elements).
How to write paragraphs in the editor:
<p>Content of the first paragraph</p>
<p>Content of the second paragraph</p>
<p>Content of the third paragraph</p>How to use headings and paragraphs:
First example:
<DOCTYPE html!>
<html>
<head>
<meta charset="utf-8" />
<title>Page or Website Name</title> </head>
<body>
<h1>Article Title</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<p>Fourth Paragraph</p>
</body>
</html>Second example:
<DOCTYPE html!>
<html>
<head>
<meta charset="utf-8" />
<title>Page or Website Name</title> </head>
<body>
<h1>Learn Programming</h1>
<p>A paragraph about programming</p>
<h2>Web application development</h2>
<p>A paragraph about web applications</p>
<h2>Desktop application development</h2>
<p>A paragraph about desktop applications</p>
<h2>Mobile application development</h2>
<p>A paragraph about mobile applications</p>
</body>
</html>Third example:
<DOCTYPE html!>
<html>
<head>
<meta charset="utf-8" />
<title>Page or Website Name</title>
</head>
<body>
<h1>Learn Programming</h1>
<p>A paragraph about programming</p>
<h2>Web Application Development</h2>
<p>A paragraph about web applications</p>
<h3>Front-ends</h3>
<p>A paragraph about front-ends</p>
<h3>Back-ends</h3>
<p>A paragraph about back-ends</p>
<h2>Desktop Application Development</h2>
<p>A paragraph about desktop applications</p>
<h2>Mobile Application Development</h2>
<p>A paragraph about mobile applications</p> </body>
</html>In the third example, add <h3>, which is a child of the title (Web Application Development). Try these codes to understand the concept.