Page Title, Headings, and Paragraphs in HTML

Mandla Dharani
Last Updated: May 13, 2022

Introduction:

We design many pages every day, every time we always give a title, different headings, and paragraphs in most of the cases. Now think of designing a web page using HTML, here we also use page titles, headings, and paragraphs. In this blog, we will study how to create page titles, headings, and paragraphs in HTML.

Page titles: The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

 

Headings: HTML contains different headings that are defined from <h1> to <h6>. Generally <h1> is the biggest font and <h6> will give the smallest font on your webpage.

 

Paragraphs: In HTML we define paragraphs using <p>, it always starts on a new line. The browsers automatically add white space or a simple margin before and after a paragraph. Paragraph tags automatically give one-line margins.

 


Now let’s dive into the topic and see its implementation too..!!

 

HTML <title> Tag:

 

The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The <title> tag is required in HTML documents!

The contents of a page title are very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search engine results

Here are some tips for creating good titles:

  • Go for a longer, descriptive title (avoid one- or two-word titles)
  • Search engines will display about 50-60 characters of the title, so try not to have titles longer than that
  • Do not use just a list of words as the title (this may reduce the page's position in search results)

So, try to make the title as accurate and meaningful as possible!

Note: You can NOT have more than one <title> element in an HTML document.

Now let’s check out the implementation part:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CodingNinjas</title>
</head>

Output:

Page title: CodingNinjas will be displayed as your tab name.

You can check the 

HTML Paragraphs:

A paragraph is used if you want to finish what you are talking about and start a new conversation. 

  • If you want to explain something on your web you use a paragraph.
     
  • For a paragraph we use a <p> tag.
     

In HTML we have different tags to display the paragraphs, to break them into a single line, and many more. Below are some tags used in paragraphs. Let’s see the implementation of these tags and paragraphs.

 

TagDescription
<p>Defines a paragraph
<br>Inserts a single line break

 

Code:

 

<!DOCTYPE html>  
<html>  
  <head lang="en">  
    <meta charset="UTF-8">  
    <title>Paragraphs</title>  
  </head>  
<body>  
    
    <p>CodingNinjas</p>  
    <p>CodingNinjas is platform to develop your coding skills.<br>  
       CodingNinjas have many blogs, interview prepartion kit, placement guidance, learning tracks and many more..!!<br>  
        Please check out at codingninjas.com</p>  
  
</body>  
</html>  

 

Output:

 

 

HTML Headings:

 

HTML headings are titles or subtitles that you want to display on a webpage.HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Users often skim a page by its headings. It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

 

Implementation:

<!DOCTYPE html>
<html>
<body>


<h1>CodingNinjas</h1>
<h2>CodingNinjas</h2>
<h3>CodingNinjas</h3>
<h4>CodingNinjas</h4>
<h5>CodingNinjas</h5>
<h6>CodingNinja</h6>


</body>
</html>

 

Code:

 

 

Frequently Asked Questions:

  1. How are headings and paragraphs defined in HTML?

    The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. The paragraphs are defined using <p>.
     
  2. Can you put a header in a paragraph HTML?

    It is impossible to put a heading element inside a p element in HTML markup, not just formally but because browsers implicitly terminate an open p element when they encounter a heading.
     
  3. What is </p in HTML?

    The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

     
  4. How do I change the header in HTML?

    To set the heading alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <h1> to <h6> tag, with the CSS property text-align. HTML5 do not support the align attribute of the heading tag, so the CSS style is used to set alignment.

     
  5. What is a title in HTML?


The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored. ... Both opening and closing tags are required. Note that leaving off </title> should cause the browser to ignore the rest of the page.

 

Key Takeaways:

In this blog, we learned about page titles, headings, and paragraphs in HTML.

 

  • To add a title to HTML we need <title> as the most important attribute.
  • We can add a single paragraph using <p> or we can break it using <br>, <br> helps to break the paragraph into single lines.
  • At last we discussed various headings and we saw how h1,h2,h3,h4,h5 changes through implementation.

 

Check out more blogs on various concepts on HTML like Style Attribute in HTML, Block and Inline elements in HTML to read more about these topics in detail. And if you liked this blog, share it with your friends!

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think