Html

New HTML 5.1 update

It’s time to get little lifted, Now the HTML 5.1 is in market, there is gonna be updated browsers, but the good news firefox and Opera are supporting Html 5.1, Also latest updated chrome will support html 5.1.
Html 5.1 New update

HTML 5.1 was released on 1st nov 2016, It’s more than a week, but the developers and new product companies have started using new tags.

What’s new in html 5.1

It’s not a massive update like HTML 5 But there our few new tags which has been introduced

1. Picture tag <picture>

Picture tag is not a replacement for <img> tag, It’s usually a container with multiple <img> tag. Also along with picture tag other attribute as srcset.

Consider a Eg. If you want to add different images for different viewport, As a developer we try to do by adding background image and using media query for different viewports.
But these is not the case.

You have to do exactly like below, All these is taken care at HTML level, no css is needed

<picture>
 <source srcset="image1.png" media="(min-width: 1000px)">
 <source srcset="image2.png" media="(min-width: 600px)">
 <img src="image.png" alt="Image">
</picture>

Expected output:(Note: If you don’t see any change in below output,Please update your browsers. Best result view in updated firefox.)
Ibloggr
So,If your browser doesn’t support HTML 5.1 it will by default load plain img src with no responsive image. In above case it will load “image.jpg”

You can find the details more details here https://www.w3.org/TR/html51/semantics-embedded-content.html#the-picture-element

2. Dialog tag <dialog>

Dialog tag is same as modal popup which we used as fancy box.

You can see the output here

http://www.w3schools.com/tags/tag_dialog.asp

3 & 4. summary and details ( <summary> & <details> )

The <summary> tag defines a visible heading for the <details> element along with open and close icon. The heading can be clicked to view/hide the details.

Copyright 1999-2014.

– by Refsnes Data. All Rights Reserved.

All content and graphics on this web site are the property of ibloggr Data.

Primary focus as per w3c standard remains the same.

Future scope

The Working Group aims to produce an HTML 5.2 Recommendation in late 2017 you can find details here https://www.w3.org/TR/html52/

3 Comments

  1. wow your blog has got updated information about html 5.1 ,I was trying to search many website to understand picture tag. Now I got its clear understanding.
    I also have one question, dialog tag doesn’t work in mobile phones any specific reasons??

Leave a Reply

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