HTML5
CSS Gradient
.gradientBox { background: linear-gradient(top, #ffb260 0%,#ff7f13 100%); }
Defining Sections of a Web Page with <article> Element
<article> - a component of a page that consists of a self-contained portion intended to be independently distributable or reusable. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content; Here is an example of a blog post showing an article followed by two comments: <article><header><h1>Very First Rule of Life</h1><p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p></header><p>There's a mic anywhere</p><p>...</p><section><1>comments</h1> <article><footer><p>Posted by: George Washington</p><p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p></footer><p>Yeah! Especially when talking about your lobbyist friends!</p></article> <article><footer><p>Posted by: George</p><time><time pubdate datetime="2009-10-10T19:15-08:00"></time></p></footer><p>Same first name</p> </article></section></article>
audio example
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Browser doesn't support the audio element </audio>
Canvas Line Drawing Example
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">....</canvas var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(20, 100); ctx.lineTo(70, 100); ctx.stroke();
Old vs New Document Structure
<div id="header"> <div id="nav"> <div class="article"><div class="section"></div> <div id="sidebar"> <div id="footer"> <header> <nav> <article><section></article> <aside> <footer>
localstorage page count example
<div id="result"></div> if (typeof(Storage) !== "undefined") { if (localStorage.pagecount) { localStorage.pagecount = Number(localStorage.pagecount)+1; } else { localStorage.pagecount = 1; } document.getElementById("result").innerHTML = "You have visited this page " + localStorage.pagecount + " time(s)."; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; }
Defining Sections of a Web Page with <nav> Element
<nav>: a section of a page that links to other pages or to parts within the page; a section with navigation links In the following example, the page has several places where links are present, but only one of those places is considered a navigation section. <body><header> <h1>Wake up sheeple!</h1> <p><a href="news.html">News</a> - <a href="blog.html">Blog</a> - <a href="forums.html">Forums</a></p> <p>Last Modified: <time>2009-04-01</time></p> <nav><h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things needed to wake up for today</a></li> <li><a href="successes.html">Sheep manage to wake up</a></li> </ul> </nav> </header> <div><article><header><h1>My Day at the Beach</h1>
New HTML5 Semantic Elements
<section> ... </section> <article> ... </article> (independent, self-contained content, i.e. forum post/blog post/newspaper article) <header> ... </header> <footer> ... </footer> <nav><a></a><a></a></nav> (set of navigation links) <aside> ... </aside> (some content aside from the content it is placed in--like a sidebar) <figure><img><figcaption>caption</figcaption></figure> (groups an image and a caption) <mark>...</mark> (marked/highlighted text) <time>...</time> (defines date/time)
video example
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Browser doesn't support the video tag. </video>
Microdata
Annotates the DOM with scoped name/value pairs from custom vocabulary Microdata property values come from: <meta>: content attribute, <audio>/<embed>/<iframe>/<img>/<source>/<video>: src attribute, <a>/<area><link>: href attribute, <object>: data attribute, <time>: datetime attribute, all other elements: text content <section itemscope itemtype="http://data-vocabulary.org/Person"> <h1 itemprop="name">Mitali</h1> <img itemprop="photo" src="http://www.example.com/photo.jpg" alt="[me smiling]"> <a itemprop="url" href="http://diveintomark.org/">dive into</a> Person, Organization, Event, Review Google crawlers can learn from this
<canvas> element coordinates
Canvas is a 2D grid. The coordinate (0, 0) is in the upper left corner of the canvas. Along the X-axis values increase towards the right edge of the canvas. Along the Y-axis values increase towards the bottom edge of the canvas. To draw straight lines in pencil, you use the following two methods: moveTo(x, y) moves pencil to specified starting point, lineTo(x, y) draws a line to the specified ending point. stroke() makes the line visible
Canvas vs SVG
Canvas: resolution dependent//SVG: resolution independent Canvas: No support for event handlers//SVG: support for event handlers Canvas: Poor text rendering capabilities, you can save resulting image as .png or .jpg//SVG: Best suited for applications with large rendering areas (Google Maps), slow rendering if complex(anything that uses the DOM a lot will be slow) Canvas: well suited for graphic-intensive games//SVG: Not suited for game applicaitons
New HTML5 Capabilities
Drag files directly into your browser (try with an image) Interactive canvas gradients: move mouse across gradients then view source Content editable: edit some text and then restore Geolocation
HTML5 Removed Elements
Following elements are not in HTML5 because their effect is purely presentational and therefore better handled by CSS: basefont, big, center, font, s, strike, tt, u Following elements are not in HTML5 because their usage affected usability and accessibility for the end user in a negative way: frame, frameset, noframes Following elements are not included because they have not been used often, created confusion, or can be handled by other elements: acronym is not included b/c it has created lots of confusion. Authors are to use abbr for abbreviations. applet has been obsolete in favor of object. isindex usage can be replaced by usage of form controls. dir has been obsoleted in favor of ul.
Video Codecs (recent development)
H.264 vs WebM video "war" has ended. On Mar 2012 Firefox CTO "capitulated" and decided to support H.264. HTML5/H.264 now supported by YouTube. On Mar 7, 2013, Google admitted its VP8/WebM codec infringest MPEG H.264 patents, and agreed to pay to license H.264 patents. As of Jan 2016, H.264 reigns supreme, Flash video on life support. On Jul 2017, Adobe system "retired" Flash by end of 2020.
HTML5 Semantic Elements vs HTML
HTML5 Doctype: <!DOCTYPE html> (previously <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ) Root element: <html lang="en"> (previously <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">) Character encoding: <meta charset="utf-8" /> (previously <meta http-equiv="Content-Type" content="text/html; charset=utf-8">) Rel=stylesheet: <link rel="stylesheet" href="style.original.css" /> (previously <link rel="stylesheet" href="style-original.css" type="text/css" />)
Video on the web
HTML5 defines a standard way to embed video in a web page, using a <video> element. Video container files include video and audio files. There are lots of competing container files e.g. MPEG4 compressed video (mp4, m4v), QuickTime (.mov), Flash Video (.flv) from Adobe, Ogg (.ogv) open source, WebM (VP8/VP9 video + Vorbis audio) from Google, Audio Video Interleave (.avi) invented by Microsoft
HTML5 Document Structure
HTML5 introduces a whole set of new elements that make it much easier to structure pages. By identifying the purpose of sections in the page using specific sectioning elements, assistive technology (e.g. for the blind) can help the user to more easily navigate the page. For example, they can easily skip over the navigation section or quickly jump from one article to the next without the need for authors to provide skip links. Authors also benefit because replacing many of the divs in the document with one of the several distinct elements can help make the source code clearer, easier to author, and easier to scrape.
Background
HTML5 is being developed as the next major revision of HTML. The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification in June 2004. HTML5 supersedes HTML 4.01, XHTML 1.0, and XHMTL 1.1 As of 12/17/2012, HTML5 Definition is "Complete". HTML5 vocabulary and associated APIs "recommendations" available. HTML Canvas 2D Context "Recommendation" available, Latest versions of Safari, Chrome, Firefox, Opera, Edge, and IE all have some support for HTML5 but varies across the browsers. HTML 5.2 2nd Edition "Recommendation" available
Audio
IE 9+ -> MP3 Chrome 6+ -> MP3, Wav, Ogg Firefox 3.6+ -> Wav, Ogg Safari 5+ -> MP3, Wav Opera 10+ -> Wav, Ogg <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
Audio Codecs
Like lossless video, lossless audio is really too big to put on the web. The audio codec specifies how to decode the audio stream and turn it into digital waveforms and your speakers then turn into sound. On the web, there are really only 3 audio codecs you need to know about: MP3: MP3s can contain up to 2 channels of sound. They can be encoded at different bitrates: 64 kbps, 128 kbps, 192 kbps, and a variety of others from 32 to 320. Higher bitrates mean larger file sizes and better quality audio. Advanced Audio Encoding (AAC and AAC+): It is the default format for Apple's iTunes, it supports up to 48 channels of sound Vorbis: Usually comes in an Ogg container, Android phones can play Vorbis audio
Cache Manifest
Manifest file is a list of all the resources that your web application might need to access while it's disconnected from the network. In order to bootstrap process of downloading and caching these resources, you need to point to the manifest file, using a manifest attribute on your <html> element. <!DOCTYPE html><html manifest="/cache.manifest"><body></body></html> In .htaccess: AddType text/cache-manifest .manifest Cache Manifest file: CACHE MANIFEST FALLBACK: / /offline.html NETWORK: // online white list /tracking.cgi CACHE: // explicit /clock.css /clock.js /clock-face.jpg
Major New Elements in HTML5
New semantic elements like <header>, <footer>, <article>, <section> <video> and <audio> that you can embed on your web pages without resorting to 3rd party plug-ins. Canvas: a two-dimensional drawing surface that you can program with JavaScript Scalable vector graphics (SVG) Geolocation, whereby visitors can choose to share their physical location with your web application Persistent local storage without resorting to 3rd party plugins Offline web applications that work even after network access is interrupted Improvements to HTML web forms Microdata, which lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. New APIs for complex web applications including support for mobile devices. New Elements and attributes Support for CSS3
Geolocation
No detection, no error handling, no options: if (Modernizr.geolocation) navigator.geolocation.getCurrentPosition(show_map); else { //no native support } function show_map(position) { var lat = position.coords.latitude; var long = position.coords.longitude; } position object: coords.latitude (double, decimal degrees), coords.longitude (double, decimal degrees), coords.altitude (double or null, meters above reference ellipsoid), coords.accuracy (double, meters), coords.altitudeAccuracy (double or null, meters), coords.heading (double or null, degrees clockwise from true north), coords.speed (double or null, meters/second), timestamp (DOMTimeStamp, like a Date( ) object) Error Handling: navigator.geolocation.getCurrentPosition(show_map, handle_error) error callback function called with PositionError: code (short, enumerated value), message (DOMString, not intended for end users). PERMISSION_DENIED (1) (don't share button) POSITION_UNAVAILABLE (2) (network down) TIMEOUT (3) (network up but takes too long) function handle_error(err) { if (err.code == 1) { // user said no! } }
Session Storage
Session storage is designed for scenarios where the user is carrying out a single transaction but could be carrying out multiple transactions in different windows at the same time. To address this, this specification introduces the sessionStorage IDL attribute (An IDL attributes determines the behavior of script data). Sites can add data to the session storage, and it will be accessible to any page from the same site opened in that window. The sessionStorage object is equal to the localStorage object *except* it storages data for only one session. The data is deleted when the user closes the specific browserr tab. For example, a page could have a checkbox that the user ticks to indicate that he wants insurance: <label> <input type="checkbox" onchange="sessionStorage.insurance = checked ? 'true' : ''"> I want insurance on this trip. </label> A later page could then check, from script, whether the user had checked the session checkbox or not: if (sessionStorage.insurance) { ... } If the user had multiple windows opened on the site, each one would have its own individual copy of the session storage object.
<canvas> element - drawing
The <canvas> element is "a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly." A canvas is a rectangle in your page where you can use JavaScript to draw anything you want A <canvas> element has no content and no border of its own. You can have more than one <canvas> element on the same page Each canvas will show up in the DOM, and each canvas maintains its own state. If you give each canvas an id attribute, you can access them just like any other element. E.g. if one adds an id attribute, e.g. <canvas id="mycanvas" width="300" height="225"></canvas> Now you can easily find that <canvas> element in the DOM, e.g. var a_canvas = document.getElementById("myCanvas"); Every canvas has a drawing context. Once your have found the <canvas> element in DOM you can call its getContext() method, you must pass "2d" to method. var ctx = a_canvas.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(20, 20, 150, 100);
<svg> Element - Drawing
The <svg> element is a container for SVG graphics. Has several important methods for drawing paths, boxes, circles, text, and graphics images. Supported by all major browsers. Language for describing 2D graphics in XML. Because SVG is XML based, every element is available in the SVG DOM. If attributes of an SVG object are changed, the browser can automatically rerender the shape.
Using attributes preload and autoplay for Video
The preload attribute tells the browser that you would like to start downloading the video file as soon as the page loads. This makes sense if the entire point of the page is to view the video. On the other hand, if it's just supplementary material that only a few visitors will watch, then you can set preload to none to tell the browser to minimize network traffic. Here's an example of a video that will start downloading (but not playing) as soon as the page loads: <video src="pr6.webm" width="320" height="240" preload></video> Here's an example of a video that will not start downloading as soon as the page loads: <video src="pr6.webm" width="320" height="240" preload="none"></video> Autoplay attribute tells the browser that you would like it to start downloading the video file as soon as the page loads AND you would like it to start playing the video automatically as soon as possible. Here's an example of a video that will start downloading and playing as soon as possible after the page loads <video src="pr6.webm" width="320" height="240" autoplay></video> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support video tag </video>
Video Codecs
There are lossy and lossless video codecs. Lossless video is much too big to be useful on the web. A lossy video codec means that info is being irretrievably lost during encoding. Popular video codecs are: MPEG-4 (also known as MPEG4 Pt. 2), H.264 (also known as MPEG4 Pt 10 aka Advanced Video Coding AVC), H.265 (successor to H.264 doubles video compression an supports 8K UHD aka High Efficiency Video Coding HEVC or MPEG-H pt.2 used in FaceTime), Theora, VP8 (open source codec formerly from On2 now Google WebM), VP9 (successor to VP8 doubles video compression), Sorenson Spark (H.263 variant from Adobe). H.264 standard is split into "profiles," defining a set of optional features that trade complexity for file size. Higher profiles use more features, offer better visual quality at smaller file sizes, take longer to encode, and require more CPU power to decode in real time. Apple's iPhone 8/8 Plus/X supports playback of H.264 in 1080p (60 fps), MPEG4 (30 fps), 4K (30 fps) with High Profile 4.2, also supports H.265 for FaceTime; Apple TV 4K (5th gen.) set-top box supports H.264 video up to 2160p (60 fps) and MPEG-4 video (30 fps), Main 10 profile; and Adobe Flash on a desktop PC supports Baseline, Main, and High profiles. YouTub uses H.264 to encode HD videos (Google dropped Flash, replaced by HTML5 video).
Drawing Context
There's a whole group of properties and methods devoted to drawing rectangle: the fillStyle property can be a CSS color, a pattern, or a gradient. The default fillStyle is solid black but you can set it to whatever you like. A gradient shows a difference in concentrations over an area, often using color intensity. Createlineargradient(x0, y0, x1, y1) returns a canvas gradient object starting at (x0, y0) and ending at (x1, y1). addColorStop(offset, color) adds a color stop with the given color to the gradient at the offset; 0 offset is at one endpoint and 1 offset is at the other endpoint. fillRect(x, y, width, height) draws a rectangle with the current fill style clearRect(x, y, width, height) clears pixels in the specified rectangle. var grd = ctx.createLinearGradient(0, 0, 170, 0); grd.addColorStop(0, "black"); grd.addColorStop(0.5, "red"); grd.addColorStop(1, "white"); ctx.fillStyle = grd; ctx.fillRect(20, 20, 150, 100);
HTML Markup of Video
To insert a video file in a web page use the <video> element <video src="pr6.webm" width="320" height="240"></video> The <video> element has methods like play() and pause() ad a read/write property called currentTime. There are also read/write volume and muted properties. You can tell the browser to display a built-in set of controls. To do this, just include the controls. To do this, just include the controls attribute in your <video> tag. <video src="pr6.webm" width="320" height="240" controls></video>
HTML 5 - Removed Attributes - Handled by CSS
align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, and tr alink, tink, text, and vlink attributes on body background attribute on body bgcolor attribute on table, tr, td, th, and body border attribute on table, img, and object cellpadding and cellspacing attributes on table char and charoff attributes on col, colgroup, tbody, td, tfoot, th, thead, and tr clear attribute on br compact attribute on dl, menu, ol, ul frame attribute on table frameborder attribute on iframe height attribute on td and th hspace and vspace attributes on img and object marginheight and marginwidth attributes on iframe noshade attribute on hr nowrap attribute on td and th width attribute on hr, table, td, th, col, colgroup, and pre scrolling attribute on iframe size attribute on hr, input, and select type attribute on li, ol, and ul valign attribute on col, colgroup, tbody, td, tfoot, th, thead, and tr rules attribute on table
Video attributes
autoplay->value=autoplay->specifies that video will start playing as soon as it is ready controls->value=controls->specifies that controls will be displayed, such as play button height->value=[pixels]->specifies the height of the video player loop->value=loop->specifies that the media file will start over again, every time it is finished preload->value=preload->specifies that the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present. src->value=[url]->specifies that the URL of the video to play width->value=[pixels]->specifies the width of the video player
localStorage
localStorage is a client-side key-value database: data is stored in users browser and remains there even across sessions (open/close browser), data is only available when on that machine and in that browser, localStorage is per browser not per computer, localStorage only supports storing of strings. Check that it exists with if (Modernizr.localstorage) {... <!DOCTYPE html><html><head><scrpt> function clickCounter() { if (typeOf(Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; } else { localStorage.clickCount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)."; } else { document.getElementById("result").innerHTML = "Sorry your broser doesn't support web storage..."; } </scrpt> </head> <body> <p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result"></div> </body></html>
Form Improvements
placeholder attribute autofocus attribute <input type="email"> <input type="url"> <input type="number" min="0" max="10" step="2" value="6"> <input type="range" min="0" max="10" step="2" value="6"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="month"> <input type="week"> <input type="time"> <input type="search"> <input type="color"> validation on by default, turn it off with <form novalidate>...</form> required attribute
LocalStorage Methods
var foo = localStorage.getItem("bar"); localStorage.setItem("bar", foo); var foo = localStorage["bar"]; localStorage["bar"] = foo; localStorage.removeItem("bar"). localStorage.clear();