What is the difference between DIV and P tag in HTML?

I was writing HTML and using <div> and <p> tag frequently. I know that I can write content in both the tags, but what makes them different from each other.

The difference between a <div> tag and a <p> tag is that the <p> tag gives the content on the webpage a semantic meaning and represents a paragraph. On the other hand, <div> does not have semantic meaning, and it uses to make divisions and sections on the webpage.

The <div> and <p> tags are used for many purposes and have their own meaning and importance. You will find out the difference in <div> and <p> tag and where you can use these with the help of this article.

What Is A <div> Tag In HTML

I think first of all you have to understand what is the meaning of semantic because i will use it a lot in the article. The semantics means a sign or a set of signs in a language with meaning.

A <div> in HTML is known as division tag. A <div> is a block-level element that will take 100% width on the screen. In other words, you can say that it is used to make blocks of content on the webpage.

I have written an HTML code to give you an example of assigning an <p> element to the <div> element as a child.

<div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus delectus aut neque in minus quo nulla consequatur 
  </p>
</div>

You can see in the below screenshot image that the <div> tag has taken the 100% width of the screen. I have given a border with CSS to the <div> element to see the width.

Moreover, you can see that the browser does not give any padding and margin to the <div> element and the bottom box of the image I have opened with the chrome web developer tool shows that it is a block-level element.

What Is A <p> Tag In HTML

A <p> tag in HTML represents a paragraph on the webpage, and it is a block-level element. It is a semantic tag because it provides a meaningful markup to the screen reader for accessibility.

I have written HTML code to provide you with an example of the <p> element on the webpage.

<div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus delectus aut neque in minus quo nulla consequatur 
  </p>
</div>

You can see in the below image that <p> element has taken the entire width of the screen, and the browser has given 16px of top and bottom margin to the <p> element.

The light brown colour on the top and bottom is because of margins. You can see this colour when you hover over the element box in the chrome developer tool.

Difference Between A <div> Tag And A <p> Tag

Now we know what these tags are, and the question is, what is the difference between those.

The differences are:-

• A <div> tag is not a semantic tag (means a word with a meaning in a language) in HTML which means it is not providing any meaning to the screen reader for accessibility but <p> tag has semantic meaning.
• The <div> tags are used to make sections to make a layout of the webpage while <p> tag is used to write paragraphs on the webpage.
• The <div> tag can contain other child elements on the webpage such as <p>, <h1> or a <button> element. On the other hand <p> tag does not contain any other child element, however, you can write some inline elements such as <span>, <strong> to make it more stylish.
• You cannot assign a <div> element inside the <p> element because <div> will only use to create a divison so you would not like to create division inside the paragraph.
• You can assign a <p> element inside the <div> element because <div> element represents a group of child elements on the webpage.
• You can nest a <div> element inside a <div> element in HTML.

I want to give an example, and for that, I have written the HTML code to create sections with the help of the <div> element.

<div>
  <h1>First section</h1>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat maxime tempora sapiente mollitia harum esse a modi quia id atque.</p>
  <a href="https://www.google.com">Google.com</a>
</div>
<hr>
<div>
  <h1>Second section</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores ab eligendi provident unde commodi? Ducimus facilis delectus cumque non commodi.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores ab eligendi provident unde commodi? Ducimus facilis delectus cumque non commodi.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores ab eligendi provident unde commodi? Ducimus facilis delectus cumque non commodi.</p>
  <button>Button</button>
</div>
<hr>
<div>
  <h1>Third section</h1>
  <div>
    <h2>List items</h2>
    <ul>
      <li>First list item</li>
      <li>Second list item</li>
      <li>Third list item</li>
      <li>Fourth list item</li>
    </ul>
  </div>
  <hr>
  <div>
    <h1>Fourth section</h1>
    <img src="https://easycodingtips.com/wp-content/uploads/2022/01/post-featured-image.jpg" alt="">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, necessitatibus.</p>
  </div>
</div>

You can try yourself in the below demo of codepen.

See the Pen Untitled by Jaspal (@jaspal9755) on CodePen.

Should I Use <div> For Everything?

You can use <div> to represent most of the sections on the web page, but there are semantic tags in HTML which provide semantic meaning to the webpage. You should avoid using <div> in an excessive way. Otherwise, you will lose your web page’s semantic meaning.

Moreover, If you work as a web developer in the team, other teammates working on the same website will not understand the HTML code easily if you use the <div> element excessively.

I recommend using the <div> tag inside a semantic tag on the webpage, and one or two <div> tags are enough under one parent semantic element. It would be best to try to use more semantic tags rather than <div> tags.

For example, you can use semantic elements such as <section> element and put <div> tag inside, making it more understandable.

<section id="main-section">
 <div>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
  <button>Button</botton>
 </div>
</section>