HTML 5.1 learning: 14 new features and application examples

Preface

As we all know, HTML5 belongs to the World Wide Web Consortium (W3C), an organization that provides standards for the entire Internet community, and the protocols formed in this way can be used worldwide. In November 2016, the W3C updated the long-standing HTML 5 standard, the first minor update in 2 years. Many of the features initially proposed for HTML 5.1 were dropped due to design flaws and lack of support from browser vendors.

Although there are some elements and functional improvements brought into HTML 5.1, it is still a small update. Some of the new elements include composite tags, which now include <dialog>, <details>, <summary> and <picture>, which provide developers with more space to express creativity and content.

The W3C has also started working on a draft of HTML 5.2, which is expected to be released by the end of 2017. What we are going to present here are the new features and functional improvements introduced in version 5.1. You don't need to use javascript to take advantage of these features. Not all browsers support these features, so it's best to check browser support before using them in a production environment.

14. Prevent phishing attacks

Most people who use target='_blank' don't know an interesting fact - a newly opened tab can change window.opener.location to some phishing page. It will execute some malicious JavaScript code on your behalf on the open page. Because users trust that the page they open is safe, they don't become suspicious.

To completely eliminate this problem, HTML 5.1 has standardized the use of the rel="noopener" attribute by isolating the browser context. rel="noopener" can be used in <a> and <area> tags.

 <a href="#" target="_blank" rel="noopener">
  The link won't make trouble anymore
</a>

13. Flexible handling of image titles

The <figcaption> tag represents a caption or legend associated with a <figure> element, usually serving as a container for visual elements such as pictures, charts, and illustrations. In earlier versions of HTML, <figcaption> could only be used as the first or last child tag of a <figure>. HTML5.1 has relaxed this restriction and you can now use a <figcaption> anywhere within a <figure> container.

 <article>
  <h1>The Headline of todays news </h1>
  <figure>
    <img src="petrolimage.jpeg" alt="Petrol price drops">
    <figcaption>A man fueling up his car at a petrol station</figcaption>
  </figure>
  <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>

12. Spell Check

spellcheck is an enumerated attribute whose values ​​can be the empty string, true, or false. If true is specified, the element will be checked for spelling and grammar.

element.forceSpellCheck() will force the user agent to report spelling and grammar errors found on a text element, even if the user never focuses on that element.

 <p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

11. Empty options

Newer versions of HTML allow you to create an empty <option> element. It can be a child of an <optgroup>, <datalist> or <select> element. You will find this feature helpful when designing user-friendly forms.

10. Support full screen of Frame

The Boolean allowfullscreen property developed for Frame allows you to control whether content can be displayed full screen by using the requestFullscreen() method. For example, let's use an iframe embedded in YouTube's player. The allowfullscreen property needs to be set to allow the player to display the video in full screen.

 <article>
  <header>
  <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
  </header>
  <main>
  <p>Check out my new video!</p>
  <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
  </main>
</article>

9. Embedding header and footer

HTML5.1 allows you to embed headers and footers within another header. You can add a header or footer to the head element if they contain themselves within paragraph content. This feature becomes very useful if you want to add elaboration such as <section> and <article> tags to semantic paragraph elements.

In the following code, the <article> tag contains a <header> tag, which has an <aside> tag that itself contains a <header> tag.

 <article>
  <header>
    <h2>Lesson: How to cook chicken</h2>
    <aside>
      <header>
        <h2>About the author: Tom Hank</h2>
        <p><a href="./tomhank/">Contact him!</a></p>
      </header>
      <p>Expert in nothing but Cooking. The cookbook sideshow.</p>
    </aside>
  </header>
  <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
          Remove as much air as possible from the bag and seal it. </ins></p>
</article>

8. Zero-width images

New versions of HTML allow you to add zero-width images. This feature can be used when the image does not need to be displayed to the user. If an img element is used for purposes other than simply displaying an image, for example, as part of a service that counts page views, use zero values ​​for the width and height attributes. For images with zero width, it is recommended to use an empty attribute.

 <img src="theimagefile.jpg" width="0" height="0" alt="">

7. Validate the form

The new reportValidity() method allows you to validate a form and reset the results, reporting errors to the user at the browser's appropriate location. User agents may report more than one restriction if a single element encounters multiple problems simultaneously. In this case, if the "Password" input is required but is not filled in, it will be marked as an error.

 <h2>Form validation</h2>
<p>Enter details</p>
<form>
  <label>
    Mandatory input <input type="password" name="password" required />
  </label>
  <button type="submit">Submit</button>
</form>
<script>
  document.querySelector('form').reportValidity()
</script>

6. Browser context menu

In HTML 5.1, you can define a menu using the <menu> tag, which contains one or more <menuitem> elements, and then bind it to any element using the contextmenu attribute. The id value of the <menu> element should match the value of the contextmenu attribute of the element to which we want to add the context menu.

Each <menuitem> can have one of the following three forms:

1. radio – gets options from a group;
   
2. checkbox – selects or deselects an option;
   
3. command – performs an action when clicked.
   

 <h2 contextmenu="popup-menu">
  Right click to get the context menu demo.
</h2>
 
<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem>
  <menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem> 
  <menuitem type="radio" name="group1">Radio button a</menuitem>
  <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem>
  <menuitem type="checkbox" disabled>Disabled menu item</menuitem>
</menu>

5. Use cryptographic random numbers in scripts and styles

A cryptographic nonce is a randomly generated number that can only be used once and must be generated for each page request. The nonce attribute can be used in <script> and <style> elements.

It is commonly used within a website's content security policy to determine whether a particular style sheet or script should be implemented on a page. In the code provided below, this value is hard-coded, but in actual usage scenarios, this value is randomly generated.

 <script nonce='d3ne7uWP43Bhr0e'>
  The JavaScript Code 
</script>

4. Reverse link relationship

The rev attribute was defined in HTML4, but it does not appear in HTML5. The W3C decided to reinclude the rev attribute in the <a> and <link> elements. The rev attribute identifies the relationship between the current and reverse linked documents. It has been included to support the widely used data structure markup format, RDFa.

Let's take an example of two documents, each containing a course, the link between them can be defined using the rel and rev attributes as follows.

 //Document with URL "chapter1.html"
 
<link href="Lesson2.html" rel="next" rev="prev">
 
 
//Document with URL "chapter2.html"
 
<link href="Lesson1.html" rel="prev" rev="next">
<link href="Lesson3.html" rel="next" rev="prev">

3. Show/Hide Information

The new <details> and <summary> elements allow you to add extended information to a piece of content. You can show or hide an additional information block by clicking on the element. By default, additional information is hidden.

In the code, you should place the <summary> tag inside the <details> tag as shown below. After the <summary> tag, you can add additional content that you want to hide.

 <section>
  <h3>Error Message</h3>
  <details>
  <summary>This file hasn't been downloaded due to network error.</summary>
  <dl>
    <dt>File name:</dt><dd>Passcode.txt</dd>
    <dt>File size:</dt><dd>8 KB</dd>
    <dt>Error code:</dt><dd>342a</dd>
  </dl>
  </details>
</section>

2. More input types

The HTML input element is extended with three input types – week, month and datetime-local.

As their names suggest, the first two elements allow the user to select a day of the week value and a month value. Depending on browser support, both will be rendered as a drop-down calendar that lets you select a specific week or month of the year.

datatime-local represents a date and time input field, but without a time zone setting. The data can be selected in a similar way to the month or week input items, and the time can be entered separately.

 <section>
  <h2> 
    Week, Month and Datetime-local 
  </h2>
  <form action="action_page.php">
    Choose a week:
    <input type="week" name="year_week">
    <input type="submit">
  </form>
  <form action="action_page.php">
    Birthday (month and year):
    <input type="month" name="bdaymonth">
    <input type="submit">
  </form>
  <form action="action_page.php">
    Joining (date and time):
    <input type="datetime-local" name="bdaytime">
    <input type="submit" value="Send">
  </form>
</section>

1. Responsive Images

W3C has introduced some features to achieve responsive images without using CSS. They are…

srcset image attribute

The srcset attribute lets you specify one or more alternative image sources, corresponding to different pixel resolutions. It will allow the browser to choose the appropriate quality implementation for display based on the user's device. For example, it might be better to display a low-resolution image to a user on a mobile device with a slow connection.

You can use the srcset attribute with its own x modifier to describe the pixel ratio of each image. If the user's pixel ratio is equal to 3, the high-res image will be displayed.

 <img src="clicks/low-res.jpg" srcset="
  clicks/low-res.jpg 1x, 
  clicks/medium-res.jpg 2x, 
  clicks/high-res.jpg 3x"
>

In addition to pixel ratios, you can also choose to use the w modifier to specify a different size for the image. In the following example, the high-res image is defined to be displayed at a width of 1600px.

 <img src="clicks/low-res.jpg" srcset="
  clicks/low-res.jpg 500w, 
  clicks/medium-res.jpg 1000w, 
  clicks/high-res.jpg 1600w"
>

sizes image attribute

Most of the time creators like to display different images for different screen sizes. This can be done using the sizes attribute. It allows you to adjust the width based on the space allotted for the image to be displayed, and then use the srcset attribute to select the appropriate image to display. For example…

 <img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw" 
  srcset="clicks/low-res.jpg 500w, 
  clicks/medium-res.jpg 1000w, 
  clicks/high-res.jpg 1600w"
>

Here, the sizes attribute defines that the image width is 100% of the viewport width when the viewport is larger than 25 em, or 60% of the viewport width when it is 25 em or smaller.

The picture element

The picture element allows you to declare images for different screen sizes. This can be achieved by wrapping the <img> with a <picture> element and describing multiple <source> child elements.

The <picture> tag alone does not display anything. You have been assumed to declare the default image source as the value of the src attribute, and the optional image sources in the scrset attribute, as shown below:

 <picture>
  <source media="(max-width: 25em)" srcset="
    clicks/small/low-res.jpg 1x,
    clicks/small/medium-res.jpg 2x, 
    clicks/small/high-res.jpg 3x
  ">
  <source media="(max-width: 60em)" srcset="
    clicks/large/low-res.jpg 1x,
    clicks/large/medium-res.jpg 2x, 
    clicks/large/high-res.jpg 3x
  ">
 
  <img src="clicks/default/medium-res.jpg">
</picture>

Summarize

The above is the full content of this article. I hope that the content of this article can be of some help to your study or work. If you have any questions, you can leave a message to communicate.