Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it wrong to use paragraph tags for html for inputs?

Tags:

html

So far I mostly put labels and inputs inside a dedicated paragraph tag :


<p>
    <label for="myInput">Blah</label>
    <input type="text" ... />
</p>

But this tag is made for text paragraph. Is is semantically right to use it this way ? Should a div be used ?

like image 468
Raphaël Lemaire Avatar asked Jan 19 '10 14:01

Raphaël Lemaire


People also ask

Should I use label for input?

Input fields without accompanying labels can lead to accessibility issues for those who rely on screen readers. If a screen reader comes across an input field without a label it will try to find some accompanying text to use as the label.

Why do we use paragraph tag in HTML?

Definition and Usage. The <p> tag defines a paragraph. Browsers automatically add a single blank line before and after each <p> element. Tip: Use CSS to style paragraphs.

Is label necessary for input HTML?

Not all inputs need labels An input with a type="submit" or type="button" does not need a label — the value attribute acts as the accessible label text instead. An input with type="hidden" is also fine without a label.

Can you have a paragraph inside a paragraph HTML?

No, a paragraph element may not contain other block elements. A paragraph tag is intended for a block of text. If your elements is a part of the text (and not block elements), it would be semantically correct, otherwise not. A span tag with display:block is still a block element.


2 Answers

Semantically, no, it is not correct. Your form inputs are not paragraphs in any sense of the word.

If you're a CSS expert, try using <ol> and <li> tags and restyling them to look how you like, since your form fields are an ordered list of items. See A List Apart's article on Prettier Accessible Forms for an example of the HTML and CSS necessary for this format.

like image 155
Matchu Avatar answered Sep 30 '22 21:09

Matchu


You seem to have nearly answered your first question, in that it is semantically not a paragraph, so the use of <p> is -to me- wrong.

The second question of whether or not to use a <div> depends on your useage, but I don't see why not, other than the increasingly bulky code, though that'll probably not add much weight to the page.

My own tendency is to nest the <input /> within the <label> tag, though this is, again, semantically incorrect since the input is not a part of the label, being only its counterpart.

Of course, both ways work and produce much the same visual effect; I've never used an alternative -speech-converter or such- to a GUI browser, so I can't say if it adds weirdness for disabled users.

like image 39
David Thomas Avatar answered Sep 30 '22 20:09

David Thomas