SlideShare a Scribd company logo
1 of 119
html5: start using it now!
                                  @alexbilbie




Sunday, 26 February 12
state of the union



Sunday, 26 February 12
html5



Sunday, 26 February 12
w3c working draft
                              (25th may 2011)

                            http://lncn.eu/gjx2




Sunday, 26 February 12
editors draft
                             (~daily edits)

                          http://lncn.eu/ghj2




Sunday, 26 February 12
css3



Sunday, 26 February 12
mostly w3c recommendations
                           status



Sunday, 26 February 12
ecmascript harmony
                               (javascript)




Sunday, 26 February 12
desktop browsers



Sunday, 26 February 12
Sunday, 26 February 12
Sunday, 26 February 12
Sunday, 26 February 12
Sunday, 26 February 12
IE6



Sunday, 26 February 12
IE7



Sunday, 26 February 12
IE8



Sunday, 26 February 12
IE9



Sunday, 26 February 12
IE10



Sunday, 26 February 12
mobile browsers



Sunday, 26 February 12
iOS



Sunday, 26 February 12
android



Sunday, 26 February 12
blackberry



Sunday, 26 February 12
windows mobile



Sunday, 26 February 12
mobile opera



Sunday, 26 February 12
start using html5 today!



Sunday, 26 February 12
doctype



Sunday, 26 February 12
<!doctype html>



Sunday, 26 February 12
UTF 8



Sunday, 26 February 12
<meta charset=”utf-8”>




Sunday, 26 February 12
<!doctype html>
           <meta charset=utf-8>
           <title>Dev8D</title>
           <p>Hello, world!</p>



Sunday, 26 February 12
New structural elements



Sunday, 26 February 12
Popularity     Value
                             1         footer
                             2          menu
                             3          style1
                             4        msonormal
                             5          text
                             6         content
                             7          title
                             8         style2
                             9         header
                             10       copyright

Sunday, 26 February 12
Popularity      Value
                             1          footer
                             2          content
                             3          header
                             4           logo
                             5         container
                             6           main
                             7          table1
                             8           menu
                             9          layer1
                             10       autonumber1

Sunday, 26 February 12
<div id=”header”>


                           <div    <div class=”post”>
                         id=”sideb
                           ar”>    <div class=”post”>


                              <div id=”footer”>




Sunday, 26 February 12
<header>


                                       <article>
                         <aside>
                                       <article>


                                   <footer>




Sunday, 26 February 12
IE SHIM
                         http://lncn.eu/h37




Sunday, 26 February 12
<header>



Sunday, 26 February 12
<header>
           ! <a href=”/>
           ! ! <img src=”logo.png” alt=”Dev8D Logo”>
           ! </a>
           ! <h1>Dev8D</h1>
           </header>




Sunday, 26 February 12
<nav>



Sunday, 26 February 12
<nav>
           ! <ul>
           ! ! <li>
           ! ! ! <a href=”/”>Home</a>
           ! ! </li>
           ! ! <li>
           ! ! ! <a href=”/about”>About Us</a>
           ! ! </li>
           ! </ul>
           </nav>


Sunday, 26 February 12
<section>



Sunday, 26 February 12
<aside>



Sunday, 26 February 12
<article>



Sunday, 26 February 12
<article>
           ! <header>
           ! ! <h1>Hello world!</h1>
           ! ! <aside>
           ! ! ! <p>Written by Alex</p>
           ! ! </aside>
           ! </header>
           !
           ! The lysine contingency - it's intended to prevent
           the spread of the animals is case they ever got off
           the island. Dr. Wu inserted a gene that makes a single
           faulty enzyme in protein metabolism. The animals can't
           manufacture the amino acid lysine. Unless they're
           continually supplied with lysine by us, they'll slip
           into a coma and die.

           ! <footer>
           ! ! <p>Tagged with <a href=”#”>Slipsum</a>
           ! </footer>
           </article>


Sunday, 26 February 12
<footer>



Sunday, 26 February 12
<hgroup>



Sunday, 26 February 12
<div id=”logo”>
           ! <h1>
           ! ! Dev8D
           ! ! <sup>
           ! ! ! Developer Happiness
           ! ! </sup>
           ! </h1>
           </div>



Sunday, 26 February 12
<hgroup id=”logo”>
           ! <h1>
           ! ! Dev8D
           ! </h1>
           ! <h2>
           ! ! Developer happiness
           ! </h2>
           </hgroup>



Sunday, 26 February 12
<details>



Sunday, 26 February 12
<details>
           ! <summary>
           ! ! HTML5 Talk with Alex Bilbie
           ! </summary>
           ! <p>
           ! ! A talk looking at all the
           exciting new web technologies.
           ! </p>
           </details>



Sunday, 26 February 12
HTML5 talk with Alex Bilbie   +

                         Python with Richard Jones     +




Sunday, 26 February 12
HTML5 talk with Alex Bilbie           -

                         A talk looking at all the exciting new web
                                       technologies.

                                Python with Richard Jones             +




Sunday, 26 February 12
<figure>



Sunday, 26 February 12
<figure>
           ! <img src=”dev8d.png” alt=””>
           ! <figcaption>
           ! ! Dev8D logo
           ! </figcaption>
           </figure>




Sunday, 26 February 12
<mark>



Sunday, 26 February 12
<p>
           ! Dev8D is the major UK event in the
           year for developers in the education
           sector to <mark>learn</mark> from
           one another and ultimately create
           <mark>better</mark>, <mark>smarter</
           mark> technology for learning and
           research.
           </p>



Sunday, 26 February 12
Dev8D is the major UK event in the
                          year for developers in the education
                         sector to learn from one another and
                            ultimately create better, smarter
                         technology for learning and research.




Sunday, 26 February 12
REDEFINED elements



Sunday, 26 February 12
<ol>



Sunday, 26 February 12
<ol start=”5”>
           ! <li>Foo</li>
           ! <li>Bar</li>
           ! <li>Foobar</li>
           </ol>




Sunday, 26 February 12
<p>Best Star Wars characters</p>

           <ol reversed>
           ! <li>Luke Skywalker</li>
           ! <li>Admiral Ackbar</li>
           ! <li>Chewie</li>
           ! <li>Han Solo</li>
           ! <li>R2D2</li>
           </ol>



Sunday, 26 February 12
<dl>



Sunday, 26 February 12
<p>Star Wars characters</p>

           <dl>
           ! <dt>Goodies</dt>
           ! ! <dd>Han Solo</dd>
           ! ! <dd>Luke Skywalker</dd>
           ! <dt>Baddies</dt>
           ! ! <dd>Darth Vader</dd>
           ! ! <dd>The Emperor</dd>
           </dl>



Sunday, 26 February 12
<address>



Sunday, 26 February 12
<article>
           ! ...
           ! ...
           ! <footer>
           ! ! <p>
           ! ! ! Contact the author
           ! ! ! <address>
           ! ! ! ! <a href=”mailto:abilbie@lincoln.ac.uk”>
           ! ! ! ! ! via email
           ! ! ! ! </a>
           ! ! ! </address>
           ! ! <p>
           ! </footer>
           </article>




Sunday, 26 February 12
<em>



Sunday, 26 February 12
<p>
           ! My <em>name</em> is Alex
           </p>




Sunday, 26 February 12
<i>



Sunday, 26 February 12
<p>
           ! ...the best car <i>in the
           world</i>
           </p>




Sunday, 26 February 12
<strong>



Sunday, 26 February 12
<p>
           ! <strong>Warning!</strong>
           ! this coffee is weak.
           </p>




Sunday, 26 February 12
<b>



Sunday, 26 February 12
<p>
        ! <b>Has Bean</b> roast great
        coffee.
        </p>




Sunday, 26 February 12
<hr>



Sunday, 26 February 12
<article id=”chapter-25”>

        !      // Frodo and Sam in Mordor

        !      <hr>

        !      // Gandalf fighting in Minas Tirith

        !      <hr>

        ! // Aragorn, Legolas and Gimli fighting Orcs in the
        field

        </article>




Sunday, 26 February 12
REMOVED elements



Sunday, 26 February 12
<applet>



Sunday, 26 February 12
<marquee>



Sunday, 26 February 12
<big>



Sunday, 26 February 12
<font>



Sunday, 26 February 12
<frame>



Sunday, 26 February 12
<blink>



Sunday, 26 February 12
<center>



Sunday, 26 February 12
NEW ATTRIBUTES



Sunday, 26 February 12
contenteditable



Sunday, 26 February 12
<article contenteditable>
           ! lorem ipsum
           </article>




Sunday, 26 February 12
data-foo=”bar”



Sunday, 26 February 12
<article data-author=”alex”>
           ! lorem ipsum
           </article>




Sunday, 26 February 12
$(‘article’).data(‘author’)

           // returns “alex”




Sunday, 26 February 12
hidden



Sunday, 26 February 12
item
                         itemprop
                         subject


Sunday, 26 February 12
<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
          ! Alex Bilbie<br>
          ! <span itemprop="name">
          ! ! ICT Services
          ! </span><br>
          ! <span itemprop="streetAddress">
          ! ! University of Lincoln<br>
          ! ! Brayford Pool
          ! </span><br>
          ! <span itemprop="addressLocality">
          ! ! Lincoln
          ! </span><br>
          ! <span itemprop="addressRegion">
          ! ! Lincolnshire
          ! </span><br>
          ! <span itemprop="postalCode">
          ! ! LN6 7TS
          ! </span><br>
          ! <span itemprop="addressCountry">
          ! ! United Kingdom
          ! </span>
          </address>




Sunday, 26 February 12
http://schema.org/



Sunday, 26 February 12
role=”foobar”
                         aria-*=”foobar”



Sunday, 26 February 12
Forms



Sunday, 26 February 12
<input type=”text”>




Sunday, 26 February 12
<input type=”search”>




Sunday, 26 February 12
<input type=”email”>




Sunday, 26 February 12
<input type=”url”>




Sunday, 26 February 12
<input type=”number”>




Sunday, 26 February 12
<input type=”range”>




Sunday, 26 February 12
<input type=”color”>




Sunday, 26 February 12
<input type=”tel”>




Sunday, 26 February 12
<datalist>



Sunday, 26 February 12
<input type=”text”
           list=”mylist”>

           <datalist id=”mylist”>
           ! <option label=”Alex Bilbie”>
           </datalist>




Sunday, 26 February 12
placeholder



Sunday, 26 February 12
required



Sunday, 26 February 12
multiple



Sunday, 26 February 12
pattern



Sunday, 26 February 12
autocomplete



Sunday, 26 February 12
step



Sunday, 26 February 12
formnovalidate



Sunday, 26 February 12
<form method=”post”>

           ! <label for=”name”>Name</label>
           ! <input id=”name” type=”text” required value=””
           placeholder=”John Doe”>

           ! <label for=”email”>Email</label>
           ! <input id=”email” type=”email” required value=””
           placeholder=”j.doe@gmail.com”>

           ! <label for=”url”>Website</label>
           ! <input id=”url” type=”url”
           placeholder=”www.example.com”>

           !       <label for=”comment”>Your comment</label>
           !       <textarea id=”comment”>

           </form>




Sunday, 26 February 12
MEDIA



Sunday, 26 February 12
<video>
           ! <source src=”dev8d.webm”
           type=”video/webm”>
           ! <source src=”dev8d.mp4”
           type=”video/mp4”>
           !
           ! <embed>
           ! ! <!-- flash fallback -->
           ! </embed>
           </video>


Sunday, 26 February 12
CANVAS



Sunday, 26 February 12
SVG



Sunday, 26 February 12
WeBGL



Sunday, 26 February 12
Finito

                         @alexbilbie


Sunday, 26 February 12

More Related Content

Similar to Introduction to HTML5

[T3CON12CA] TYPO3 Phoenix - The Current State
[T3CON12CA] TYPO3 Phoenix - The Current State[T3CON12CA] TYPO3 Phoenix - The Current State
[T3CON12CA] TYPO3 Phoenix - The Current StateChristian Müller
 
Mansoura University CSED & Nozom web development sprint
Mansoura University CSED & Nozom web development sprintMansoura University CSED & Nozom web development sprint
Mansoura University CSED & Nozom web development sprintAl Sayed Gamal
 
HTML5, makkelijker kunnen we het niet maken!
HTML5, makkelijker kunnen we het niet maken!HTML5, makkelijker kunnen we het niet maken!
HTML5, makkelijker kunnen we het niet maken!Henk Jurriens
 
Drupal campmanila 2012 (Responsive Web in Drupal with Omega Theme)
Drupal campmanila 2012 (Responsive Web in Drupal with Omega Theme)Drupal campmanila 2012 (Responsive Web in Drupal with Omega Theme)
Drupal campmanila 2012 (Responsive Web in Drupal with Omega Theme)Rick. Bahague
 
Blogging with joomla
Blogging with joomlaBlogging with joomla
Blogging with joomlaimarklee
 
How the Indianapolis Museum of Art is Building a Content Management Solution
How the Indianapolis Museum of Art is Building a Content Management SolutionHow the Indianapolis Museum of Art is Building a Content Management Solution
How the Indianapolis Museum of Art is Building a Content Management SolutionNuxeo
 
Performance & Responsive Web Design
Performance & Responsive Web DesignPerformance & Responsive Web Design
Performance & Responsive Web DesignZach Leatherman
 

Similar to Introduction to HTML5 (9)

[T3CON12CA] TYPO3 Phoenix - The Current State
[T3CON12CA] TYPO3 Phoenix - The Current State[T3CON12CA] TYPO3 Phoenix - The Current State
[T3CON12CA] TYPO3 Phoenix - The Current State
 
Mansoura University CSED & Nozom web development sprint
Mansoura University CSED & Nozom web development sprintMansoura University CSED & Nozom web development sprint
Mansoura University CSED & Nozom web development sprint
 
qpstudy 09
qpstudy 09qpstudy 09
qpstudy 09
 
HTML5, makkelijker kunnen we het niet maken!
HTML5, makkelijker kunnen we het niet maken!HTML5, makkelijker kunnen we het niet maken!
HTML5, makkelijker kunnen we het niet maken!
 
Drupal campmanila 2012 (Responsive Web in Drupal with Omega Theme)
Drupal campmanila 2012 (Responsive Web in Drupal with Omega Theme)Drupal campmanila 2012 (Responsive Web in Drupal with Omega Theme)
Drupal campmanila 2012 (Responsive Web in Drupal with Omega Theme)
 
Blogging with joomla
Blogging with joomlaBlogging with joomla
Blogging with joomla
 
How the Indianapolis Museum of Art is Building a Content Management Solution
How the Indianapolis Museum of Art is Building a Content Management SolutionHow the Indianapolis Museum of Art is Building a Content Management Solution
How the Indianapolis Museum of Art is Building a Content Management Solution
 
HTML::Mason by example
HTML::Mason by exampleHTML::Mason by example
HTML::Mason by example
 
Performance & Responsive Web Design
Performance & Responsive Web DesignPerformance & Responsive Web Design
Performance & Responsive Web Design
 

Recently uploaded

Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 

Recently uploaded (20)

Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 

Introduction to HTML5