问题
Question: Should I avoid using <br/> to break lines in favor of wrapping content in <p></p>? When is it OK to use <br/> (if ever)?
They both work fine in what I would call typical desktop browsers, but does one or the other work better with accessibility features and mobile devices?
What is the current recommended best practice? (It seems to be a moving target.)
For example, when doing stuff like this:
Using <br/> to separate label from input
<label for="txtUsername">Username</label><br/>
<input type="text" id="txtUsername" autocomplete="off" maxlength="50" spellcheck="false"/>Using <p></p> to separate label from input
<p><label for="txtUsername">Username</label></p>
<p><input type="text" id="txtUsername" autocomplete="off" maxlength="50" spellcheck="false"/></p>I've searched around a bit and there doesn't seem to be a 100% consensus on this, thought I would hit up the wonderful SO community.. Thanks!
回答1:
In HTML5, the br element must only be used if the line break is "actually part of the content". Typical examples where br is appropriate: in postal addresses and in poems.
As the line break in your example is not meaningful (it seems to be needed only for layout reasons; see also the example below), you must not use br. You should use CSS instead (display:block).
The div element typically comes with this CSS declaration by default, and using it (or more specific elements, like p, if appropriate) allows user-agents without CSS support (e.g., text browsers) to display the content in a more comprehensible manner (they’d typically also display line breaks if a so-called "block-level" element is used).
The spec explicitly mentions a similar case in an example:
The following examples are non-conforming, as they abuse the
brelement:[…]
<p><label>Name: <input name="name"></label><br> <label>Address: <input name="address"></label></p>
回答2:
Determining the visual layout of elements on the page is generally done in CSS, and it's best to separate concerns where possible. So to put the label tag on a seperate line from the input tag would be accomplished through CSS, e.g. by setting label to display:block.
回答3:
If your intent is truly
to get up to speed with best practices and standards
then I would suggest becoming familiar with the constructs set forth in HTML5. If you are trying to utilize the constructs of HTML5 you would try to avoid using the <br> tag, and instead arrange your content within semantic markup and format the content using CSS.
回答4:
The p-tag stands for paragraph. And content in one paragraph should always be independent from that in another. This by the way is also visualized by most browsers with a bigger space / an empty line between two p-tags.
Therefor, if you don't want to use css (which would be my first choice) - use br.
However if you actually want content to be separated, please don't do something like this (which unfortunately is very common):
Some example text.<br/><br/>
Even more example text.Here you really would use p-tags:
<p>Some example text.</p>
<p>Even more example text.</p>来源：https://stackoverflow.com/questions/27321681/using-br-versus-p-p-versus-css-for-form-fields-what-is-the-current-accep