Menu
div > p. Selects all <p> elements where the parent is a <div> element. element+element. div + p. Selects the first <p> element that is placed immediately after <div> elements.
div and p are “block elements” (now redefined as Flow Content) and span is an “inline element” (Phrasing Content).
Therefore, div elements can contain p elements. Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs. That doesn't include div elements, which can only be used where flow content is expected.
They are the same. It's depends on your taste ;) p tag is not used for a new line. It is used to separate paragraphs.
They have semantic difference - a <div> element is designed to describe a container of data whereas a <p> element is designed to describe a paragraph of content.
The semantics make all the difference. HTML is a markup language which means that it is designed to "mark up" content in a way that is meaningful to the consumer of the markup. Most developers believe that the semantics of the document are the default styles and rendering that browsers apply to these elements but that is not the case.
The elements that you choose to mark up your content should describe the content. Don't mark up your document based on how it should look - mark it up based on what it is.
If you need a generic container purely for layout purposes then use a <div>. If you need an element to describe a paragraph of content then use a <p>.
Note: It is important to understand that both <div> and <p> are block-level elements which means that most browsers will treat them in a similar fashion.
All good answers, but there's one difference I haven't seen mentioned yet, and that's how browsers render them by default. The major web browsers will render a <p> tag with margin above and below the paragraph. A <div> tag will be rendered without any margin at all.
<p> indicates a paragraph and has semantic meaning.
<div> is simply a block container for other content.
Anything that can go in a <p> can go in a <div> but the reverse is not true. <div> tags can have block-level elements as children. <p> elements cannot.
Tae a look at the HTML DTD.
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;"> <!ENTITY % block "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS"> <!ENTITY % flow "%block; | %inline;"> <!ELEMENT DIV - - (%flow;)* -- generic language/style container --> <!ELEMENT P - O (%inline;)* -- paragraph -->
The only difference between the two elements is semantics. Both elements, by default, have the CSS rule display: block (hence block-level) applied to them; nothing more (except somewhat extra margin in some instances). However, as aforementioned, they both different greatly in terms of semantics.
The <p> element, as its name somewhat implies, is for paragraphs. Thus, <p> should be used when you want to create blocks of paragraph text.
The <div> element, however, has little to no meaning semantically and therefore can be used as a generic block-level element — most commonly, people use it within layouts because it is meaningless semantically and can be used for generally anything you might require a block-level element for.
Link for more detail
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With