Some Great HTML Stuff For You– and how to use them!
Let's discuss all the elements you should be making use of today.
Are you excited
Let's get started 👇
You can check my old tweet as well on this topic 👇
HTML is more capable than ever before.
— Ankur💻🎧💪 (@TheAnkurTyagi) September 1, 2020
Some Great HTML Stuff For You– and how to use them
Here are the elements you should be making use of today.
Thread 🧵#100DaysOfCode
1- The Dialog element
Use it to 👉 display a popup or modal window without the overheads. this new semantic element is designed to denote a supplementary, interactive component that displays out of the main flow of the document.
Example:
<dialog open>
<p>Dialog Content</p>
</dialog>
2- details & summary
Use them to Show/hide content under a collapsible heading without using JS, the accordion is a common user interface pattern.
Tip: The summary tag is used in conjunction with details to specify a visible heading for the details.
Example 👇
<details open>
<summary>Heading</summary>
<p>Some extremely long content…</p>
</details>
3- picture
Use it to 👉 Respond to different viewports and serve specialized content.
The picture element allows developers to define different sources for the same image based on the attributes passed to those sources, the browser determines which image to download and use.
Tip: The picture element works "similar" to video and audio.
You set up different sources, and the first source that fits the preferences is the one being used.
Example 👇
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
4- Web Components
Use it to 👉create custom HTML tags
Building a Web Component uses three different specifications in the browser to construct, configure, and generate their inner workings.
Custom elements
Shadow DOM
HTML templates
5- input
Use it to 👉 Give instant feedback on form inputs
Even the simplest of forms need some kind of validation.
Example 👇
Colour inputs:
<input type="color" />
Number inputs:
<input type="number" min="0" max="99" />
More examples of different input types are as follows 👇
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (default value)
<input type="time">
<input type="url">
<input type="week">
6- main
This marks up the core content of the document.
In contrast to any header, footer, or navigation elements,
its content will vary from page to page.
There can only be one main element visible at any time.
Example 👇
<header>Gecko facts</header>
<main role="main">
<p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
<p>Many species of gecko have adhesive toe pads that enable them to climb walls and even windows.</p>
</main>
7- nav
It can be a site’s main navigation or a grouping of internal links such as a table of contents.
Not all links need to be inside a nav.
Example 👇
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
8- header
Use a header to separate any kind of introductory content from the rest of the document.
Example 👇
<article>
<header>
<h1>A heading here</h1>
<p>Posted by Ankur Tyagi</p>
<p>Some more information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
9- footer
This would typically hold extra information like author or copyright information, along with any related navigation.
Example 👇
<footer>
<p>Author:Ankur Tyagi</p>
<p><a href="mailto:hello@theankurtyagi.com">hello@theankurtyagi.com</a></p>
</footer>
10- aside
Designate an area of a document that contains supplementary information about the main content.
Example 👇
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
11- article
Use article when the content it will display is self-containing, for example, a blog post or even a news story.
There can be multiple article elements on a page and there are no limits on where they can appear.
Example 👇
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
12- section
This represents a grouping of content within a document where no other element is suitable.
Example 👇
<section>
<h2>WWF History</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
13- H1 to H6
Heading elements have been around for a long time, but make sure they are being used correctly inside sectioning elements.
Example 👇
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
14- time
Dates and times are formatted differently across the world and so cannot be reliably parsed by a search engine or email client.
Specify what parts of a sentence are time and allow programs to extract and use that information.
Example 👇
<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
15- mark
When wanting to highlight a few words of a sentence, it may seem best to use strong.
While strong denotes importance, mark denotes relevance in the current situation.
An example of this would be matched terms in a search result.
Example 👇
<p>Do not forget to buy <mark>milk</mark> today.</p>
Hope you like this 💙
For more pointers in details visit my personal blog website below:
I recently started blogging on theankurtyagi.com where I create free content for the community. This article is from there, you should check it out.
Hope you like this one. Please leave your feedback! You can follow me for more killer content on Twitter
If you liked my recommendations, then I encourage you to sign up for my weekly newsletter
Every Friday, I share a “2-1-1” newsletter with 2 tips on coding from my exp, 1 life relationship tip from my experience & 1 fitness tip.
Sign up below 👇