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 ?
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.
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With