Hot New HTML Tags, uThink1 highlight the tags you should be using

Hot New HTML Tags

Posted March 18, 2020

HTML elements are the building blocks of the web. We highlight the tags you should be using to make sure you are building your sites the correct way.

<Detail> & <Summary>

Whenever something on a page needs to be interactive, JavaScript is often the first port of call. Showing and hiding content can be as straightforward as toggling a class. But this behaviour is already available, with no added page weight, right inside HTML.

The <details> element will hide its content by default. When the user clicks the heading, it expands to reveal the content inside. It can also be given a custom heading using the <summary> element. This can all be controlled using JavaScript as well, but gives default behaviour for free.

It is supported by all major browsers apart from Internet Explorer, which will default fall back to an open state to make sure content is not lost. This can be great for an FAQ section where bulky text blocks are not instantly required.

<summary>How does this element work?</summary>

<p>Any content inside is hidden by default</p>

</details>

<Small>

This tag can distinguish supplementary information usually found in small print such as disclaimer or copyright notices. This would be used for inline content, rather than a full block-level <aside>. While it will display as smaller text by default, it should be used sparingly and not purely for stylistic purposes.

Website make we love by <small>uThink1</small>

<Output>

An <output> denotes where the result of a calculation will be displayed. For example, range sliders have no visual indication of the actual selected value and an <output> can be used to hold that value.

Any content inside <output> element is read aloud by screen readers as it changes, which is similar to an ARIA live region.

<input type=”range” id=”slider” min =”0”

Max=”1000” value=”40” />

<Code>

When writing content that should be interpreted as computer code, the <code>element will separate it from the rest if the text, By default, it is styled using a monospace font.

Code snippets that cover multiple lines should also be wrapped in a <pre> element, which preserves the whitespace within it.

To show this content use the <code>open</code> attribute.

<Template>

Most languages have some way to recreate common code. Each template stamps out copy of itself to be used as a starting point for some other use. In HTML, this task is achieved using the <template> element.

Any content inside the element is inert by default. While browser will parse what’s inside, it does not render anywhere or expose it to any selectors. It only becomes active once it is cloned

Templates are cloned using JavaScript. Running template.content.cloneNode(true) on a selected template will deeply copy all of the nodes within it. They can then be updated like any other elements. These are usually used with web components to produce an interface in shadow DOM, but can be used anywhere repeated content is needed, like a table row.

<tr>

</tr>

</template>

<WBR>

While using overflow-wrap or word-break CSS properties gives some control over line breaks, they can end up wither breaking in unsuitable places or not breaking at all. The <wbr> element hints to a browser where it could break a word up should it need to.

For example, dots in URLs could be misinterpreted as the end of a sentence. The <wbr> element can mark split points just before each dot.

https://<wbr>www<wbr>.uthink1<wbr>.com

<Data>

Sometimes there can be data that makes sense to humans, but machines can find difficult to parse. The <data> element provides a hook for them and to provide an alternative meaning with the value attribute. It can be used for any shape of data, such as product IDs or ISBNs. For data or time values, the <time> element should be used instead.

<data value=”987654345678”>Content here</data>

<Meta>

Like most elements inside the <head> of a page, the <meta> element is easy to overlook. But this one gives important information about the page to the browser and can help crawlers such as search engines get a better idea of what it contains.

A <theme-color> can be defined to update the browser UI with more continuity with a page being shown. An application-name can provide a browser with a clean name free of any application state that can be displayed using a page’s <title> element.

Proprietary meta properties are provided by some social network platforms. Facebook uses Open Graph protocol, which can also be consumed by other platforms such as LinkedIn. Twitter has developed its own Cards format, but will also fall back to Open Graph if these are unavailable. These properties help provide a rich experience on these platforms when users post to the page.

<Datalist>

While a <select> element enables users to choose from a list, it can be overwhelming and difficult to use them in order to navigate large lists with similar values.

A <datalist> element defines options for other controls, such as an <input>. By using the list attribute on that element, it can then be populated with a value from the list, much like an autocomplete function.

</datalist>

<Fieldset & Legend>

When form controls would be logically grouped, the <fieldset> element can semantically link them together. Groups of radio buttons are a perfect use-case for this particular element. A disabled attribute on a <fieldset> will disable all inputs inside it.

Any <fieldset> needs to be accompanied by a <legend>, which provides a title for that group.

<legend> Remember me?</legend>

<label><input type=“radio” name=“remember” value=“no” /> No </label

</fieldset>

<Caption>

Tables can be packed with information, but without a description the values inside may not be clear. Surrounding text may’ve some context, but a caption makes it explicit.

The <caption> element should be the first inside the <table> it describes. By default, it appears above the table, but it can be adjusted using the caption-side CSS property.

<table>

<caption>Content Here</caption>

[…]

</table>

<Track>

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 attributes is a file in either a WebVTT or TML forma. 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 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.

<track default kind =“captions” src=“cc.vtt”

Srclang=“en” />

</video>

<Sub> & <Sup>

Text displayed as subscript or superscript, such as atoms in chemical formulas or exponents in mathematical formulas, can indivdually 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>

<Address>

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.

Email: <a href=“mailto:[email protected]”>[email protected]</a>

Facebook: <a href=“https://facebook.com/uthink1”>Facebook</a>

</address>

<Map> & <Area>

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 use map attribute. Each <area> inside a <map> defines a place the user can click.

</map>

<Video>

The <video> elements was the standout addition to arrive in HTML5. This, with its <audio> equivalent, powers virtually all of the media on the web today.

It can either have a src attribute that defines the content to play, or a set of <source> elements within it that the browser can choose from. It will decide what source to play based on the order they are provided. We can choose to serve higher quality videos to those with higher density screens, or less dynamic content for those who prefer reduced motion.

Some browsers are experimenting with displaying videos in a small, floating window on the screen while the tab is not active. This can be enabled using the autopictureinpicture attribute. It can also be explicit disabled using disablepictureinpicture.

Similarly, content can be shared to a remote device like a Chromecast or Apple TV if the browser supports it. This can be controlled using JavaScript, or completely disabled with the disableremoteplyback attribute.

<video>

</video>

<Cite>

While the cite attribute on <q> and <blockquote> elements can be useful metadata, the <cite> element itself is used when want to show the cited source to the user.

A <cite> element should only contain the name of the cited work, such as book or play. It should not include the names of anyone involved in its creation.

<cite>uThink</cite>

<Picture>

Modern devices come with screens in a range of sizes, aspect ratios and pixel densities. By supplying only small or only large images, users are getting lower quality experience either by receiving -low-resolution imagery or by having the page load slower.

The <picture> element enables us to define different sources for the same image, depending on multiple factors such as screen width, device orientation or support for a specific format such as WebP. All that is required is setting the appropriate media query for each defined <source> with a <srcset> attribute.

For example, users navigating using dark mode can be provided with a darker image by using the prefers-color-scheme: dark media query.

This then gives us specific control over what image to show when. The similar srcset attribute on the <img> elemnets gives the browser more freedom over which source to choose. Use the<picture> element for deliberate art direction, such as simplifying a diagram for smaller screens.

<source

srcset=”images/2x-landscape.jpg 2x, images/1x-landscape.jpg 1x”

Media=”(min-width: 50rem)”

</picture>

<Dfn>

By wrapping a word or phrase in the <dfn> element, it indicates that this is the term being defined. When it’s placed inside a <p>, <dl> or <section> the content surrounding it is treated as the definition. An id attribute can be used to link back to it whenever it next appears in the page.

<p>

<dfn>Semantic markup</dfn> is HTML that provides meaning to content as well as presentation.

</p>

<Q> & <Blockquoote>

A <q> element is an inline element designed to contain a quote from someone or something. User agent styles will wrap its content in quote marks automatically. It has an optional cite attribute that can be link back to the original source.

The <blockquote> element performs the same role but for longer, block-level quotes.

Stephen describes HTML as the <q>unifying language of the World Wide Web</q>

It has an optional ‘cite’ attribute that can be a link back to the original source.

</blockquote>

<Var>

In technical writing, variables are a common occurrence. In order to avoid confusion with the rest of the words in a sentence, the <var> element can be used to separate and style these separately. For larger expressions, MathML may be a more suitable approach. But <var> can be useful when referring to parts of a larger expression as part of a sentence.

Using Pythagoras’ theorem, the squares of sides <var>a</var> and <var>b</var> give the square of the hypotenuse <var>c</var>.

<Figure> and <Figcaption>

Blocks of text can often have content such as a diagram, chart or image referenced within it. While it may be related, it’s not required to understand the context. For this sort of content, the <figure> element is the perfect choice.

As a rule of thumb, any related content that would be self-contained are good candidates as they can be consumed separately from the main document flow. They will likely be referenced by a number in a larger block of text.

A <figcaption> element can be used to provide a description to the contents. Using this provide a description to the contents. Using this provides a semantic link and makes sure that the description does not form part of the figure itself.

If the content is tangentially related to the main document, such as a pullquote, then an <aside> element may be better suited.

<img alt=”Chartt showing a spike in React-based projects”

Src=”framework-usage.png” />

<figcaption>JavaScript framework statistics 2010-2020</figcaption>

</figure>

<Menu>

This element should contain a list of different actions that a user can perform. For example, this would be used when selecting paint brushes in a painting application. Think of this as the interactive equivalent to the <ul> element. Previously, the type attribute would affect how the menu behaves. The context type would have enabled items to be added to the context – or ‘right-click’ – menu, but this has since been removed from the specification. Right now, the default and only type available is toolbar, which is used to display these elements on screen.

By default, this element has no styling and is used purely to provide meaning to the set of actions. Currently, only Firefox respects its semantics, but there is no harm adding this element now for when there is wider support.

<menu>

<li><button>Round</button></li>

</menu>

<Del> & <Ins>

When displaying changes to a block of text it can be useful to be able to visually see what changed. The <del> element shows what was removed and <ins> what replaced it. Both can have cite and datetime attributes, which define why and when this change occurred.

Despite negative press <del> covfefe</del><ins>coverage</ins>

<Input>

While the <input> element may be one of the oldest tricks up its sleeve. Even today, many websites still do not use them to their fullest potential. The type attribute on an input can change its behaviour dramatically. For instance, color will display a colour picker to the user without the need for extra JavaScript. A range will render a slider to pick between two values instead of requiring a specific value to be entered. A date input shows a localised date picker without any extra overhead. While these have wide browser support, those that don’t will show a regular text input and can then be provided with a fall-back experience.

These all automatically validate their content in a way that makes sense for that particular input. For extra checks, the pattern attribute can accept a regular expression that the entered value needs to pass in order to submit.

<input name=”username” pattern=”[a-z]{5,10}”

Title=”Between 5 and 10 lowercase characters”>

<Dialog>

Showing content in a separate, highlighted windows is a popular pattern on the web. There are commonly known as ‘modals,’ but the <dialog> element covers more use-cases such as alerts.

On its own, a <dialog> element will not be visible. It will not show up with the open attribute applied, when it is displayed above the rest if the page content automatically. Its accompanying JavaScript API enables dialogs to be opened with the showModal method, which then gives it a ::backdrop pseudo-element. This can then be styled to dim the content behind it.

Currently only Chrome, Edge and Samsung Internet browsers are supported. For those that lack support, dialogs will render like any other container and can be polyfilled to act the same.

<p>HTML-powered dialog box</p>

</dialog>

<KBD>

When providing keyboard instructions, such as shortcuts or search inputs, we need to differentiate the key names with rest of the surrounding text. The <kbd> element is specifically applied for this purpose.

<kbd> elements can be nested where necessary such as combination shortcut.

Close this window by pressing <kbd>Esc</kbd>

<Meter>

For numeric data that has a defined range, the <meter> element can provide a visual indication of what that data means in context. The browser can conditionally style the element to warn of overlay high or low values. A<meter> should not be used to denote progression. For that, the <progress> element it better suited.

<Time>

While a specific date or time in a sentence may be obvious in context, machines parsing that content might not understand. The <time> element separates a date or time from the rest of the sentence and can provide a dateime attribute that shows the date in a format that is easier for machine to parse.

GenerateJS is happening on the <time datetime=”2020-04-02” 2^nd April </time>

<DL>,<DT> & <DD>

A description list <dl> groups a set of terms and their descriptions. It is used for sets of key-value pairs such as a glossary.

Each term is contained within a <dt> element, followed by a description and vice-versa. The order is the only thing that matters.

<dl>

<dt>Element</dt>

<dd>Start tag, contents, and an end tag</dd>

</dl>