The Future in a Flash
What is HTML?
• Hypertext Markup Language
• HTML elements form the building blocks of all
websites
What is the problem?
• Browser inconsistency
• Reliance on plug-ins
What is HTML 5?
• Successor of HTML & XHTML
• Developed by WHATWG (Web Hypertext
Application Technology Working Group)
• Monitored by W3C (World Wide Web Consortium)
IS HTML5 THE FUTURE?
Semantics Video
Audio Canvas
Drag &
Drop
Local
Storage
Geolocation
Image &
Type
HTML5 — Not a “thing”
A collection of new conventions and methods
New in HTML5 — Semantics
Content is more organized, search friendly, and indexable
New in HTML5 — <Video>
Using an HTML5 Javascript Library, your videos can be played
back on the latest mobile devices and even on older browsers
that require Flash.
New in HTML5 — <Audio>
HTML5 specifies a standard way to include audio, with the audio
element.
The audio element can play sound files, or an audio stream.
New in HTML5 — <Canvas>
2D drawing platform within the browser without the need of a
plug-in such as Flash. Applications include web apps, data
visualization, animated graphics, and gaming.
New in HTML5 — Drag & Drop
(DnD) Drag and drop is one of the often used functionalities
throughout websites for various reasons.
HTML 5 allows this function to be implemented with ease.
New in HTML5 — Geolocation
Websites can benefit from knowing exactly where the user
accessing their site is from, enabling a more personalized local
experience.
New in HTML5 — Local Storage
Client-side key-value database, stored in the users browser
The users data is saved on their machine inside their browser, not
on the server
DESIGN IN HTML5
Design in HTML5 — Gradients, Transparencies,
Shadows, Rounded Corners, and Text Effects
Design in HTML 5 — Typography
More diverse, more brand friendly, more flexible for
SEO and indexing
Design in HTML5 — Gaming
Design in HTML5 — Rich Media Experience
Design in HTML5 — Rich Media Experience
Design in HTML5 — Responsive Design
HTML5 FOR MARKETERS
Better for SEO
• More specific tags to determine type of
content
• Multimedia indexing
• Better page segmentation
• More unique function with crawlability
Mobile Features
• Video integration
• Audio integration
• Better compatibility
• Higher exposure across multiple devices
Email Marketing
• Embedded video emails
• No need for plugin compatibility
• Cross browser support
Summary
• Content/Media will become more important to
SEO as HTML5 makes it easier to rank and index
• HTML 5 is important for marketing across
multiple screens/devices
• HTML 5 imagines a web that is more visually
and interactively robust
• The time to adopt is now, in order to prepare
for what is to come
THANK YOU.

Html 5

  • 1.
  • 2.
    What is HTML? •Hypertext Markup Language • HTML elements form the building blocks of all websites
  • 3.
    What is theproblem? • Browser inconsistency • Reliance on plug-ins
  • 4.
    What is HTML5? • Successor of HTML & XHTML • Developed by WHATWG (Web Hypertext Application Technology Working Group) • Monitored by W3C (World Wide Web Consortium)
  • 5.
    IS HTML5 THEFUTURE?
  • 6.
    Semantics Video Audio Canvas Drag& Drop Local Storage Geolocation Image & Type HTML5 — Not a “thing” A collection of new conventions and methods
  • 7.
    New in HTML5— Semantics Content is more organized, search friendly, and indexable
  • 8.
    New in HTML5— <Video> Using an HTML5 Javascript Library, your videos can be played back on the latest mobile devices and even on older browsers that require Flash.
  • 9.
    New in HTML5— <Audio> HTML5 specifies a standard way to include audio, with the audio element. The audio element can play sound files, or an audio stream.
  • 10.
    New in HTML5— <Canvas> 2D drawing platform within the browser without the need of a plug-in such as Flash. Applications include web apps, data visualization, animated graphics, and gaming.
  • 11.
    New in HTML5— Drag & Drop (DnD) Drag and drop is one of the often used functionalities throughout websites for various reasons. HTML 5 allows this function to be implemented with ease.
  • 12.
    New in HTML5— Geolocation Websites can benefit from knowing exactly where the user accessing their site is from, enabling a more personalized local experience.
  • 13.
    New in HTML5— Local Storage Client-side key-value database, stored in the users browser The users data is saved on their machine inside their browser, not on the server
  • 14.
  • 15.
    Design in HTML5— Gradients, Transparencies, Shadows, Rounded Corners, and Text Effects
  • 16.
    Design in HTML5 — Typography More diverse, more brand friendly, more flexible for SEO and indexing
  • 19.
    Design in HTML5— Gaming
  • 20.
    Design in HTML5— Rich Media Experience
  • 21.
    Design in HTML5— Rich Media Experience
  • 22.
    Design in HTML5— Responsive Design
  • 23.
  • 24.
    Better for SEO •More specific tags to determine type of content • Multimedia indexing • Better page segmentation • More unique function with crawlability
  • 25.
    Mobile Features • Videointegration • Audio integration • Better compatibility • Higher exposure across multiple devices
  • 26.
    Email Marketing • Embeddedvideo emails • No need for plugin compatibility • Cross browser support
  • 27.
    Summary • Content/Media willbecome more important to SEO as HTML5 makes it easier to rank and index • HTML 5 is important for marketing across multiple screens/devices • HTML 5 imagines a web that is more visually and interactively robust • The time to adopt is now, in order to prepare for what is to come
  • 28.

Editor's Notes

  • #7 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #8 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #9 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #10 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #11 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #12 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #13 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #14 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #16 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #20 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #21 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #22 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/
  • #23 http://www.flickr.com/photos/noquedanfotos/3379810763/lightbox/