Re: Using <p> elements purely as containers of phrasing elements? Semantic or not?

Ian,

Just to clarify -- the *p* element is separating the phrasing content in
the *specific* example you pointed out, rather than grouping it.  After
all, the radio buttons in the example are related.  Most of the time, the *p
* element should be used for grouping, not separation.

I do believe that the example would make more sense without the paragraph
elements.  Hopefully, the example will get modified in the next versions of
the latest draft.

--Xaxio


On Wed, May 8, 2013 at 4:20 AM, Ian Yang <ian@invigoreight.com> wrote:

> On Wed, May 8, 2013 at 6:41 PM, Xaxio Brandish <xaxiobrandish@gmail.com>
> wrote:
> > Ian,
> >
> > In your example, the text after the input element could simply exist
> without
> > the surrounding paragraph tags.  However, I agree that using paragraph
> > elements to thematically group form controls and sections is an odd
> > decision.  Let's try to trace it back.
> >
> > HTML 5.1 [1] states that:
> >
> >> Each part of a form is considered a paragraph, and is typically
> separated
> >> from other parts using p elements.
> >
> >
> > Note that "part" in the above statement is not well-defined.  The
> section is
> > non-normative, but it is the only guide we have for why <p> would be
> used to
> > separate "parts" of a form.  Fieldsets are often part of a form, but
> since
> > fieldsets are not considered "phrasing content", they cannot be
> paragraphs
> > -- they can only contain paragraphs.  A paragraph is defined as a "run"
> of
> > phrasing content, but at no point is there a clear definition of what
> "run"
> > means in this case.  If a run is a continuous section of phrasing
> content,
> > meaning content that is not broken up by content other than phrasing
> > content, then "each part" in the above statement could *only* refer to
> the
> > entire form if it does not contain one of the following elements (the
> list
> > of flow content minus the list of phrasing content):
> >
> > address
> > article
> > aside
> > blockquote
> > details
> > dialog
> > div
> > dl
> > fieldset
> > figure
> > footer
> > form
> > h1
> > h2
> > h3
> > h4
> > h5
> > h6
> > header
> > hr
> > main
> > menu
> > nav
> > ol
> > p
> > pre
> > section
> > style (if the scoped attribute is present)
> > table
> > ul
> >
> > In HTML 4.01 [2], the examples given have the entire form content
> wrapped in
> > a paragraph element, which would seem to jive with the above postulation.
> > Note that the p element is NOT allowed to contain flow content in HTML
> 5.1,
> > so it cannot contain a fieldset as some examples in HTML 4.01 do.
> >
> > HTML 3.0 [3] states that:
> >
> >> Forms are created by placing input fields within paragraphs,
> preformatted
> >> text, lists and tables. This gives considerable flexibility in
> designing the
> >> layout of forms.
> >
> >
> > Ah ha! We can infer from this that the original purpose of using the
> > paragraph element in a form is for layout purposes, which is now in the
> > domain of CSS.
> >
> > HTML 2.0 [4] states that:
> >
> >> ...a FORM element may contain lists which contain INPUT elements. This
> >> gives considerable flexibility in designing the layout of forms.
> >
> >
> > Verified.  An example given in HTML 2.0 [5] uses both paragraph elements
> and
> > list elements to help with form design.
> >
> > So there you have it.  The reason paragraph elements are used in forms
> goes
> > back to being a design element.  However, we now have CSS that clearly
> > specifies how design applies to content, so it is no longer necessary to
> use
> > explicit p elements around related parts of a form when a label element
> will
> > suffice.  Over time, the paragraph element has taken on a different
> meaning.
> > This means that the p elements in the examples located at the link you
> gave
> > [6] serve no purpose as they are used in those examples.  The label
> element
> > alone would suffice.  The p tags do not serve to group thematically
> related
> > content in the examples -- in fact, they actually separate it.
> >
> > Knowing what we do, using the p tag for a paragraph element will only
> break
> > up runs of phrasing content into separate paragraphs.  It *may* not be
> the
> > best element to use for styling when it is necessary to contain certain
> > other elements, as is often the case with forms.  There is no way to know
> > what a form "part" is; the author must decide what a form "part" is for
> his
> > or herself.  To solve the dilemma of wanting to use a paragraph tag as a
> > textual semantic instead of a structural element, you can use one of the
> > tags in the list above that accept flow content as a grouping mechanism
> for
> > related fields and form data instead, such as fieldset, div, or section;
> > each of these can contain p elements.
> >
> > References:
> > [1]
> >
> http://www.w3.org/html/wg/drafts/html/master/forms.html#writing-a-form%27s-user-interface
> > [2] http://www.w3.org/TR/html401/interact/forms.html#idx-label
> > [3] http://www.w3.org/MarkUp/html3/forms.html
> > [4] http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8
> > [5] http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2.3
> > [6] http://www.w3.org/TR/html5/forms.html#the-fieldset-element
> >
> > --Xaxio
> >
>
> Hi Xaxio,
>
> I appreciate your deep research!
>
> It looks like using <p> to group form controls really is odd. And I
> agree with you that what it does is actually separating runs of
> phrasing content instead of grouping them. I guess I will just use
> <div>.
>
>
> Cheers,
> Ian Yang
>