semantic-webword-wrapsemantic-markupmicrodatawbr

Is the <wbr> element semantic HTML? What about in a microdata context?


In short, this is bad web development and UX:

enter image description here

But solving it by using CSS3 word breaking (code & demo) can lead to an 'awkward whitespace' situation, and strange cut-offs — here's an example of both:

enter image description here

Maybe it's not such a big deal, and the UX perspective of it is here, but let's look at the semantics of one of the solutions:

You could ... use the <wbr> 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.

The first question: is using <wbr> semantic HTML? (Does it at least degrade gracefully?)


In either case, it seems that being un-semantic in the general sense is a small price to pay for good UX functionality.

However, the second quesiton is about the big picture:

Are there any schema.org (microdata/RFDa) ramifications to consider when using <wbr> to split up an email address? Will it still be valid there?


Solution

  • The wbr element is defined in the HTML5 spec. So it's fine to use it. If it's used right (= according to the definition in the spec), you may call it also "semantic use".

    I don't think that there would be any problems in combination with micordata/RDFa. Usually you'd provide the URL in an attribute anyway, which can't contain wbr elements of course: <a href="mailto:foo@example.com">foo<wbr>@example<wbr>.com</a>.

    For element content I'd guess (didn't check though) that microdata/RDFa parsers should use the text content without markup resp. understand what is markup and what is text, otherwise e.g. a FOAF name would be <abbr>Dr.</abbr> Foo instead of Dr. Foo.

    So you can bet that microdata/RDFa parsers know HTML ;), and therefor it shouldn't be a problem to use its elements.