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>
8. <meta>
Proprietary meta properties are provided by some social network platforms. Facebook uses its Open Graph protocol.
<meta name=”theme-color” content=”#FFE3F5”>
<meta property=”og:image” content=”example.com/image.jpg”>
Proprietary meta properties are provided by some social network platforms. Facebook uses its Open Graph protocol.
<meta name=”theme-color” content=”#FFE3F5”>
<meta property=”og:image” content=”example.com/image.jpg”>
9. <datalist>
A <datalist> element defines options for other controls, such as an <input>.
<datalist id=”meal-type”>
<option value=”Twitter”>
<option value=”FB”>
<option value=”Insta”>
</datalist>
A <datalist> element defines options for other controls, such as an <input>.
<datalist id=”meal-type”>
<option value=”Twitter”>
<option value=”FB”>
<option value=”Insta”>
</datalist>
10. <caption>
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>How many times a scoreline occurred</caption>
[…]
</table>
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>How many times a scoreline occurred</caption>
[…]
</table>
Good luck with your HTML journey!
If you enjoyed this don't forget to follow me & retweet this thread.
if you want to get more helpful tips that sharpen your mind & help you perform better then you can join my 2-1-1 Friday newsletter.
codelifefitness.com/2-1-1/
If you enjoyed this don't forget to follow me & retweet this thread.
if you want to get more helpful tips that sharpen your mind & help you perform better then you can join my 2-1-1 Friday newsletter.
codelifefitness.com/2-1-1/
• • •
Missing some Tweet in this thread? You can try to
force a refresh
