HTML is More Capable Than Ever Before.

HTML is More Capable Than Ever Before.
Share on facebook
Share on twitter
Share on pinterest

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 r-d-smith-k-f3PYgAPwQ-unsplash.jpg

Let’s get started 👇

You can check my old tweet as well on this topic 👇

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.


<dialog open>
  <p>Dialog Content</p>

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>
  <p>Some extremely long content…</p>

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 👇

  <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;">

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>

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 👇

  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/python/">Python</a>

8- header

Use a header to separate any kind of introductory content from the rest of the document.

Example 👇

    <h1>A heading here</h1>
    <p>Posted by Ankur Tyagi</p>
    <p>Some more information here</p>
  <p>Lorem Ipsum dolor set amet....</p>

This would typically hold extra information like author or copyright information, along with any related navigation.

Example 👇

  <p>Author:Ankur Tyagi</p>
  <p><a href="mailto:[email protected]">[email protected]</a></p>

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>

<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>

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 👇

<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>

<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>

<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>

12- section

This represents a grouping of content within a document where no other element is suitable.

Example 👇

<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>

<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>

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 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 👇

2-1-1 Friday newsletter

Subscribe to our Newsletter

Join my email list for career and mentorship advice and more!

Share this post with your friends

Share on facebook
Share on twitter
Share on linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Articles you may like

Why You Should Learn ReactJS

Why You Should Learn ReactJS

Introduces support for async/awaits in Server Components. Write Server Components using standard JavaScript await syntax by defining your component as an async function.

Read More »