<div> and <p> elements seem to do the same thing, what are the differences between the two?

Question

I notice I can use either div or p elements in the workspace and the paragraphs seems to display exactly the same. Since it doesn’t seem to matter much one way or another, which element should I use here and why?

Answer

This is a great discovery as it illustrates that div and p elements have something in common: they are both block level elements. As such, the browser renders these elements in the same way. It is up to the developer to pick the tag which best describes the content it will contain. When we are dealing with paragraphs, the semantically correct tag to pick would be the p tag.

As you press on with your learning, keep on experimenting in the workspace!

21 Likes

i thought that p element be the bet to implement on a webpage as compared to div element.

I am contain p elements in div & feel good

8 Likes

The elements are ‘semantic’ that means they describe the content between the open and close tags. The p element is paragraph level content, usually text. The div describes a section of a portion of the page or content. Divs usually contain different kinds of content that is all related to a single thing, like an image and an article about it. There is also an ‘article’ tag and a few others that help browsers and, most importantly, search engines find specific content on your web pages.

49 Likes

it is up to the developer`s GOALS about the relevance of the site to search engines, I think. If we write the content in an “artistic” way, we may be understood by nobody…

4 Likes

I believe the OP has pointed out the relational similarities between the two tags. Semantically correct is another way of saying most academically supported (i.e. - W3C schools, and other HTML standards resources). Differentiating between the two will not be critical until other tools that are very container driven, like Bootstrap 4, are applied. There will be many more

tags that will need to be carefully nested to ensure proper reactivity in certain device displays.
2 Likes

[quote=“divdoctor, post:6, topic:300314”]
tags that will need to

As divdoctor mentions nesting here I remembered a question that’s bugging me…

Should the text be nested under the

tag below? It doesn’t seem to matter in practice here but will it later?


Thanks :pray:

1 Like

Which tag are you talking about?

1 Like

Sorry for unclear question… Should the ‘b’ of “brown bears” be directly underneath the ‘<’ of the ‘p’ tag on the line above? Thanks

1 Like

It should be after the <p>

4 Likes

I don’t get it. :confused: Could u explain a bit simpler? :slightly_frowning_face: (me = beginner :cry:, me no understand)

2 Likes

hello, please what do you mean by “artistic way” ?

Actually there is a difference between the two, the p tag inserts a new paragraph, for example if you want to put a little space between two consecutive images or videos, whereas the div tag doesn’t have that power.

1 Like

Experiment and talk in other forums. Google. As far as I’ve seen it’s more used p than div but will depend on the context.

The div element divides the code into sections, while the p element shows paragraphs.
For example,

<!DOCTYPE html>
<html>
  <head>
    <title>Your text</title>
  </head>
  <body>
    <a href="#Your text">Your text</a>
    <a href="#Your text">Your text</a>
    <div id="Your text">
      <h1>Your text</h1>
      <p>Your text</p>
      <img src="Your text">
    </div>
    <div id="Your text">
    <!-- The div here is a section and the id is not shown. The heading below and the text however, is shown. -->
      <h2>Your text</h2>
      <p>Your text</p>
      <!-- The p element is shown when the code is run.-->
      <a href="Your text">Your text</a>
      <p>Your text</p>
    </div>
  </body>
</html>

Note: This is a random format.
Don’t really try to email me!!

So the difference is that divs are not shown but p elements are.
Divs make this easier to read.
This is what the code would be like if there were no divs.

<!DOCTYPE html>
<html>
  <head>
    <title>Your text</title>
  </head>
  <body>
    <h1>Your text</h1>
    <p>Your text</p>
    <img src="Your text">
    <h2>Your text</h2>
    <p>Your text</p>
    <a href="Your text">Your text</a>
    <p>Your text</p>
  </body>
</html>

Yes, it is still easy to read, but what if this had no divs:


How would you read this?!!
However, the p element doesn’t have the same purpose. p elements show paragraphs.
SO,
p element: paragraph
div element: separates parts of code (not shown in the website itself)

4 Likes

What is difference between

and tags?

I think that hes asking is if it matters that the text written in the editor are not positioned inside the vertical planes of the opening p tag.

Hello all, I am a little bit confused and hence this question. I wish to ask, can one choose between using either the DIV or SECTION elements since to me it seems they both serve the same purpose as they can be used to ensure coherent structuring of the HTML content?

I am particularly confused as I do not know in what scenarios we are to stick to the DIV or SECTION elements.

Hey, @ruby5789122987 welcome to the forums.

There’s no real standard for this. Let’s take this forum as an example. Each post would probably be a <section> But then the bar for likes on stuff would be a <div>.

image

But do remember that the <section> tag has semantic meaning but the <div> tag does not.

1 Like

Not quite an answer to the OP but important to understand…

The “

” tag is not semantic. I.e. it does not indicate anything about how to read the document. This is important for screen readers.
s are useful but should not be overused.
See this post elsewhere:
[Stop using so many divs! An intro to semantic HTML - DEV Community 👩‍💻👨‍💻]
The point made in the above link is: <div> s don’t really impart any useful info about the structure of a document.