HTML Features, probably you never knew existed.
Vishwa.R
Posted on August 28, 2021
Hello again from codereaper08!
Thanks again to all my followers, who always motivate me to write blogs weekly, in spite of my tight academic schedules.
Back again with a good article, I hope. In this post, we are going to discuss 5 features in HTML, which probably we never knew existed. So let's get into it.
1. WBR Tag:
Let's start from the first one in our list, wordbreak
tag, abbreviated as <wbr>
. You may think, what's the meaning of its existence, well It's not like the handy br
tags we use. <wbr>
just doesn't force words to break unless there's a necessary situation to do so. wbr
tag is an empty tag (Doesn't have a closing tag).
We'll see a comparison between <wbr>
and <br>
, resize the browser-window to see how wbr
breaks itself on necessary situations.
2. address Tag:
Using div
's for enclosing contact info?
HTML gives a good semantic way of doing that using <address>
tag. So what's different in using <address>
tags, well, It renders the text in Italics with line-breaks above and below the <address>
tags. It also has a by default display property of block
. Take a look at the below JSFiddle.
3. optgroup Tag:
<optgroup>
tag is used when you need to group the options into categories. This makes selecting an option from a very large list of options easy!
User can look into the relevant category and select an option in that particular category. I've created a superhero optgroup
for demonstration in the below JSFiddle.
4. portal Tag:
Now things get interesting! What we are going to see is a tag called <portal>
. This was launched by Google in I/O 2019 DevCon, where they mentioned that, <portal>
will be an upgrade to <iframe>
. <portal>
allows seamless navigation inside the embedded content, too!. One sad thing, It is not supported by many browsers, including the normal Google Chrome too. Currently, only the Chrome canary supports the <portal>
tag. Check out the demo video below.
5. capture attribute for Input element:
Lastly, we are going to see about capture
attribute for the input elements. capture
added as an attribute to an input element opens the camera for taking shots of the user(front camera) or the scene(rear camera). This tag only works on mobile, and it simply falls back to a file picker in Desktop. capture
attribute has two values,
ā user --> Opens User facing Camera (Front)
ā environment --> Opens Environment (Rear)
Take a look at the below JSFiddle.
And, that's it for today, Feel I missed out something? Write down in comments, I'll be happy to include. Love it? Give a š for the article. Thanks for reading and have a good time š
Posted on August 28, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.