{"id":1418,"date":"2023-09-07T05:00:00","date_gmt":"2023-09-07T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1418"},"modified":"2023-09-05T15:19:34","modified_gmt":"2023-09-05T22:19:34","slug":"hidden-gems-of-html","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/hidden-gems-of-html\/","title":{"rendered":"Hidden gems of HTML"},"content":{"rendered":"\n

As front-end developers, we have been used to frameworks and libraries that enhance HTML, CSS, and Javascript. We adopt component libraries or individual third-party components from NPM as if participating in an all-you-can-eat buffet. However, this will break our apps in the future if we’re not careful<\/a>.<\/p>\n\n\n\n

In this newsletter, we’ve covered that dialogs can be created in simple HTML<\/a>. Yet, many more “hidden” gems in HTML are worth knowing about. Here are a few examples:<\/p>\n\n\n\n

Details and summary<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

The above HTML code displays the following collapsible element:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Of course, the entire thing can be customized with CSS. It’s just HTML, after all:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Abbreviations<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Abbreviations are everywhere in our world, so providing accessible definitions is a must, and the abbr<\/code> tag does precisely that:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Meter<\/h2>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

What about a native fancy progress bar with different colors for different thresholds? meter<\/code> does exactly that:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Always remember that HTML is excellent because, unlike third-party libraries, these elements do not increase the size of your app. Their code does not have to be packaged, downloaded, and then interpreted. You don’t have to run npm update<\/code> on them. They’re free and won’t break your app.<\/p>\n\n\n\n

You can see all these examples in action on Stackblitz<\/a>. And for even more cool HTML\/CSS tricks, check out this other post of mine: 5 new HTML\/CSS features you didn’t know about<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

As front-end developers, we have been used to frameworks and libraries that enhance HTML, CSS, and Javascript. We adopt component libraries or individual third-party components from NPM as if participating in an all-you-can-eat buffet. However, this will break our apps in the future if we’re not careful. In this newsletter, we’ve covered that dialogs can […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-1418","post","type-post","status-publish","format-standard","hentry","category-html"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1418"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1418\/revisions"}],"predecessor-version":[{"id":1429,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1418\/revisions\/1429"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}