net - UK (2020-05)

(Antfer) #1
Text displayed as subscript or superscript, such as
atoms in chemical formulas or exponents in
mathematical formulas, can individually be styled in
CSS. To keep their semantic meaning, however, we can
use the <sub> and <sup> elements respectively.
These should not be used purely for stylistic reasons. In those
cases, CSS is the right approach.

H<sub>2</sub>O
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

Image maps enable different parts of an image to be
clickable links. While these are not a new design
pattern, they are still useful for creating interactions
that would be difficult through text, such as a map.
A <map> takes a name attribute, which links it to an
<img> element somewhere else with a usemap attribute. Each
<area> inside a <map> defines a place the user can click.

<map name=”london”>
<area shape=”circle” coords=”200,75,50” href=”westminster.html”
alt=”Westminster”>
</map>
<img usemap=”#london” src=”map.png” alt=”Map of London” />

Many websites provide contact information in order to
locate the business or contact an author. The <address>
element should be used to wrap all this information to
make it easier for automated tools to pick it up.
It refers to the author of the website, but can also refer
to the author of an article if placed within an <article> element.

<address>
Email: <a href=”mailto:[email protected]”>netmag@futurenet.
com</a>
Twitter: <a href=”https://www.twitter.com/netmag</a>@netmag</
a>
</address>

<track> elements
can be read by
JavaScript and
displayed in creative
ways in sync with
the <video>

Similar to <source> the <track> element
provides extra context that the browser
can use to enhance the behaviour of the
<video> or <audio> elements. In this case,
it is data that is wholly dependent on the
current time of the content being played, such as
subtitles.
Their src attribute is a file in either a WebVTT
or TTML format. Both provide a timestamp called
a ‘cue’ and some kind of associated data. This is
often text, but can also be objects or even HTML.
Dependent on the type, this can then be
displayed on top of a <video> element by the
browser. The subtitle captions type is for text
descriptions of what’s happening. This provides
an immediate benefit for those that are hard of
hearing or choose to have the sound muted.
They can also provide supplementary
information such as metadata or chapter
markers. Users can then use this information to
more easily navigate media, while search engines
can use it to index content.

<video src=”video.mp4”>
<track default kind=”captions” src=”cc.vtt”
srclang=”en” />
</video>

FEATURES
Hot new HTML tags

Free download pdf