The basic semantic HTML tags such as <header>, <footer> and <nav> are almost self explanatory.
But, there are a host of newer HTML tags that you need to be using as well.
Eight HTML tags that you should be using.
1. <picture>
This tag is similar to <img>, the <picture> element provides flexibility by allowing multiple <source> elements for the same resource, which can adapt based on a media query or image type support.
2. <datalist>
It provides an autocomplete interface for <input> elements. Each list contains a set of <option> elements that have an associated value. When linked to an <input> using the “list” attribute, it can provide a drop-down list.
3. <dl>
This tag, element serves as a container for groups of defined terms.
Inside, each term (<dt>) and definition (<dd>) are grouped together to form a glossary-like structure. While it applies basic formatting by default, semantic HTML benefits screen readers.
4. <details>
Accordions are a common design pattern when lots of data need to be shown at once, such as question page. By using the <details> element alongside <summary>, we can achieve the same effect without JavaScript. Clicking the summary will toggle the rest of the content.
5. <dfn>
Complex terms or abbreviations often need defining for those that are not familiar.
A term wrapped in a <dfn> tag will be defined by the text that surrounds it. This is an inline element and is designed to be used to highlight definitions in human language.
6. <figure>
A figure is defined as a unit of content that often appears in the main flow of a document but can be also interpreted separately.
The <figure> element wraps an image or other reference content and can also include a description of its contents with <figcaption>.
7. <code>
it can be useful to visually separate computer code from the rest of the sentence.
By wrapping each occurrence in a <code> tag, the browser can apply some default formatting to display it more appropriately.
Combine with <pre> for larger code blocks.
8. <time>
We can write time values differently depending on the context or the language.
By marking these values with the <time> tag, search engines and other automated tooling can quickly extract this information.
Next Month I will complete 10 years as a software dev.
"Why Stay Fit Physically and Mentally As a Coder"
A Thread... 🧵
In this marathon, there are lots of ups & downs I see, the biggest mistake was to avoid my health until 2018.
I worked hard to stay relevant & stay long hours, but the problem for me was, that I have felt exhausted mentally and physically at every end of the day.
In early 2018 I get the sense that I am doing something wrong with my life and it cannot go on like this anymore.
As a coder what we do when things go wrong in the codebase.
"REFACTORING" so I challenged myself to do refactoring of my mental & physical health.