Question about

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I hope that this is the correct ng to ask HTML questions in rather  than
about writing - I looked through the recent posts and I suspect my
question does not belong here. In that case I beg your indulgence and a
pointer to a more appropriate place.

I'm learning about all things Internet and in some samples of code, my
NetBeans IDE throws up some errors. I tried using the w3school website
and also the W3C website to find answers - the w3school website did not
address my question and the W3C website is almost impossible for me to

My question is regarding the use of the <div> tag.

In course samples, the instructor coded:

<p> <div> some stuff here </div> </p>

My NetBeans IDE throws up an error about the </p> tag being unmatched.

I suspect that the <div> tag breaks the paragraph, but I can't find a
good definition. I know that both the <p> and <div> tags are block-level
tags, but do these tags have some hierarchical rank?

Can I, for instance, have <div><p></p></div> but not vice versa?

What is a good place to look up these type of questions?

Thank you.

Re: Question about

On 11/17/2010 4:41 PM, MikeB wrote:
Quoted text here. Click to load it

The info given with the error on the W3C HTML validator gives us a clue:

This is often caused by a leftover end tag from an element that was
removed during editing, or by an implicitly closed element (if you have
an error related to an element being used where it is not allowed, this
is almost certainly the case). In the latter case this error will
disappear as soon as you fix the original problem.

Div tags are not allowed inside of P tags. When the validator sees the
opening Div tag, the P tag is implicitly closed, so when it encounters
the closing /p tag, the paragraph is no longer open.

Quoted text here. Click to load it

Yes. You can put nearly anything inside of a div.

Re: Question about

On 11/17/10 4:05 PM, Scott Bryce wrote:
Quoted text here. Click to load it

Effectively you can have block elements within some block elements.
However, that is limited by the type of containing element.  Thus, you
can define a block with <div> and then have <p> blocks within it; but a
<p> element cannot have any kind of block element within it.

I create text sidebars in some of my Web pages with the following (for a
right-hand sidebar and with the optional </p> tags omitted per HTML 4.01):

<div class=sideright>

where sideright is defined in a CSS file to create a box floated to the
right with white background color (not the pale green of the main page)
and a thin line border.


David E. Ross
< .

Anyone who thinks government owns a monopoly on inefficient, obstructive
bureaucracy has obviously never worked for a large corporation.
1997 by David E. Ross

Re: Question about

On 11/17/2010 08:41 PM, MikeB wrote:
Quoted text here. Click to load it

Try reading the manual. lol
I am sure I saw it somewhere in the spec... div can contain anything,
but p is a block level that is only allowed to contain inline elements.
Correct me if I am wrong, anyone. Greetings.

Re: Question about

Quoted text here. Click to load it

"The P element represents a paragraph. It cannot contain
block-level elements"


Re: Question about

MikeB wrote:

Quoted text here. Click to load it

I would find a new instructor!

   -Could. Not. Resist.

Re: Question about

On Wed, 17 Nov 2010, MikeB wrote:

Quoted text here. Click to load it /

In memoriam Alan J. Flavell /

Re: Question about

On Wed, 17 Nov 2010 17:41:33 -0600, MikeB wrote:

Quoted text here. Click to load it

Almost impossible for me to understand.

Quoted text here. Click to load it

Some symmetry here. (:-)


Re: Question about

Quoted text here. Click to load it

You've got two issues here: nesting, and the inclusion / exclusion of
elements. You should probably take the time to understand both.

Also your instructor has made either a slip of the keyboard, or
they're seriously clueless and shouldn't be teaching HTML. Given the
usual state of things, I'd suspect the latter. Almost all HTML texts
and tutorials are garbage, wrong and misleading.

HTML is an application for doing hypertext, based on a generalised
markup language called SGML. SGML is complicated, very poorly
understood and isn't used much, apart from HTML.

To address this problem, in the 1990s something called XML was
invented. This is largely a cut-down SGML, with two differences.
Firstly, many optional features in SGML became mandatory in XML
(strictly features that were optional in SGML and could have been
required by some applications were made rigid across the entire XML
format). These include case-sensitivity, always quoting attributes,
always closing elements, nesting behaviour.

Secondly it's a characteristic of SGML that its documents can't be
parsed unless the reader has access to the doctype (aka DTD) that
describes their tags. HTML is defined by this DTD and the W3C spec
that goes with it. With XML though, because the optional features
always have a known behaviour, it's possible to parse a document
without needing access to its DTD.

XHTML is the reformulation of HTML in XML, with no other changes other
than those required to make it compatible. However (for complicated
external reasons that are only of historical interest) XHTML never
really happened and is best ignored today. You want to know HTML, you
should learn XML because it's easy (easier than HTML) and its
ubiquitous, you should learn just the bare minimum of SGML to
understand the HTML issues.

Now how does this relate to your HTML question?

Well, if we were using XML (XHTML or not), the nesting would have to
be simply nested, or else the document is "not well-formed" (broken at
the syntactic level of XML). So
    <div> <p> Some content </p> </div>

would be well-formed, as would
    <p> <div> Some content </div> </p>

    <div> <p> Some content </div> </p>
fails and isn't well-formed, because the nesting of the elements
marked by the start and end tags is overlapping.

Now if this fragment is attached to the DTD for a particular
application, such as HTML, we now have <div> and <p> tags defined and
we also define nesting rules for them. <div> can contain <p> (or
contain another <div>), but <p> cannot contain <div>.  If this is
broken, we say the document is "invalid".

    <p> <div> Some content </div> </p>
is invalid, as it tries to put <div> inside a <p>.  Note that it's
still well-formed though.

In XML, this is all pretty easy. You _must_ use the </p> (not well-
formed to leave it dangling without). It's also obvious to then see
what is nested within what, and the rules for checking this are fairly
plainly stated.

In SGML (and thus in HTML) it's harder. There's no requirement to use
the end tags, because SGML parsers "know" what is permitted where, and
can thus infer where an element ends. They achieve this by being more
complex than XML parsers, and also by using the knowledge of permitted
document structure that they gain from their access to the DTD.
Overall, this makes it a nightmare for human editors, particularly for
understanding error messages from validators.  A validator rarely
describes the error or even where the error occurred: instead it
describes some point _after_ the error, at which the document (when
the parser tries to make sense of it, error and all) became
"obviously" no longer valid.

In your case,
<p> <div> Some content </div>
is (in HTML) both well-formed and also (surprisingly) valid too.

_Why_ might be clearer if I tell you that it's equivalent to this
<p> </p><div> Some content </div>

Rather that nesting <div> inside <p> (forbidden by the DTD), the
parser infers (quite wrongly) that you must have meant to have a <p>
and a <div> element following each other, and not nested at all. As
your <p> can't possibly (or validly) contain a <div>, that <div> is
seen as meaning that the <p> must terminate there before the <div>

Back to your example:
<p> <div> Some content </div></p>

is still well-formed and valid only up to that </p> end tag.  At which
point well-formedness fails, because it encounters an end tag to an
element that wasn't open and had a missing start tag. The <p> start
tag (which you and I can see, but most validators can't) was before
the <div>, but found itself closed implicitly.

So not only is the fragment not valid (nesting is inside out), but the
validator actually reports a different error, from a different

...and that, gentlemen of the jury, is which SGML is insufferable.

Quoted text here. Click to load it

Good stuff to read:

* Head First HTML with XHTML & CSS  (Best tutorial I know)

* Elizabeth Castro's HTML books  (Long in the tooth now, but Not
Wrong, which is more than most HTML guides manage)

* HTMLDog website, the only on-line tutorial worth looking at.

* W3C specs. Hard going and definitely not a tutorial, but they (and
the DTD) are the canonical source for this stuff, so you have to.

* c.i.w.a.h   Here. Moribund, but still the smartest public group

Avoid other sites, unless recommended here.

Definitely avoid w3cschools, as it's riddled with errors.

Site Timeline