Can I have more than one div?


#1

I know a little HTML, but I figured that I’d brush up on it (and CSS) before tackling Javascript. Therefore I’m taking the Intro-to-HTML course, but I’m confused by the

tag.

So I am at lesson 4, HTML Structure. (Well, I went to lesson 5, Headings, but came back.)
I played around a bit, and the following works, but I really don’t grasp the hierarchy. Any helpful comments about format and formatting would be appreciated. Thank you.

<body>
  <h1>Hello World</h1>

  <div><h5>Hello World</h5>
<p>This paragraph is somehow both inside and outside the "div" elements.  <div>Div inside the paragraph.</div></p>
  </div>  
  <div> Test of Div.  Curious if I can have more than one.</div>
   
</body>

FAQ: Learn HTML Elements - Intro to HTML - HTML Structure
#2

Paragraphs are intended for textual content, not sectional content. For that reason, we do not nest other block level elements inside a P element.

For the record, let’s see what happens when we try to validate the above code, but we have to first wrap it in valid HTML.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Is a DIV in a P valid HTML?</title>
</head>
<body>
  <h1>Hello World</h1>

  <div><h5>Hello World</h5>
<p>This paragraph is somehow both inside and outside the "div" elements.  <div>Div inside the paragraph.</div></p>
  </div>  
  <div> Test of Div.  Curious if I can have more than one.</div>
</body>
</html>

As expected, it raised an Error…

Error: No p element in scope but a p end tag seen.
</div></p>

The reason for this error is that HTML will arbitrarily close a P element if it encounters another block, such as a P or a DIV or UL, etc. As far as the browser is concerned, the paragraph ended after the first period (full stop).

I haven’t tested this in a browser yet but expect something along these lines (font size ignored)…

Hello World

Hello World

This paragraph is somehow both inside and outside the "div" elements.

Div inside the paragraph.
Test of Div.  Curious if I can have more than one.

Notice the line spacing. Headings and paragraphs have by default a blank line separating them from what’s above and what’s below, but DIVs do not.


#3

Thank you. That makes sense and explains it very well. Especially the part about the /p error. As I didn’t know that. Thanks again!


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.