Featured Post

How to Create HTML Headings and Paragraphs

By

 





Introduction


This HTML guide is part of the full-stack web development course, starting from basic HTML. In this post, we will learn what are HTML tags and how to write the heading tag in HTML. These tags are usually some words enclosed by  angle brackets, that is written as < and >.

The basic HTML tags that form part of the structure of a document in html  are heading tags, paragraph tags  and listing tags. There are several more tags, but, we will go through all of them  in different posts, so that , you are not burdened to learn all of the basics in just one sitting!


What are HTML tags?


HTML tags are basic html elements that assists you to structure your HTML document and Heading tags are used to write different headings for a html document as explained in detail in this post. 



Headings


Every document has different types of headings and html has 6 types of heading tags , namely, h1 ,h2 ,h3, h4, h5 and h6.

Let’s understand the differences between the different heading tags mentioned above. Based on a decreasing chronological order, h1 is the largest heading, h2 is smaller than h1, h3 is smaller than h2, h4 is smaller than h3 , h5 is smaller than h4, h3 is smaller than h4 and h2 is smaller than h1. 

The following code will show you the difference between the different heading tags. Please note that there will be an opening and closing tag for all the tags including the heading tags. The opening tag is written as <> and the closing tag is written as </>. In between each of the opening and closing tags, we will be writing some text as shown below, but, when you see the output in the console, you will get the output in different sizes due to the differences between the heading tags h1 ,h2, h3, h4, h5 and h6 as explained above.


Code

 

<h1>Hello World!</h1>

<h2>Hello World!</h2>

<h3>Hello World!</h3>

<h4>Hello World!</h4>

<h5>Hello World!</h5>

<h6>Hello World!</h6>


Output

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!
Hello World!



What is a Paragraph tag

Paragraph tags are used to structure your paragraphs in an HTML document so that your document looks spaced out and has a clean structure based on the different layers of  topics or discussions in the document. 

The paragraph tags are indicated by using the open and close <p> and </p. tags respectively.


Why use a Paragraph tag?

In  the above paragraphs, we have learnt how the heading tags define the different headings in our html document and in this section we are going to learn how the paragraph tags are going to define the different paragraphs in our html document. 

The idea of using the paragraph tag is to separate out different chunks of texts into various blocks  of texts in order to come up with several unique paragraphs that identifies individual set of text content within the respective set of paragraphs , so that the user or reader can experience a smooth reading experience while at the document. As we all know, separate topics and sub-topics if structured within separate paragraphs, could result in an efficiently structured and organized reading content. This kind of structuring of the text inside a website page document is only possible by applying the paragraph tags.


How to Create and Use Paragraph tags

Now that we know, as detailed above, the reason for  having paragraphs in our html text document, let us learn , how to create and use the paragraph tags. The paragraph tag is written inside the open p tag as <p> and it also has an ending p tag that is written as </p>


So, the paragraph element is created and defined by writing the starting and ending p tags respectively, that is, starting p tag is written as <p> and the ending p tag as </p> Please note how the p is written in both the cases within the starting and the ending p tags.


After writing the paragraph tags, we can write some content in between the starting and the closing p tags and for the viewer, the p tags are not visible, only the coder is able to see the tags, and the viewer is only able to see the contents within the paragraph tags, Let us consider an example code to understand.


Code


<p> Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren 
Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren 
Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem 
Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem 
Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren
Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren 
Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren 
Ipsum Loren Ipsum Loren
</p>


Console Output

Inside the console screen, the display will read as the following paragraph lines as shown below:


Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Lorem Ipsum Lorem Ipsum Loren Ipsum Loren Ipsum Loren


Explanation

As we see in the code block above, the paragraph tags with the opening <p> tag and the ending </p> tag helped in write several paragraph for the html document and form part of the content. The opening tag <p> has the angle brackets as shown here and the ending tag shown as </p> with the forward slash as shown here inside the angular brackets. 

In both the tags we write the letter p inside the angular brackets to indicate that it is a paragraph tag. If we forget to write either the opening or starting paragraph tag that is, <p> or the ending or closing paragraph tag, that is, </p>, then the code output will throw up an error in the console .



Conclusion

As you can see in the output, the different heading tags in the decreasing order from h1 to h6, gives the above output in terms of the different sizes of the heading text as shown above in the console. H1 heading tag gives us the biggest heading text size  for our html document text. So, we now learnt how to define different headings in an html document by using the headings tags.

We also learnt about using paragraph tags in HTML and how to use it appropriately in your html document to enable the viewer to see a document with beautiful layout of content arranged in neat and structured paragraphs.





I am a self-taught Web Developer and Blogger, also into teaching coding for absolute beginners, writing technical articles and the purpose of this blog is to let beginners become tech savvy in technology covering coding, programming, web development, social media management and digital marketing. Even if you are a total beginner with no tech skills, this blog will help you to attain the required tech skills in no time, without the need to get formal tech education or degrees.

Comments

Post a Comment

Popular Posts

Build A Random Quote Machine in React

By
Image
  Build A Random Quote Machine in React  This ReactJS Tutorial will teach you how to create a random quote generator using React hooks. This is a challenge for testing your frontend libraries in the freeCodeCamp frontend libraries certification projects and in this challenge, I will walk you through the steps so that you can pass all the ten tests in this challenge. This React Project is part of the freeCodeCamp frontend Libraries Certification Challenges and here, I am going to walk you through the challenge and also break down the challenge into smaller, more understandable steps, to demonstrate how to build this App in a simple way. The Random Quote Machine App is a very unique app that will allow the users to interact with the app , whereby by clicking on a button, you will be able to see random new quotes with their authors' names and you will also be able to share these quotes on Twitter.  Code editors required for this challenge :   We will be coding in HTML, ...
Read more

A Simple Guide to Promises in JavaScript ES6

By
Image
A Simple Guide to Promises in JavaScript ES6 In this JavaScript tutorial, based on the freeCodeCamp JavaScript Algorithms and database structures, I will be explaining and walking you through the concept and usage of Promises in JavaScript, with very simple examples to make you understand the concept easily.  What is a Promise in JavaScript? A Promise in JavaScript is an object that displays the final success or failure of an Asynchronous operation.    A Promise in JavaScript is similar to a promise given in real life, meaning, it is Asynchronous, that is, it is unidirectional. When you give a promise to another person, you could either fulfil that promise or reject the promise, but, you can not both fulfil as well as reject a promise given. Similarly, in JavaScript, a Promise is Asynchronous in nature. Imagine a situation whereby you decided to apply for loan to start a new business. You make a loan application letter the next day and approach the Bank Manager. When ...
Read more

Welcome to my first Blog Post

By
Image
This is just an introduction and welcome post to all the readers. I am writing this post to beginners who are learning Programming with a fear of walking in this coding journey. Even if you don't have any formal degree in Computer Science, let me tell you that you can walk this path of web development, without any fear, as long as you are willing to do so. I will be posting several tutorials and projects along the way to help you learn programming without the need to feel stressed and frustrated. My tutorials will be mostly coding tips, concepts, tutorials and  Beginner Projects on HTML5, CSS3, JavaScript including React, and Python for beginners. See you in the next blog post!
Read more

Top Free Online Websites to Learn Coding

By
Image
Top Free Online Websites to Learn Coding This guide will help you to find  online sites to learn Coding for free.                   Photo by Antonio Batinić: Finding free sites online to learn Programming is a big task when you search online, as there are millions of resources that are available for free. Sometimes, it can be a time killer and really tiring and tedious and simultaneously, also lead to confused minds and make you demotivated to focus on your goals. You may also select the wrong resources and end up getting totally demotivated after wasting few months or years on the wrong resources. I have made your search easy and convenient by presenting below, the top ten sites that offer free online programming. Here are the names of the online sites that offer Programming courses, completely free of cost. While, you may have across several blogs talking about of free courses, please note that some of the sites mentioned online ar...
Read more

Build A Calculator in React

By
Image
  Build A Calculator in React This project is part of the freeCodeCamp react certification program. In this React Project tutorial, we will learn how to build a simple calculator using JavaScript React framework.  TASKS TO ACHIEVE IN THE PROJECT The calculator should contain clickable element with an  'Equal to'  sign (that is, an = symbol )  which has an id of "equals". There should be ten clickable elements having one number each from 0-9 with the following corresponding IDs :  id="zero", id="one", id= "two", id="three", id="four", id="five", id="six", id="seven, id="eight" and id="nine" There will be four clickable elements each having one of the primary mathematical operators with the following corresponding IDs:  id="add', id="subtract", id="multiply", id="divide". T here will be one clickable element with a decimal point  symbol w...
Read more

Beginner's Guide On For Loop in Python

By
Image
  Beginner's Guide On For Loop in Python Introduction This post is for beginners who are trying to learn Python and they will find this step-by-step guide very easy to understand.  Here, I will be first introducing the concept of the 'for' loop in Python, and thereafter, I will proceed to explain the significance and methods of using this loop in your Python projects with several easy-to-understand examples and source code.   What is a 'for' loop A 'for' loop in Python is used to loop over a sequence and it is very useful when you perform tasks in your python functions. The 'for' loop could be used for looping or iterating over a list, tuple, set, dictionary or a string. We will see the examples below. During the phase of looping through a list for example, after creating the variable name to specify each item in the list, we will decide what is the action that is to be executed in the phase of this iteration whereby each and every item s...
Read more

How to remember code in your learning phase

By
Image
How To Remember Code In Your Learning Phase How to remember code is the biggest fear factor in every beginner's mind when setting off to learn Programming. You may heard some friends or colleagues brag that " Oh, I could memorize code so fast and very easily , as I have a sharp memory !" After hearing this many times in a row, you tend to get disappointed or even slow down in your learning journey and some learners may even give up learning to code. Now, let me tell you, please stop listening to others' brag stories and just focus on you as a learner while learning to code. Just compare you to yourself and no one else! In this article, I will be providing you with enough tips and best practices to strengthen the process of your learning journey and you will then realize that it was a waste of time looking at other learners' learning process. DOCUMENT EVERYTHING There are different ways to document code, and given below are pointers to document your code. Write dow...
Read more