HTML 5 a very big deal in the web development community. The first major update to HTML since HTML4.0 released in 1999. Fortunately, the web development community didn’t have to wait quite that long for the next update of HTML. As HTML 5.1 being introduced, with the goal of fixing some issues that left open in HTML5.te
And it released with a very good news, that W3c has already started working on HTML 5.2, expected to be released in Late 2017.
Let’s dig deeper into HTML 5.1
The Main Features, Elements and Attribute Introduced in HTML5.1
- Responsive Images.
- Details & Summary Element
- Context Menu
The Main Features- Elements and Attribute Introduced in HTML5.1.
- Form Validation
- Table Sorter
- Month, Week, date and time-local elements
We will look into Integration Features in our next blog stay tuned for it. Let’s start with Responsive images.
What is a Responsive Image?
An image which is displayed in its “best form” on a web page, depending on the device, webpage is being viewed from.
The term “best form” could mean multiple things:
- Show the image asset based on user’s physical screen size. For example: want to show a separate image asset on a 13.5 inch laptop and a 5 inch mobile phone (on a maximized browser).
- Show a separate image based on the resolution of the device (or, the device-pixel ratio, which is the ratio of device pixel and CSS pixel).
- Show an image in a specified image format (JPEG XR, for example)
How to Enable Responsive Images?
There are multiple older ways to enable the responsive behaviour of images. Like for example enabling it using Script, but all the ways have multiple drawbacks.
So for a better way HTML5.1 offers the solution by using:
- srcset Attribute
- sizes Attribute
- picture Element
The srcset Attribute
Why use srcset Attribute?
To allow the browser to pick an image of the appropriate quality for the user’s device (determined by its own pixel density, zoom level or network speed.)
For example, you might want to provide a lower resolution image for users with small phones on slower mobile networks.
A single image with different pixels
The srcset attribute accepts a comma separated list of image URLs each with its own x modifier, which describes the pixel ratio (amount of physical pixels in a CSS pixel) most appropriate for each image.
To make you understand better let’s look into a very simple example:
<img src=“images/low-res.jpg” srcset=“images/low-res.jpg 1x, images/high-res.jpg 2x, images/ultra-high-res.jpg 3x”>
In this case, if the user’s pixel ratio is equal to 1, the low-res image will be displayed, for 2, high-res will be shown and for 3 and above, ultra-high-res will be chosen.
Alternatively, if we can choose to display images of different sizes instead of different pixel ratios.
This can be done using the w modifier:
Let’s see this example:
<img src=“images/low-res.jpg” srcset=“ images/low-res.jpg 600w, images/high-res.jpg 100w, images/ultra-high-res.jpg 1400w ” >
In this case, the low-res image is defined to be 600px wide, high-res to be 1000px and ultra-high-res to be 1400px.
The sizes Image Attribute
Sometimes we might want to display images differently depending on the user’s screen size. That’s where sizes Image Attribute comes into picture.
For example, we could show a series of images laid out in two columns for wide screens and laid out in just one for more narrow screens.
Using the “sizes” attribute. It allows to translate the width of the screen into the space allocated for an image and then pick the appropriate image using the srcset attribute.
Here’s an example:
<img src=“images/low-res.jpg” sizes=“(max-width: 40em) 100vw, 50vw” srcset = “images/low-res.jpg 600w, images/high-res.jpg 100w, images/ultra-high-res.jpg 1400w”>
The sizes attribute defines the width of the image as 50% of the width of the viewport when the width of the viewport is greater than 40em, or 100% of the width when its lower or equal to 40em
The picture Element
What is the need of picture element?
If the user doesn’t want to change the size of images for each screen, and want to show completely different images. Then use the picture element.
It allows to define images with various sources for different screen sizes by wrapping your <img> with a <picture> element and specifying multiple child <source> elements.
The <source> element then acts as the source of URLs to load the images.
Now let’s look into this example to understand better
<picture> <source media=“(max-width: 20em)” srcset=“ images/small/low-res.jpg 1x, images/small/high-res.jpg 2x, images/small/ultra-high-res.jpg 3x “ > <source media=“(max-width: 40em)” srcset=“ images/small/low-res.jpg 1x, images/small/high-res.jpg 2x, images/small/ultra-high-res.jpg 3x “ > <img src=“images/large/low-res.jpg”> </picture>
Details & Summary Elements
Why to use it?
If you need to show and hide a block of additional information by clicking on an element in the web page. Then use <details> element with a <summary> element inside it.
Clicking on the summary toggles the visibility of the rest of the content from the <details> element.
<section> <h2>Acadgild</h2> <p> The Acadgild is growing in city by city. </p> <details> <summary> Courses </summary> <p> Every fast growing technology is in AcadGild’s Training. </p> </details> <details> <summary> Services </summary> <p> E-Learning Training, Corporate Training. </p> </details> </section>
Now let’s look into the last topic of our blog .i.e Context Menus.
Context Menus Using the <menu> and <menuitems> Elements
When to use it?
Whenever you need to define self-menu items on the right click in a web page. Use the <menu> tag to define a menu consisting of one or several <menuitem> elements and then bind it to any element using the context menu attribute.
What is the meaning of Contextual Menu?
A contextual menu (or context menu) appears when we right-click on an application. The options revealed are specific to where the user has clicked, hence context. Look into the below image right part of the image is a contextual menu.
<menu> along with the <menuitem> element will incorporate the new menu items as part of the native contextual menu.
Let’s look into the example below, we add to our <div> a new context <menu> named HTML, with two <menuitems>- HTML5, HTML 5.1.
<!-- A <div> element with a context menu --> <div contextmenu="popup-menu"> Right-click to see the adjusted context menu </div> <menu id="popup-menu" type="context"> <menu label="HTML"> <menuitem >HTML5</menuitem> <menuitem >HTML5.1</menuitem> </menu>
Note: Only Supported by Mozilla Firefox, till the time of Content Preparation
I hope you have understood all the new elements and attributes introduced in HTML 5.1.