<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!

25 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

4 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.

17 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…

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.

[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:

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

It should be after the <p>