HTML 5

HTML 5

An Introduction

Text

  • Replaces everything that come before (HTML4 & XHTML 1.0)
  • Replacement of DOM2HTML (DOM)
  • No longer looking at DOM, but a Number of API's

DOCTYPE

DOCTYPE

<! DOCTYPE HTML>

  • Its the shortest notation to put the browser in the standards mode
  • No DTD
  • No Version Number
  • Stick to uppercase 'DOCTYPE'

This is Valid HTML5

<!DOCTYPE html>
<meta charset-UTF-8>
<title>Page Title</title>
<p>Look at my Sloppy Code!</p>

WTF?

Where's the html, head & body tag?

  • No Need of these old tags in HTML5
  • You know what!! Browsers simply doesn't care about this tags

HTML5 Elements

The new Kids in town

HTML5 Elements

For Better Structure

<section>

  • Represents a generic section of a document or application
  • Thematic grouping of contents, typically with a Heading.

<article>

  • a self-contained composition in a document, page, application, or site
  • For example, A forum's post, a magazine or a newspaper article etc.

<nav>

  • The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links
  • Only sections that consists of major navigation blocks are appropriate for the nav element.

<hgroup>

  • Represents the heading of a section. The element is used to group a set of h1-h6 elements when the heading has multiple levels such as subheadings, alternative titles and taglines.

<header>

  • Represents a group of introductory and navigational aids
  • Is intend to usually contain the section's heading an h1-h6 element or an hgroup element, but this is not required
  • Can also be used as wrap section's table of contents, a search form, or any relevant logos

<footer>

  • Represents a footer for its different ancestor sectioning content or sectioning the root element
  • Typically contains information about its section such as who wrote it, links to related documents, copyright data etc.
  • Footer doesn't have to necessarily have to appear at the end of the section, though they usually do

<address>

  • Represents the contact information for its nearest article or body element ancestor
  • Must not be used to represent arbitrary addresses (e.g. postal addresses)
  • Typically, it would be included along with other information in a footer element

<figure>

  • Represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document
  • can be used to annotate diagrams, illustrations, photos etc.

<figcaption>

  • Represents a caption or legend for the rest of the contents of the figcaption element's parent figure element, if any

<small>

  • represents the side elements such as small print
  •  small prints typically features disclaimers, legal restrictions, or copyrights. Small print is also some times used for attribution, or for satisfying licensing requirements
  • intended for only short run of text

<cite>

  • represents the title of a work
  • this can be a work that is being quoted or referenced in details
  • A person's name is not a title of a work and the element must therefore not be used to mark up people's names

HTML5 Elements

For other purposes

<time datetime pubdate>

  • Represents either a time on a 24 hour clock or a precise date
  • Way to encode modern date and time in a machine readable way

<time datetime pubdate>

  • the datetime attribute, if represents gives the date or time being specified
  • the pubdate attribute is a boolean attribute

<time datetime pubdate>

<time datetime="2015-03-25">March 25</time>
<p>I usually have a snack at 
<time>16:00</time>.</p>

<article>
    <h1>Small Tasks</h1>
    <footer>
        published <time pubdate>2009-08-30</time>
    </footer>
    <p>I put a bike bell on his bike.</p>
</article>

<mark>

  • represents a run of text in one document marked or highlighted for reference purpose
  • Can for example be used to highlight words that match some search string

<canvas>

  • A resolution dependent bitmap canvas
  • Basically a rectangle in your page where you can use JavaScript to draw anything you want
  • Can be used for rendering graphs, game graphics or other visual elements on the fly
  • Has two attributes: width and height 

<canvas>

<canvas width="400" height="150"></canvas>

< ! - - provide alternative contents - - >
<canvas id="clock" width="150" height="150">
    <img src="img/clock.png" width="150" height="150" alt="clock">
</canvas>
//Reference the canvas object
var canvas = document.getElementByID ('clock');

//check for support
if (canvas.getContext)
{
    //Get the context
    var context = canvas.getContext ('2d');
}

<canvas>

<!DOCTYPE html>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Video in HTML5

It's rather complicated

<video>

  • For embedding video into a webpage
  • one <video> element can link to multiple video files, the browser will choose the first video that it will actually play

<video>

<!DOCTYPE html>

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
  • The benefits of specifying the type attribute is that the browser will check it first
  • If the browser decides it can't play a particular video, it won't download the file

<video>

<!--Basic Embedding-->
<video src="somefile.ogv"></video>

<!--Specify video dimensions and enable controls-->
<video src="somefile.ogv" height="240" width="400" controls></video>

<!--Video will start downloading (but not playing) as soon as the page loads-->
<video src="somefile.ogv" height="240" width="400" preload></video>

<!--Enable Autoplay-->
<video src="somefile.ogv" height="240" width="400" autoplay></video>

HTML5 Forms

Whassup with that??

New Input Types

Backwards Compatible

<input type=email>

  • Tells the browser not to submit the form until & unless the user has given a valid email address

 

  • Multiple attribute is allowed, which means the field can be filled up by comma seperated valid email address

<input type=url>

  • To ensure the browser that the entered field is a correct URL
  • Browser may offer the user assistance and show a list of recently visited URLs

<input type=date>

  • Dates were tricky for a user to enter and therefore we relied on JavaScript solution for solutions for displaying a datepicker
  • Browsers will display a popup calendar widget
  • Browser will now also know what you mean. Previously, datepickers were just a collection of <div>s, <span>s, and links with lots of JavaScript behavior attached

Date / time related input types

<!--for calendar date pickers-->
<input type="date">

<!--for months-->
<input type="month">

<!--for weeks-->
<input type="week">

<!--for timestamps-->
<input type="timestamps">

<!--for precise/absolute date, timestamps-->
<input type="datetime">

<!--for local dates and times-->
<input type="datetime-local">

<input type=number>

  • Throws an error if the user doesn't enter a numeric value

 

  • Works with min, max and step attributes

 

  • Browsers (such as Opera) can render it as a Spinner control

<input type=range>

Renders as a slider

 

Used to be Javascript driven elements, but now the responsibility of creating accessible sliders is moved from developers to browsers vendors.

 

<input type=tel>

Expects a telephone number

 

Doesn't enforce numeric only input

<input type=color>

Allows the user to input a color value via a picker

 

Current support is very limited

New Attributes

To spice your elements

The list Attribute

  1. Hooks up with a new element <datalist>
  2. Reminiscent of a select box but user can input own values
  3. The id of the <datalist> is referenced in the value of the list attribute

The list Attribute

<input id="salutation" type="text" list="salutation">

<datalist id="salutations">
    <option label="Mr" value="Mr">
    <option label="Ms" value="Ms">
    <option label="Prof" value="Professor">
</datalist>

So, When Can We Start Using

HTML5?

TODAY!!!

Interesting Websites

The End

Questions?

@technoayan

An Introduction to HTML5

By Ayan Choudhury

Made with Slides.com

An Introduction to HTML5

HTML5 for beginners

  • 1,264

More from Ayan Choudhury