While using overflow-wrap or word-break CSS
properties gives some control over line
breaks, they can end up either 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>.creativebloq<wbr>.com/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 a 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.<template>
<tr>
<td><!-- Name --></td>
<td><!-- Email address --></td>
</tr>
</template>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 date or time values, the
<time> element should be used instead.<data value=”9781484254516”>Practical Web Inclusion
and Accessibility</data>Use Open Graph meta
properties to provide
contextual information
when someone wants to
share the pageLike 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 the 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 its 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.<meta name=”theme-color” content=”#FFE3F5”>
<meta property=”og:image” content=”http://example.com/image.jpg”>FEATURES
Hot new HTML tags