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

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

Received on Wednesday, 8 May 2013 11:21:03 UTC