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 😄
Top comments (4)
Hey, nice list!
The
<wbr>elements in your first example don’t do anything useful though, because browsers already handle line breaks between words automatically. As the name “word break” implies, it’s meant for introducing breaks within words, or things that might be treated as a single word, like very long URLs.Browsers handle line breaks between words and syllables automatically, provided there's a grammar package for the language you have defined in your HTML tag. Might be useful for content managers in languages where automatic hyphenation or word breaking doesn't work. An alternative would be to use a soft hyphen character (compart.com/en/unicode/U+00AD) which also suggests a word break possibility for the browser.
Hey @priitpu !
Thanks for commenting :-)
I never knew about soft-hyphen thing, thanks for letting me know.
Thanks @chuniversiteit !
Good point, regarding long URLs. Will surely note it :-)