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.
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
<br>, resize the browser-window to see how
wbr breaks itself on necessary situations.
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.
<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.
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
<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.
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 😄