HTML Features, probably you never knew existed.
Tags: webdev, todayilearned, html, todayisearched
Published: 2021-08-28 19:29:19

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.

{% jsfiddle https://jsfiddle.net/VishwaR/3bsw7vq8 result,html,css %}

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

{% jsfiddle https://jsfiddle.net/VishwaR/f2Lnpuhz/ result,html,css %}

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

{% jsfiddle https://jsfiddle.net/VishwaR/vm9jnwe4/ result,html,css %}

## 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](https://www.google.com/chrome/canary/) supports the `<portal>` tag. Check out the demo video below.

{% youtube 4JkipxFVE9k %}


## 5. capture attribute for Input element:

![camera](https://images.unsplash.com/photo-1488240339625-c4014e114224?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1079&q=80)
<figcaption>
Photo by <a href="https://unsplash.com/@lucabravo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Luca Bravo</a> on <a href="https://unsplash.com/s/photos/camera?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

  </figcaption>

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.

{% jsfiddle https://jsfiddle.net/VishwaR/7r0ec9g1/ result,html,css %}

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 😄