Read on Twitter
10 Hot HTML tags to use right now.
A Thread...
A Thread...
HTML elements are the building blocks of the web, and there are tons of different HTML tags out there to choose from, so how do you ensure you're using the right ones?
Let me highlight the tags you should be using to build your sites the correct way.
Let me highlight the tags you should be using to build your sites the correct way.
1. <details> and <summary>
Whenever something on a page needs to be interactive, JS is often the first port of call. Showing & hiding content can be as straightforward as toggling a class.
But this behavior is already available, with no added page weight, right inside HTML.
Whenever something on a page needs to be interactive, JS is often the first port of call. Showing & hiding content can be as straightforward as toggling a class.
But this behavior is already available, with no added page weight, right inside HTML.
2. <small>
This tag can distinguish supplementary information usually found in small print such as disclaimers or copyright notices.
This would be used for inline content, rather than a full block-level <aside>.
This tag can distinguish supplementary information usually found in small print such as disclaimers or copyright notices.
This would be used for inline content, rather than a full block-level <aside>.
3. <output>
An <output> denotes where the result of a calculation will be displayed.
Any content inside an <output> element is read aloud by screen readers as it changes.
<input type=”range” id=”slider” min=”0” max=”100” value=”40” />
<output for=”slider”>40</output>
An <output> denotes where the result of a calculation will be displayed.
Any content inside an <output> element is read aloud by screen readers as it changes.
<input type=”range” id=”slider” min=”0” max=”100” value=”40” />
<output for=”slider”>40</output>
4. <code>
When writing content that should be interpreted as computer code, the <code> element will separate it from the rest of the text. By default, it is styled using a monospace font.
The content can be shown by providing the <code>open</code> attribute.
When writing content that should be interpreted as computer code, the <code> element will separate it from the rest of the text. By default, it is styled using a monospace font.
The content can be shown by providing the <code>open</code> attribute.
5. <template>
Most languages have some way to recreate common code.
In HTML, this task is achieved using the <template> element.
<template>
<tr>
<td><!-- Name --></td>
<td><!-- Email address --></td>
</tr>
</template>
Most languages have some way to recreate common code.
In HTML, this task is achieved using the <template> element.
<template>
<tr>
<td><!-- Name --></td>
<td><!-- Email address --></td>
</tr>
</template>
6. <wbr>
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.
https://<wbr>www<wbr>.theankurtyagi<wbr>.com/
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.
https://<wbr>www<wbr>.theankurtyagi<wbr>.com/
7. <data>
Sometimes there can be data that makes sense to humans, but machines can find it difficult to parse. The <data> element provides a hook for them and provide an alternative meaning with the value attribute.
<data value=”9781484254516”>Web Inclusion Accessibility</data>
Sometimes there can be data that makes sense to humans, but machines can find it difficult to parse. The <data> element provides a hook for them and provide an alternative meaning with the value attribute.
<data value=”9781484254516”>Web Inclusion Accessibility</data>
