Chapter 29 | span
, br
, wbr
, and u
In this chapter we conclude our look at text-level semantics. The elements we wil cover are, span
, br
, wbr
, and u
.
span
You can think of the span
element as the inline cousin of the div
element. By itself, it does not represent anything but is a general purpose container. One common use for the span
element is to wrap a specific piece of text that we wish to hide visually but, still have available for users of assistive technologies, for example, screen readers.
|
|
If you look at the example below you will notice that you can see the Twitter icon and that it is clickable but, you do not see the text that is inside the hyperlink element. If a screen reader focuses on this element, however, the screen reader software will read aloud the content of the hyperlink.
For example, VoicerOver on macOS will say, “link, Go to Twitter.com”.
Live Codepen - Using the span element with CSS to visually hide text
Another use case is to apply a specific font, style, and color to certain words or phrases for branding purposes. For example, let’s take the word “screenAML”.
|
|
Live Codepen - Custom font style using span and CSS
br
The br
element represents a line break. This element should only be used if it is actually part of the content. For example when marking up poems.
|
|
The line break element is a self-closing element and does not itself contain any content.
Live Codepen - Using the line break element
wbr
Unlike the line break element, the wbr
element indicates a break opportunity. This is best explained through an example.
|
|
When looking at the example below you will notice that while in the first paragraph the word “supercalifragilisticexpialidocious” does not break but drops to its own line, in the second paragraph, it breaks at the break opportunities we provided using the wbr
element.
Live Codepen - Using the wbr element
u
(Unarticulated Annotation element)
While the u
element is rendered as an underline by default, this is not a general-purpose element used to add underlines to a span of text. It is commonly used to indicate a proper name in Chinese text or, to indicate a misspelled word. For example:
|
|
NOTE: Because the
u
element is rendered with an underline, it can create confusion with hyperlinks and so, care is to be taken when using this element so as to avoid confusion.
Live Codepen - Using the u
element
That’s a wrap for text-level semantics. Before we end this section and move onto embedded content, there are a few link types that we have not yet covered. Hard to believe I know 😀 🙃 So in closing, let’s take a look at these.
bookmark
This value can be used with the anchor and area
elements. The value of the href
, when used with the bookmark
keyword, is intended to provide a permalink for its closets article
ancestor element. Permalinks are generally also easy to type and remember, for example:
|
|
In the above example, the first link’s closest ancestor article
element is the blog post extract and so, the bookmark indicates that the value of the href
for this link is a permalink to the full post. The second link’s closest article
element ancestor is the comment made by Sally and so, the value of the href
attribute here is a permalink to the comment.
If there is no ancestor article
elements or other sectioning content such as a div
element for example, the hyperlink refers to the nearest heading sibling or ancestor. User agents do not afford bookmark type hyperlinks any special UI treatment and is mainly a form of metadata, to be used by scripts, or for styling purposes.
help
As the name suggests this is used to indicate that the hyperlink points to help text. As with the bookmark keyword, when the help keyword is used with the a
or area
element, it represents context-sensitive help for its nearest parent element.
|
|
A user agent could show a different cursor when a user hovers over a hyperlink but, you could also use it as a hook for CSS and add your own icon or change the cursor as can be seen in the below example.
Live Codepen - Styling elements using the rel="help"
attribute
When used with the link
element, the referenced document points to a help document for the page as a whole.
|
|
license
This keyword is used to indicate that the referenced document contains information about the license terms under which the content is provided. Unlike the previous elements, the specification does not distinguish between what is the main content and what is not so, it is up to the author to make this clear.
|
|
This can also be used with the link
element as follows:
|
|
manifest
This keyword is only used with the link
element and is used for installable web applications, also known as progressive web apps. This keyword indicates that the file referenced is a manifest file that contains metadata about the web application.
|
|
nofollow
The keyword has two main use cases. The first is to indicate that the publisher of the page does not endorse the link and as such, is commonly used on links in user-generated content such as comments. The second use case is to indicate that the link has been added purely for commercial purposes such as affiliate links. Generally, search engines will also not follow these links when crawling and indexing your site.
|
|
opener
This keyword is effectively the opposite of the noopener
keyword I discussed before. So, instead of revoking access you are explicitly giving access to the opener. This creates what is also known as an auxiliary browsing context.
|
|
tag
While it might seem obvious, the tag keyword is not meant to be used on tag clouds such as those commonly found on blogs for example. Instead, this is used to link to a resource that provides additional information or disambiguates the tag in question. You can almost substitute the word topic in your mind in place of tag to further clarify the concept.
|
|
next
and prev
Both these keywords indicate that the current document is part of a sequence and that the hyperlink leads to either the next or previous logical page in the sequence. For example pagination on a set of tutorial pages.
|
|
When using the next keyword with the link
element the user agent should process the link as if one of the resource hints(dns-prefetch
, preconnect
, prefetch
, or prerender
) was specified. Which of these the user agent chooses to use is implementation dependant.
|
|
That then covers all of the link types. Next up embedded content. In the next chapter we will cover the picture
and source
elements.