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.
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.
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>.
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.
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.
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.
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.
How to grow as a software engineer (developer) in 2021.
A thread...
If you are interested in pursuing a career in development and don't know where to start, here's your go-to guide for salaries, skills, and the best programming languages to learn.
Software development is a dynamic field & getting started the right way as a developer is tough.
-Getting a diploma
-Getting a degree
-Finishing a boot camp
Does not mean the end of studying.
In reality, you are just getting started. While your official studies are over, it does not mean that you do not need to learn new tricks anymore.