Features of HTML5

Html+Css
Mar 18 2017
2307 Views

Features of HTML5

  1. New Doctype: The simpler doctype declaration is just one of the many novelties in HTML5. Now you need to write only: <!doctype html> and this is it. The syntax of HTML5 is compatible with HTML4 and XHTML1, but not with SGML(Standard Generalized Markup Language).
  2. Geolocation: Best known for use on mobile devices, geolocation is coming with HTML5.
  3. Local Storage: Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and the information is never transferred to the server. Local storage is per origin (per domain and protocol). local storage value never expire until destroy

          <script>

              // set variable

              localStorage.setItem("name", "7codes");

              //get variable

              localStorage.getItem("name");

              //remove variable

              localStorage.removeItem("name");

         </script>

  1. Web Worker: A web worker is a JavaScript running in the background, without affecting the performance of the page. When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

          Note: Internet Explorer 9 and earlier versions do not support Web Workers.

          example <button Worker</button>

                        < button Worker</button>

                        var w;

                        function startWorker() {

                            if(typeof(Worker) !== "undefined") {

                                if(typeof(w) == "undefined") {

                                    w = new Worker("demo_workers.js");

                                }

                                 w. {

                                    document.getElementById("result")[removed] = event.data;

                                };

                            } else {

                                document.getElementById("result")[removed] = "Sorry, your browser does not support Web                         Workers...";

                            }

                        function stopWorker() {

                            w.terminate();

                            w = undefined;

                        }

5.The Figure Element:

Consider the following mark-up for an image:

<img src="path/to/image" alt="About image" />

<p>Image of Mars. </p>

There unfortunately isn't any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

<figure>

    <img src="path/to/image" alt="About image" />

    <figcaption>

        <p>This is an image of something interesting. </p>

    </figcaption>

</figure>

  1. <small> Redefined: Not long ago, I utilized the <small> element to create subheadings that are closely related to the logo. It's a useful presentational element; however, now, that would be an incorrect usage. The small element has been redefined, more appropriately, to refer to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small> would be the correct wrapper for this information. The small element now refers to "small print."
  2. Make your Content Editable: The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.

          <!DOCTYPE html>

          <html lang="en">

          <head>

              <meta charset="utf-8">

              <title>Make your Content Editable</title>

          </head>

          <body>

              <h2>List </h2>

                <ul>

                  <li> Html. </li>

                  <li> Css </li>

                  <li> Javascript </li>

                  <li> Angularjs </li>

               </ul>

          </body>

          </html>

  1. spellcheck Attribute: The spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not.

          The following can be spellchecked:

          Text values in input elements (not password)

          Text in <textarea> elements

          Text in editable elements

  1. Autofocus and placeholder Attribute: Again, HTML5 removes the need for JavaScript solutions. If a particular input should be "selected," or focused, by default, we can now utilize the autofocus attribute.

          <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

          Placeholder is a feature supported for input fields by adding the attribute placeholder. This feature displays the value provided for the placeholder attribute, like a water mark, until the focus is moved to the input control.

          <input type="email" name="EmailTextBox"

                placeholder="Please enter email here..."/>

  1. Multimedia support: First and foremost feature is the support of multimedia in HTML5. Yes HTML5 supports both audio and video files to be played in a browser. Below is the sample syntax to play audio and video files respectively.

          < audio autoplay="autoplay" c>

                <source src="7thttp://www.developer.com/imagesvr_ce/1235/DeveloperTopHTML5Features07.jpgh_sense.ogg" />                          

          <source src="7th_sense.mp3" />

          </audio>

          <video controls preload>

              <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />

              <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />

              <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>

          </video>

  1. Custom Data attribute: HTML5 now allows you to add valid data attributes, which helps in storing the data without affecting the web page UI. These data attributes can be added in a hidden manner from the user and can be later used by JQuery or your JavaScript functions. In order to make your custom data attribute valid, the attribute should be prefixed with the word "data".

          <span class="user" data-domain="Technology" data-language="C#"></span>

  1. Regular Expressions: How often have you found yourself writing some quickie regular expression to verify a particular textbox. Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.

          <form acti method="post">

              <label for="username">Create a Username: </label>

              <input type="text" 

                 name="username"

                 id="username"

                 placeholder="4 <> 10"

                 pattern="[A-Za-z]{4,10}"

                 autofocus

                 required>

              <button type="submit">Go </button>

          </form>

  1. The New <canvas> Element: This is what killed Flash. The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for 2D graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
  2. The <header> and <footer> Elements: HTML5 has acknowledged the new web anatomy. With HTML5, <header> and <footer> are specifically marked for such. Because of this, it is unnecessary to identify these two elements with a <div> tag.
  3. New <section> and <article> Elements: Again, HTML5 has adopted the popular web standard. <section> and <article> allows you to mark specific areas of your layout as such and should have a positive effect on your SEO in the end.
  4. New <menu> and <figure> Elements: <menu> can be used for your main menu, but it can also be used for toolbars and context menus. The <figure> element is another way to arrange text and images.
  5. New <audio> and <video> Elements: There are also some new multimedia elements and attributes, such as <track>, that provides text tracks for the video element. With these additions, HTML5 is definitely getting more and more Web 2.0-friendly. The problem is that by the time HTML5 becomes widely accepted, Web 2.0 might be old news.
  6. New Forms: The new <form> and <forminput> elements are looking good. If you do much with forms, you may want to take a look at what these have to offer.

Leave a Reply