Technology Review

Tech Review. All things .NET

HTML5

HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet.

It is the fifth revision of the HTML standard with a core aim to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4 ,but XHTML 1 and DOM Level 2 HTML as well.
Video tag:

What is HTML5?

HTML5 is omnipresent, the defacto new standard on the internet, here is an excellent introduction to HTML5: Dive into HTML5.

The HTML5 Wikipedia page states that HTML5 contains the following features:

  • Markup, new elements and attributes
    • article aside audio
    • canvas command datalist
    • details embed figcaption
    • figure footer header
    • hgroup keygen mark
    • meter nav output
    • progress rp rt
    • ruby section source
    • summary time video wbr
  • JavaScript APIs
    • Canvas 2D Context Contacts File APIs
    • Forms Geolocation HTML Microdata
    • Indexed Database Media Capture Messaging
    • Offline Web Applications Selection Server-Sent Events
    • Web Notifications Web Sockets Web Storage
    • Web Workers XMLHttpRequest Level 2

HTML5 allows for rich experiences within web browsers, without the need of plug-in based technologies (Flash or Silverlight).. Figure 1 demonstrates how to create a video player:

<video autoplay controls loop width="600" height="300" poster="Content/images/bbb.png">
<source src="Content/video/video.mp4"  />
<source src ="Content/video/big_buck_bunny.ogv" />
<source src ="Content/video/video.webm" />
Your browser does not support HTML5 Video!
</video>                      
                    
Figure 1: HTML5 Video Tag

HTML 5 Pointers

  • New Doctype

    • embrace the new HTML5 DOCTYPE
    • <!DOCTYPE html> 
                                  
  • The Figure Element

    • semantically associate captions with their image
    • <figure>  
      <img src="path/to/image" alt="About image" />  
      <figcaption>  
      <p>This is an image of something interesting. </p>  
      </figcaption>  
      </figure>
                              
  • <small> Redefined

    • The small element now refers to “small print.”
  • No More Types for Scripts and Links

      <link rel="stylesheet" href="path/to/stylesheet.css" />  
      <script src="path/to/script.js"></script> 
                                      
  • To Quote or Not to Quote.

    • You don’t have to wrap attributes in quotation marks and close elements
  • Make your Content Editable

      <!DOCTYPE html>  
      <html lang="en">  
      <head>  
      <meta charset="utf-8">  
      <title>untitled</title>  
      </head>  
      <body>  
      <h2> To-Do List </h2>  
      <ul contenteditable="true">  
      <li> Create a new Web App. </li>  
      <li> Run a 15 K. </li>
      <li> Watch tech video. </li>  
      </ul>  
      </body>  
      </html>  
                                          
    • allows the user to edit any of the text contained within the element
  • Email Inputs

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>untitled</title>
      </head>
      <body>
      <form action="" method="get">
      <label for="email">Email:</label>
      <input id="email" name="email" type="email" />
      <button type="submit"> Submit Form </button>
      </form>
      </body>
      </html>
                                
    • instruct the browser to only allow strings that conform to a valid email address structure
  • Placeholders

      Email: <input name="email" type="email" placeholder="joe@joedoe.com" />
                                  
    • create placeholders for textboxes
  • Local Storage

    • browsers “remember” what was typed, even after the browser is closed or is refreshed
  • The Semantic Header and Footer

      <header>
          ...
      </header>
      <footer>
          ...
      </footer>
                                  
  • hgroup

      <header>
      <hgroup>
      <h1> Memory </h1>
      <h2> The hero developer is the developer with the photographic memory. </h2>
      </hgroup>
      </header>
                              
    • groupheadings together, without affecting the flow of the document’s outline
  • Required Attribute

    • In forms specifies, whether a particular input is required
    • <input type="text" name="someInput" required="required">
                                  
      <form method="post" action="">
      <label for="someInput"> Your Name: </label>
      <input type="text" id="someInput" name="someInput" placeholder="Joe Doe" required>
      <button type="submit">Go</button>
      </form>
                              
    • If the input is left blank, and the form is submitted, the textbox will be highlighted.
  • Autofocus Attribute

    • particular input should be "selected," or focused,
    • <input type="text" name="someInput" placeholder="Joe Doe" required autofocus>
                              
  • Audio

    • No longer need to rely upon third party plugins in order to render audio
    • <audio autoplay="autoplay" controls="controls">
      <source src="file.ogg" />
      <source src="file.mp3" />
      <a href="file.mp3">Download this file.</a>
      </audio>
                              
  • Regular Expressions

    • new pattern attribute, insert a regular expression directly into markup
    • <form action="" 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>
                                      
  • To Quote or Not to Quote.

    • You don’t have to wrap attributes in quotation marks and close elements
  • Slider with Range Input

      <form method="post">
      <h1> Awesomness Scale </h1>
      <input type="range" name="range" min="0" max="10" step="1" value="">
      <output name="result">  </output>
      </form>
                                          
    • new range type of input with min, max, step, and value attributes

HTML5 Resources

About me
Published
Copyright © 2013 - 2014 Nils-Holger Nägele