SlideShare una empresa de Scribd logo
1 de 96
Descargar para leer sin conexión
An Introduction to
     HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
Web Hypertext Application Technology Working Group
                         -
                   WHATWG
Web Hypertext Application Technology Working Group
                         -
                   WHATWG
An Introduction To HTML5
What is HTML5?
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
Backwards compatibility
Progressive enhancement
<!DOCTYPE html>
HTML or XHTML syntax?
An Introduction To HTML5
<DIV>A monkey</DIV>
<p id=john>John’s P</p>

<input type=text>
<input type="text">
<input type="text" />
<DIV>A monkey</DIV>
<p id=john>John’s P</p>

<input type=text>
<input type="text">
<input type="text" />
An Introduction To HTML5
As XHTML



<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">


MUST be application/xhtml+xml or application/xml

<noscript>Not in XHTML</noscript>
An Introduction To HTML5
<audio>


  <aside>       <nav>
                           <section>

           <hgroup>      <article>
<figure>
                            <time>
                      <header>
  <video>
                        <figcaption>
       <footer>
<input type="color">      <input type="range">


<input type="number">     <input type="email">

<input type="time">
                          <input type="search">
<input type="month">

                          <input type="tel">
<input type="date">


                          <input type="datetime">
<input type="week">

<input type="datetime-local">

<input type="url">
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 example</title>
</head>

<body>

    <div id="container">
        <header role="banner">
            <h1>HTML5 example</h1>
            <p>A page with valid simple HTML5 markup complemented with WAI-ARIA landmark roles for accessibility.</p>
        </header>

          <nav role="navigation">
              <ul>
                   <li><a href="http://getfirefox.com">Download Firefox</a></li>
                   <li><a href="http://robertnyman.com/">Robert's talk</a></li>
              </ul>
          </nav>

          <article id="main" role="main">
              <section id="main-content">
                  <header>
                      <hgroup>
                           <h2>A title</h2>
                           <h3>Subtitle to the above title</h3>
                      </hgroup>
                  </header>

                  <article>
                      <p>Some content, created <time datetime="2010-01-31">January 31st 2010</time>.</p>
                  </article>
                  <article>
                      <p>Some more content - I guess you get the drift by now.</p>
                  </article>
              </section>

              <aside role="complementary">
                  This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action.
              </aside>
          </article>

        <footer id="page-footer" role="contentinfo">
            Created by <a href="http://robertnyman.com/">Robert Nyman</a>
        </footer>
    </div>



</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 example</title>
</head>
<header role="banner">
  <h1>HTML5 example</h1>
  <p>
    A page with valid simple
    HTML5 markup complemented
    with WAI-ARIA landmark
    roles for accessibility.
  </p>
</header>
<nav role="navigation">
  <ul>
     <li>
       <a href="http://getfirefox.com">
          Download Firefox
       </a>
     </li>
     <li>
       <a href="http://robertnyman.com/">
          Robert's talk
       </a>
     </li>
  </ul>
</nav>
<article id="main" role="main">
   <section id="main-content">
       <header>
          <hgroup>
              <h2>A title</h2>
              <h3>Subtitle to the above title</h3>
          </hgroup>
       </header>

      <article>
         <p>
             Some content, created <time datetime="2010-01-31">January 31st 2010</time>.
         </p>
      </article>

      <article>
         <p>Some more content - I guess you get the drift by now.</p>
      </article>

   </section>



   <aside role="complementary">
       This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action.
   </aside>
</article>
<footer id="page-footer" role="contentinfo">
  Created by <a href="http://robertnyman.com/">Robert Nyman</a>
</footer>
An Introduction To HTML5
<aside aria-live="polite" aria-relevant="additions" aria-atomic="true">
   Some sidebar content
</aside>
WAI-ARIA Authoring Practices 1.0
              Live Regions
                   -
http://www.w3.org/WAI/PF/aria-practices/
             #LiveRegions
Video
<video src="swedish-flag.ogv"></video>
<video src="swedish-flag.ogv" controls
  width="320" height="240">
</video>
<video controls>
  <source src="swedish-flag.mp4">
  <source src="swedish-flag.ogv">
  <p>
    Sorry, your web browser doesn't
    support the video element.
  </p>
</video>
An Introduction To HTML5
<video controls>
    <source src="http://robertnyman.com/video/swedish-flag.mp4">
    <source src="http://robertnyman.com/video/swedish-flag.ogv">
    <object width="425" height="340" type="application/x-shockwave-flash"
data="http://pics.robertnyman.com/ria/ShizVidz-2010012201.swf">
         <param name="movie" value="http://pics.robertnyman.com/ria/
ShizVidz-2010012201.swf">
         <param name="allowFullScreen" value="true">
         <param name="flashVars"
value="s=ZT0xJmk9MzE5NjcyNDUwJms9UUVOdUomYT01MjU0ODc5X21uWFdIJnU9cm9iZXJ0b
nltYW4=">
    </object>
    <p>Sorry, your web browser doesn't support, well, anything...</p>
</video>
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
“The WebM project is dedicated to developing a
high-quality, open video format for the web that
is freely available to everyone”
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
Canvas
<canvas id="my-canvas" width="200" height="200">
    I am canvas
</canvas>
var canvas = document.getElementById("my-canvas"),
    context = canvas.getContext("2d");
var canvas = document.getElementById("my-canvas"),
    context = canvas.getContext("2d");

context.fillStyle = "#f00";
context.fillRect(0, 0, 100, 100);
context.strokeStyle = "#00f";
context.strokeRect(25, 25, 50, 50);
An Introduction To HTML5
var canvas5 = document.getElementById("my-canvas-5"),
    context5 = canvas5.getContext("2d"),
    img = document.createElement("img");

img.addEventListener("load", function () {
    context5.drawImage(img, 0, 0, 600, 200);
    // Get canvas content as a base64 image
    var base64Img = canvas5.toDataURL("image/png");
}, false);

img.setAttribute("src", "view.jpg");
data:image/png;base64,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
HTML5 Canvas for Internet Explorer
                -
          explorercanvas
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
History API
var url = "http://robertnyman.com",
title = "My blog",
state = {
    address : url
};

window.history.pushState(state.address, title, url);
window.history.replaceState(state.address, title, url);
Web Sockets
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
var ws = new WebSocket("ws://robertnyman.com/wsmagic");

// Send data
ws.send("Some data");

// Close the connection
ws.close();
var ws = new WebSocket("ws://robertnyman.com/wsmagic");

// When connection is opened
ws.onopen = function () {
    console.log("Connection opened!")
};

// When you receive a message
ws.onmessage = function (evt) {
    console.log(evt.data);
};

// When you close the connection
ws.onclose = function () {
    console.log("Connection closed");
};

// When an error occurred
ws.onerror = function () {
    console.log("An error occurred")
};
web-socket-js
 Socket.IO
Offline web applications

     Drag & drop
                       File API


Cross-document messaging
                           Web workers

        Editing - contenteditble


    Web storage
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
Sjoerd Visscher - HTML5 Shiv
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 IE fix</title>
    <script>document.createElement("article");</script>
</head>

<body>

    <article>Article content</article>

</body>
</html>
Remy Sharp - HTML5.js
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
An Introduction To HTML5
Robert Nyman
                                                                 robertnyman.com/speaking/
                                                                  robertnyman.com/html5/
                                                                   Twitter: @robertnyman
Pictures:

Ninja Turtle: http://www.originalprop.com/blog/2008/03/20/teenage-mutant-ninja-turtles-costume-                 Designed to exclude: http://www.ij.org/index.php?option=com_content&task=view&id=2603&Itemid=249
restoration/                                                                                                    Canvas: http://morethananelectrician.wordpress.com/2009/08/22/old-paint-but-a-new-canvas/
Bruce Willis: http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4-million-dollars.html            Excited: http://www.flickr.com/photos/48600103384@N01/3679671408
Swedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html                   History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--Pictures/Griffin-Family-History.htm
Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html                                           Sockets: http://www.gigaweb.com/products/view/31681/plug-socket-adult-costume.html
Smurfette in car: http://www.schleich-s.com/cms_schleich/cms_bilder/detail/40265.jpg                            AJAX: http://www.aqlanza.com/technologies01.html
Baby smurf one: http://images.esellerpro.com/13/I/106/33/baby%20A.jpg                                           Comet: http://www.blogiversity.org/blogs/cstanton/archive/2009/12/16/revealing-hidden-comet-strikes.aspx
Baby smurf two: http://www.arbgames.com.au/images/T/Smurf%20Baby%20With%20Teddy.jpg                             Flash: http://www.zerofractal.com/assets/error-flash.jpg
History (Robots): http://world.honda.com/ASIMO/history/image/top/title.jpg                                      You look nice today: http://laughingsquid.com/you-look-nice-today-a-twitter-induced-podcast/
2001: http://www.rense.com/general7/alchemkubrick.htm                                                           Yes, we can!: http://www.educationuk.org/pls/hot_bc/obj_pls_image?p_img_id=18470
W3C keys: http://www.w3.org/2008/Talks/1120-Budapest-WAIAGE/Overview.html                                       Pros and cons: http://www.mimifroufrou.com/scentedsalamander/2009/03/ifra_seminar_the_pros_cons_of.html
Mozilla logo: http://www.w3.org/2008/security-ws/papers/mozilla.html                                            Awesome!: http://randazza.wordpress.com/2009/02/17/competing-views-on-the-auto-admit-story-define-
Apple logo: http://www.mobilewhack.com/iphone-helps-apples-profits-soar-to-new-heights/                          awesome-2/
Google logo: http://userlogos.org/node/1120                                                                     Google wave logo: http://mediesverige.se/?p=470
Free!: http://trendwatching.com/trends/freelove.htm                                                             Google start page: http://www.google.com/press/images.html#productimages
Small dog/big dog: http://jaybot7.com/blog/wp-content/uploads/2009/09/bigcompany.jpg                            Strict teacher: http://teacherpictures.com/
HTML5 man: http://poomblox.net/2009/12/06/experience-html5-without-having-to-wait-13-years/                     Hands in the sky (affirmation): http://www.academyofawakening.com.au/affirmation_cd.htm
iPad spoof: http://failblog.org/2010/01/27/name-fail-photoshop-win/                                             Failure: http://www.hennessy.id.au/quentingeorge/archives/000378.html
Accessibility fail: http://failblog.org/2008/11/13/accessibility-fail/                                          IE 9: http://www.redmondpie.com/internet-explorer-9-to-be-announced-at-pdc-9140118/
Open API: http://www.socialsignal.com/news/2007/07/31/open-api                                                  Someone is wrong on the Internet: http://xkcd.com/386/
Backwards compatibility: http://www.aeropause.com/wordpress/archives/images/2009/03/                            Firefox: http://www.flickr.com/photos/tedion/3966234643/
backwardscompatibility.jpg                                                                                      Google Chrome: http://www.flickr.com/photos/tedion/3966233919/
Progressive enhancement: http://www.flickr.com/photos/cole007/4187641210/                                        Safari: http://www.rapidshareindex.com/Apple-Safari-v4-0-3-Portable_284132.html
Choice: http://www.naset.org/uploads/pics/choice.gif                                                            Opera: http://www.geek.com/wp-content/uploads/2009/11/Opera_512x512.png
Mixed martial arts: http://thegreatgeekmanual.com/blog/t-shirt-of-the-week-mixed-martial-arts-and-crafts        Internet Explorer trash: https://www.adaptavist.com/download/attachments/28999748/ie6trash.png
Ok icon: http://www.axialis.com/objects/ip_icon_02.shtml                                                        Darth Vader: http://threekidcircus.com/threekidcircus/archives/2009/09/darth_jenny.html
Flowers: http://successisnotanoption.tumblr.com/post/596574399/no-known-provenance-for-the-image-               This way/that way: http://www.fresheventure.com/77/internet-vs-offline-business-ownership/
stole-it-off                                                                                                    Don't worry, be happy: http://amiestreet.com/music/the-hit-co/don-t-worry-be-happy/
Shiny: http://punditkitchen.files.wordpress.com/2008/09/political-pictures-sarah-palin-john-mccain-look-shiny-   Squirrels: http://pictures.todaysbigthing.com/2010/03/08
object.jpg
Accessibility success: http://www.access-it-events.org/success.of.access-it.2009.php
Video: http://www.praxmatrix.com/video.php

Más contenido relacionado

La actualidad más candente

Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overviewJacob Nelson
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introductiondynamis
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtmlsagaroceanic11
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New FeaturesAta Ebrahimi
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examplesAlfredo Torre
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Aaron Gustafson
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5Jamshid Hashimi
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete ReferenceEPAM Systems
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Zi Bin Cheah
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
 

La actualidad más candente (20)

Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtml
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Html5 Basic Structure
Html5 Basic StructureHtml5 Basic Structure
Html5 Basic Structure
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Html 5
Html 5Html 5
Html 5
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 

Destacado

Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3Gopi A
 
HTML5: a quick overview
HTML5: a quick overviewHTML5: a quick overview
HTML5: a quick overviewMark Whitaker
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptBryan Basham
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An IntroductionManvendra Singh
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebRobin Hawkes
 
HTML5, CSS3 & Responsive Design
HTML5, CSS3 & Responsive DesignHTML5, CSS3 & Responsive Design
HTML5, CSS3 & Responsive DesignFawzia Essa
 
html5 an introduction
html5 an introductionhtml5 an introduction
html5 an introductionvrt-medialab
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5Taegon Kim
 
What is hot on the web right now - A W3C perspective
What is hot on the web right now - A W3C perspectiveWhat is hot on the web right now - A W3C perspective
What is hot on the web right now - A W3C perspectiveArmin Haller
 

Destacado (20)

html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
HTML5: a quick overview
HTML5: a quick overviewHTML5: a quick overview
HTML5: a quick overview
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Js ppt
Js pptJs ppt
Js ppt
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
Introduction to PHP
Introduction to PHPIntroduction to PHP
Introduction to PHP
 
Społeczny Gisterek Makuch
Społeczny Gisterek MakuchSpołeczny Gisterek Makuch
Społeczny Gisterek Makuch
 
HTML5, CSS3 & Responsive Design
HTML5, CSS3 & Responsive DesignHTML5, CSS3 & Responsive Design
HTML5, CSS3 & Responsive Design
 
Migrate Your E-learning Courses to HTML5 The Right Way!
Migrate Your E-learning Courses to HTML5 The Right Way!Migrate Your E-learning Courses to HTML5 The Right Way!
Migrate Your E-learning Courses to HTML5 The Right Way!
 
html5 an introduction
html5 an introductionhtml5 an introduction
html5 an introduction
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
What is hot on the web right now - A W3C perspective
What is hot on the web right now - A W3C perspectiveWhat is hot on the web right now - A W3C perspective
What is hot on the web right now - A W3C perspective
 

Similar a An Introduction To HTML5

HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1Robert Nyman
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事Sofish Lin
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateInventis Web Architects
 
HTML5 tags.ppt
HTML5 tags.pptHTML5 tags.ppt
HTML5 tags.pptabcxyz1337
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!Coulawrence
 
Darwin web standards
Darwin web standardsDarwin web standards
Darwin web standardsJustin Avery
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Sho Ito
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bagstuplum
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)博史 高木
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
Beginning Html 5 Presentation
Beginning Html 5 PresentationBeginning Html 5 Presentation
Beginning Html 5 PresentationUsman Saleem
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experimentsguestd427df
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developersHernan Mammana
 

Similar a An Introduction To HTML5 (20)

HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
Html5
Html5Html5
Html5
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-template
 
HTML5
HTML5HTML5
HTML5
 
HTML5 tags.ppt
HTML5 tags.pptHTML5 tags.ppt
HTML5 tags.ppt
 
What is HTML5?
What is HTML5?What is HTML5?
What is HTML5?
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
 
Darwin web standards
Darwin web standardsDarwin web standards
Darwin web standards
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)
 
Front end ++: seo e flexbox
Front end ++: seo e flexboxFront end ++: seo e flexbox
Front end ++: seo e flexbox
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Beginning Html 5 Presentation
Beginning Html 5 PresentationBeginning Html 5 Presentation
Beginning Html 5 Presentation
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 

Más de Robert Nyman

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?Robert Nyman
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Robert Nyman
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google DaydreamRobert Nyman
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the WebRobert Nyman
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016Robert Nyman
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016Robert Nyman
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaRobert Nyman
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & productsRobert Nyman
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Robert Nyman
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanRobert Nyman
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...Robert Nyman
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...Robert Nyman
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulRobert Nyman
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goRobert Nyman
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilitiesRobert Nyman
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the NordicsRobert Nyman
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?Robert Nyman
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupRobert Nyman
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiRobert Nyman
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiRobert Nyman
 

Más de Robert Nyman (20)

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google Daydream
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the Web
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & products
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilities
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the Nordics
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
 

Último

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 

Último (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 

An Introduction To HTML5

Notas del editor

  1. Moving away from W3C
  2. Moving away from W3C
  3. Moving away from W3C
  4. New semantics
  5. Accessibility
  6. New semantics
  7. New semantics
  8. New semantics
  9. HTML or XHTML?
  10. HTML or XHTML?
  11. HTML or XHTML?
  12. HTML or XHTML?
  13. HTML or XHTML?
  14. HTML or XHTML?
  15. HTML or XHTML?
  16. HTML or XHTML?
  17. HTML or XHTML?
  18. HTML or XHTML?
  19. HTML or XHTML?
  20. HTML or XHTML?
  21. HTML or XHTML?
  22. HTML or XHTML?
  23. New semantics
  24. New semantics
  25. New semantics
  26. New semantics
  27. New semantics
  28. New semantics
  29. New semantics
  30. New semantics
  31. New semantics
  32. New semantics
  33. New semantics
  34. New semantics