HYPERTEXT MARKUP
LANGUAGE
HTML5
COS216
AVINASH SINGH
DEPARTMENT OF COMPUTER SCIENCE
UNIVERSITY OF PRETORIA
HTML
• HTML4 was not updated for a decade
• Many features, especially multimedia, was missing
• Third parties developed separate browser addons to provide new functionality
• Requires additional installation
• Vulnerable to security flaws/bugs and malware
• No standards or cross-compatibility
HTML
• HTML5 was released in 2014
• Released in parallel with CSS3
• Added a bunch of new features
• Browsers took a few years to implement the new features
• Caused addons like Adobe Flash to be discontinued
HTML
• HTML5 provided the following
• Advanced multimedia, such as video and audio players
• Added canvas that can be used to draw directly in HTML
• New ways of structuring the document, such as navigation, menus, and sections
• Many new types of inputs with built-in functionality that previously had to be done in JS
• Deprecating old attributes and HTML styling that can now be done in CSS3
• Enhanced font support and selectors through CSS3
• Better local storage, geolocation, SVG manipulation, and selectors in JS
HTML5 - INPUTS - COLOR SELECTOR
<input type="color" name="favcolor" value="#ff0000">
HTML5 - INPUTS - DATE SELECTOR
<input type="date" name="birthday">
HTML5 - INPUTS - TIME SELECTOR
<input type="time" name="currenttime">
HTML5 - INPUTS - EMAIL
<input type="email" name="myemail">
HTML5 - INPUTS - SEARCH
<input type="search" name="mysearch">
HTML5 - INPUTS - RANGE
<input type="range" min="1" max="100" value="50" name="percentage">
HTML5 – PAGE STRUCTURE
• Many new objects for structuring a page and handling navigation:
• header
• footer
• article
• section
• nav
• menu
• dialog
• figure
• progress
• Many more …
HTML5 – API
• HTML5 added new API features
• Mainly accessible through JavaScript
• Geolocation: determine the geographical location of the client
• Drag-and-drop: drag files into the browser and drop them on the website
• Web Storage: save data locally for later use (similar to cookies)
• Web Workers: sort-of multithreading for HTML and JavaScript
• Server Sent Events: the server can update the client page (similar to sockets)
HTML5 - VIDEO
• Adds a video clip <video width="300" height= " 200" controls>
<source src="video.mp4" type="video/mp4">
• The video codec is <source src="video.webm" type="video/webm">
depended on browser Your browser does not support the video tag.
</video>
support
HTML5 – VIDEO CODECS (NATIVE)
Browser MP4 WebM Ogg Other
Firefox Yes Yes Yes Depends
Chrome Yes Yes Yes Depends
Opera Yes Yes Yes Depends
Safari Yes No No Probably not
Internet Yes No No Probably not
Explorer
HTML5 - VIDEO CODECS
• MP4
• Widely supported across the web and standalone media players
• Developed by the MPEG group in 2001 (also create MP3)
• Supports x265: higher compression, smaller file size
• New versions support auto resolutions: if your connection is slow, it will automatically
decrease the quality to avoid buffering
• WebM
• Developed by Google in 2010
• Royalty-free video and audio
• Based on Matroska (MKV) profile
• Designed specifically for web-based streaming
HTML5 - VIDEO CODECS
• Ogg
• Developed by the Xiph.Org Foundation in 1993 (also create FLAC)
• Unrestricted use without patents
• Designed for high quality streaming
HTML5 - YOUTUBE
<iframe width="420" height="250"
src="https://www.youtube.com/embed/l9jOJk30eQs"></iframe>
HTML5 - AUDIO
• Adds an audio clip <audio controls>
<source src="audio.mp3" type="audio/mpeg">
• The video codec is
<source src="audio.ogg" type="audio/ogg">
depended on browser Your browser does not support the audio element.
support </audio>
HTML5 - AUDIO CODECS
Browser MP3 Wav Ogg Other
Firefox Yes Yes Yes Depends
Chrome Yes Yes Yes Depends
Opera Yes Yes Yes Depends
Safari Yes Yes No Probably not
Internet Yes No No Probably not
Explorer
HTML5 - AUDIO CODECS
• MP3
• Created by the MPEG group
• Lossy compression, small file sizes, perfect for streaming
• Wav
• Typically, PCM does not require decoding
• Lossless, no compression, large files sizes, should be avoided for streaming
• Ogg
• Created by the Xiph.Org Foundation
• Also has lossless compression formats
• Most are lossy compression, small file sizes, perfect for streaming
HTML5 - CANVAS
• Allows drawing in HTML
• Requires JavaScript to manipulate he canvas
• Can be used for many things:
• Drawing text
• Drawing graphics and graphs
• Create animations
• Interactive experiences such as games
<canvas id="myCanvas" width="200" height="100"></canvas>
HTML5 - CANVAS
• Examples
HTML5 - GOOGLE MAPS
• Add Google Maps
• Not really a new HTML element,
but addition is now simplified
• Requires configuration through
JavaScript
HTML5 - INTEGRATION
• Integrate widgets from other companies
• Uses iframes or divs with some supporting JavaScript
• Code snippets can be copied from company websites
• Example: Facebook like button, Twitter feed, IMDb rating
HTML5 - INTEGRATION
• Integrate widgets from other companies
• Uses iframes or divs with some supporting JavaScript
• Code snippets can be copied from company websites
• Example: Facebook like button, Twitter feed, IMDb rating
• Do a Google search for these widgets
HTML5 - • Companies have a website where you
INTEGRATION can configure the widget and then get
a code snippet
