Databases
StackOverflow2013
Postsdbo
POIs the <wbr> element semantic HTML? What about in a microdata context?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs the <wbr> element semantic HTML? What about in a microdata context?
    text
    copied!<p>In short, this is bad web development and UX:</p> <p><img src="https://i.stack.imgur.com/a990r.png" alt="enter image description here"></p> <p>But solving it by using CSS3 word breaking <a href="http://jsbin.com/uripod/5/edit" rel="nofollow noreferrer">(code &amp; demo)</a> can lead to an 'awkward whitespace' situation, and strange cut-offs — here's an example of both:</p> <p><img src="https://i.stack.imgur.com/ol0dh.png" alt="enter image description here"></p> <p>Maybe it's not such a big deal, and the <a href="https://ux.stackexchange.com/questions/31764/hyphenating-urls-and-email-addresses-that-would-overflow-their-container">UX perspective of it is here</a>, but let's look at the semantics of <a href="https://ux.stackexchange.com/a/31767/21154">one of the solutions</a>:</p> <blockquote> <p>You could ... use the <code>&lt;wbr&gt;</code> element to indicate an optional word break opportunity. This will tell the browser to insert a line break as necessary to flow onto a new line inside the container.</p> </blockquote> <p>The first question: is using <code>&lt;wbr&gt;</code> semantic HTML? (Does it at least degrade gracefully?)</p> <p><br></p> <p>In either case, it seems that being un-semantic in the general sense is a small price to pay for good UX functionality.</p> <p>However, the second quesiton is about the big picture: </p> <p>Are there any <a href="http://schema.org" rel="nofollow noreferrer">schema.org</a> (microdata/RFDa) ramifications to consider when using <code>&lt;wbr&gt;</code> to split up an email address? <strong>Will it still be valid there?</strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload