SlideShare une entreprise Scribd logo
1  sur  109
Télécharger pour lire hors ligne
Semantic HTML 5
Terry Ryan | Developer Evangelist
Twitter: @tpryan
Who are
 you?
OVERVIEW
Semantic HTML
       means
   your markup
     describes
    it’s content
without presenting
          it
Definition
• HTML where specific elements are used
• HTML where elements are not misused
• HTML with no presentation information
Semantic HTML is a
• Not Boolean
• Not always objective
• A continuum Text
Example
Unsemantic                                         Semantic
                                                   <body>
<body background="css/bg.png">
                                                      <div id="header">
<font face="Calibri”><center>
                                                          <h1>The Awesome Blog of Awesome</
<table width="800" bgcolor="#FFFFFF" border="10"
                                                          h1>
bordercolor="#FFFFFF">
<tr><td>
<table width="100%" bgcolor="#f0f0f0"
                                              Text
                                               Text
                                                Text
                                                          <p class="tagline">
                                                          Awesome is a State of Mind
                                                          </p>
border="0“>
                                                      </div>
    <tr>
        <td><h1>
        <font face="Palatino Linotype">The
        Awesome Blog of Awesome</font>
        </h1></td>
    </tr>
    <tr>
        <td align="right"><p>
        <i>Awesome is a State of Mind</i>
        </p></td>
    </tr>
</table>
HTML5 ?

           What does
          this have to
            do with
            HTML5?
HTML5 adds more
 <body>
<header>
     <h1>The Awesome Blog of Awesome</h1>
     <p>Awesome is a State of Mind</p>
</header>
<nav>

<ul>
     <li><a href="">Home</a></li>
     <li><a href="">Blog</a></li>
     <li><a href="">About</a></li>
     <li><a href="">Contact</a></li>
  </ul>
</nav>
Semantic HTML5
HTML5
XHTML
ELEMENTS
Semantic HTML5
Head
Header
Previously
<div id="header">
  <h1>The Awesome Blog of Awesome</h1>
  <p class="tagline">Awesome is a State of Mind</p>
</div>
                                 Text
                                  Text
                                   Text

HTML 5
<header>
  <hgroup>
     <h1>The Awesome Blog of Awesome</h1>
     <h2>Awesome is a State of Mind</h2>
  </hgroup>
</header>
<hgroup> ?


             What’s the
             <hgroup>
             all about?
Hgroup
<hgroup>

 <h1></h1>

 <h2></h2>
</hgroup>

It’s for grouping related headers, that don’t spawn their
own node in the outline
<hgroup> ?


             <huh>?
Effect of hgroup
Without                              With
H1 – Awesome Blog of Awesome         H1 – Awesome Blog of Awesome

 H2 - Awesome is a State of Mind      H2 - Recent Posts

 H2 - Recent Posts
                                   TextH3 I Made a Post Thingie
                                    Text
                                     Text
  H3 I Made a Post Thingie              H3 My Thoughts are made manifest

  H3 My Thoughts are made manifest
<hgroup> ?


             Still with the
                <huh>?
Outlines
• Outlines seem really important to the
  people who push semantic HTML 5

• Are they really important?
 • Today: No
 • Tomorrow: Who knows?
• But this is a semantically correct way of
  reducing classes and extraneous divs
Semantic HTML5
Foot
Footer
Previously
<div id="footer”>

 <p>Copyright 2011 - Terry Ryan</p>
</div>
                        Text
                         Text
                          Text

HTML 5
<footer>
  
 <p>Copyright 2011 - Terry Ryan</p>
</footer>
Semantic HTML5
Nav
Nav
Previously                            HTML 5
<div id="nav">                         <nav>
 <ul>                                  <ul>
  <li><a href="">Home</a></li>           <li><a   href="">Home</a></li>
  <li><a href="">Blog</a></li>           <li><a   href="">Blog</a></li>
  <li><a href="">About</a></li>     Text
                                     Text
                                      Text
                                         <li><a   href="">About</a></li>
  <li><a href="">Contact</a></li>        <li><a   href="">Contact</a></li>
 </ul>                                  </ul>
</div>                                 </nav>
Semantic HTML5
Artic
Nav
Previously                                       HTML 5

<div class="post”>                               <article>
<div class="postheader">                         <header>
 <h3><a href="">I Scream My Thoughts</a></h3>     <h1><a href="">I Scream My Thoughts</a></h1>
 <p class="date">August 10, 2011</p>
</div>
                                            Text
                                             Text
                                              Text
                                                  <time>August 10, 2011</time>
                                                 </header>
<p>You probably haven't heard of them duis</p>   <p>You probably haven't heard of them duis </p>
</div>                                           </article>
Article
PREVIOUSLY
<div class="post”>
<div class="postheader">
 <h3><a href="">I Scream My Thoughts</a></h3>
 <p class="date">August 10, 2011</p>
</div>
                                Text
                                 Text
<p>You probably haven't heard of them duis</p>
                                  Text
</div>


HTML5
<article>
<header>
 <h1><a href="">I Scream My Thoughts</a></h1>
 <time>August 10, 2011</time>
</header>
<p>You probably haven't heard of them duis </p>
</article>
a
  piece of
content that
    can
Section
          There’s also
            this thing
              called
          “<section>”
            how does
           that work?
An <article>
 is a piece
 of stand-
   alone
Blog Post
Comment
A <section>
    is a
 collection
 of related
 pieces of
Related Entries
<articles>
can contain
<sections>
Semantic HTML5
Artic
le
Artic
le




Secti
on
Secti
on
Secti
on
<sections>
can contain
 <articles>
<articles>
can contain
   other
 <articles>
Artic
le




Secti
on
Secti
on
Secti
on
Artic
le




Secti
on
Secti
on
Secti
on
Articl
e
Articl
e
Semantic HTML5
Conte
Content
Previously                HTML 5
<div class=”content”>     <div class=”content”>
<div class="post”>        <article>
...                       ...
</div>                    </article>
<div class="post”>
...
                        Text
                          <article>
                         Text
                          Text
                          ...
</div>                    </article>
<div class="post”>        <article>
...                       ...
</div>                    <article>
</div>                    </div>
Also correct
Previously                HTML 5
<div class=”content”>     <section class=”content”>
<div class="post”>        <article>
...                       ...
</div>                    </article>
<div class="post”>
...
                        Text
                          <article>
                         Text
                          Text
                          ...
</div>                    </article>
<div class="post”>        <article>
...                       ...
</div>                    <article>
</div>                    </section>
Umm
      That’s great, but
      frankly not that
         much of a
         difference.


        How is this
         better?
Benefit 1
Before                HTML 5
 </div>                 </div>
</div>                  </article>
</div>              Text
                       </section>
                     Text
                      Text
<div id=“footer”>      <footer>
</div>                 </footer>
</body>                </body>
Benefit 2
 Less monkeying with content hierarchies
Archi
Main           Post
       ve
Archi
Main                   Post
           ve




   Artic       Artic      Artic
   le          le         le
Archi
Main                   Post
           ve




   Artic       Artic      Artic
   le          le         le
Archi
Main                              Post
           ve
                       article header h1




   Artic       Artic                       Artic
   le          le                          le
Benefit 3
 No longer bound to one header or one nav
 can have multiple.
New
 elements
work across
  modern
 browsers
What’s
  your
definition
   of
Modern?
Use the
HTML 5 Shiv
  http://code.google.com/p/html5shiv/
ATTRIBUTES
Data
<p data-firstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p>


Add “data-” to anything to make your content contain
 data

Uses?
   •Scritping
   •Microformats
   •jQuery Mobile
   •Perhaps future Search Engine hints.
These next
things aren’t
  semantic,
 just kinda
contenteditable
<p contenteditable="true” class="comment">Comment</p>

Allows any text to be user editable, not just input and
  textareas.

Uses?
   •Better CMS systems
   •Comment previews
spellcheck
<p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p>


Allows user editable field to trigger the browser’s spellcheck
  interface

Uses?
   •No one spellchecks anything they post on the web
   •But you will have the moral high ground to point out on your site they
     could have.
FORMS
elements
HTML5
 includes
  lots of
new <input>
They aren’t
supported
 on every
 browser
All browsers
 default to
  showing
 unknown
input types
Search
<input type=“search” name=“search” />

Support is spotty

Browser vendors tend to round, add
 magnifying glass, etc.




                                        Chart from - http://wufoo.com/html
Email
<input type=“email” name=“email” />

Provides validation

Provides email keyboard on iOS
  devices.




                                      Chart from - http://wufoo.com/html
URL
<input type=“url” name=“url” />

Provides validation

Provides url keyboard on iOS
devices.




                                  Chart from - http://wufoo.com/html
Number
<input type=“number” name=“cost” />


Provides keypad on iOS and Android
devices.
Provides a stepper on desktops
Takes attributes:
  Min/Max
  Step




                                      Chart from - http://wufoo.com/html
Tel
<input type=“tel” name=“cell” />

Provides keypad on iOS and
  Android devices.




                                   Chart from - http://wufoo.com/html
Not well
supported,
 but have
 potential
Range
<input type=“range” name=“volume” />

Provides a set of values
The slider allows you to pick
 one
Not terribly precise

Takes attributes:
  Min/Max
  Step
                                       Chart from - http://wufoo.com/html
Date
<input type=“date” name=“dob” />

Provides validation
On Opera
   Displays a data picker
On Safari/Chrome
   Displays ticker
IE
   Dashes your hopes and
    dreams the way only IE
    can                            Chart from - http://wufoo.com/html
FORMS
attributes
Output
<output />

Semantically correct placeholder for calculated values.

Can also be used a label for input type=“slider”




                                  Chart from - http://wufoo.com/html
Meter
<meter min=“0” max=“20” value=“12”>12cm</meter>

Basically a Bar Chart of results




                                      Chart from - http://wufoo.com/html
Progress
<progress min=“100” value=“20”>20%</
progress>

Could be used to indicate progress
through a multistep form

Could be programmatically changed to
indicate progress of program




                                       Chart from - http://wufoo.com/html
PITFALLS
Remember
 10 Years
   ago?
On Tableless designs
                                        Don’t use tables for
                                      layout, use CSS.

                                      Tables are for tabular
                     Zeldman
                                      data.

                                      They are just one of the
                                      tools in your toolkit.
  Holzschlag



                               Shea
Icons by:
http://www.ngenworks.com/
What people heard
                                      Don’t use tables


                                      Tables are for
                     Zeldman



                                      tools.

  Holzschlag



                               Shea
Icons by:
http://www.ngenworks.com/
I’m not saying
            Don’t use div’s when
            there are semantic
            elements that make
            sense.
            Div’s are still good for
            denoting things that
            have no semantic
            equivalent
I’m not saying
            Don’t use div’s when
            there are semantic
            elements that make
            sense.
            Div’s are still good for
            denoting things that
            have no semantic
            equivalent
<article>
   vs.
<section>
<nav>
  vs.
<menu>
A lot of this
 stuff is in
    Flux
You are
not required
to do any of
 what I just
CONCLUSIONS
Can you use
    it?
On desktops
The most
 common
 browsers
 have crappy
 HTML 5
 support




Source: https://netaverages.adobe.com
Actually, not
 so much
 anymore




Source: https://netaverages.adobe.com
New Elements
• Supported on most browsers
• If they are not supported, can be enabled
  using the HTML 5 Shiv
New Attributes
• Supported on most browsers
• If they are not supported, they have no
  impact.
New Form Inputs
• Support wildly varies
• If they are not supported, they have no
  impact.
New Form Elements
• Support wildly varies
• Mimic things that have been provided by
  JavaScript for years
On mobile
Semantic HTML5
Big
 Question:
Why use this
  stuff??
Used to be about the “Blind
        Billionaire
It’s Also about the Annoyed
           Reader
And
increase the
understanda
bility of your
For Future Reference
•   HTML 5 General

    •   http://www.diveintohtml5.net

    •   http://html5doctor.com

•   HTML5 Semantics

    •   http://www.diveintohtml5.net/semantics.html

•   HTML 5 Forms

    •   http://wufoo.com/html5

    •   http://www.diveintohtml5.net/forms.html

•   HTML Status

    •   http://caniuse.com
Follow up?
• Preso will be up at:
  - http://slideshare.net/tpryan
• Feel free to contact me
  - terry.ryan@adobe.com
                      Text
  - http://terrenceryan.com
  - Twitter: @tpryan
  - github: tpryan

Contenu connexe

Tendances

Intro to Web Development
Intro to Web DevelopmentIntro to Web Development
Intro to Web DevelopmentFrank Wu
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1Robert Nyman
 
What is HTML? How do we Write it? Check out this Quick Guide from Web Courses...
What is HTML? How do we Write it? Check out this Quick Guide from Web Courses...What is HTML? How do we Write it? Check out this Quick Guide from Web Courses...
What is HTML? How do we Write it? Check out this Quick Guide from Web Courses...Carl Heaton
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Deliverance talk at plone meetup
Deliverance talk at plone meetupDeliverance talk at plone meetup
Deliverance talk at plone meetupJazkarta, Inc.
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 
Html5 structure tags
Html5 structure tagsHtml5 structure tags
Html5 structure tagsSEO SKills
 
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
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioChristian Heilmann
 
HTML all tags .........its to much helpful for beginners
HTML all tags .........its to much helpful for beginners HTML all tags .........its to much helpful for beginners
HTML all tags .........its to much helpful for beginners Nimrakhan89
 
How I learned to stop worrying and love the .htaccess file
How I learned to stop worrying and love the .htaccess fileHow I learned to stop worrying and love the .htaccess file
How I learned to stop worrying and love the .htaccess fileRoxana Stingu
 
WordCamp Detroit 2010 Wordpress Theme Hacks
WordCamp Detroit 2010 Wordpress Theme HacksWordCamp Detroit 2010 Wordpress Theme Hacks
WordCamp Detroit 2010 Wordpress Theme HacksJohn Pratt
 
Pt3 Organic SEO Workshop for Wedding Pros
Pt3 Organic SEO Workshop for Wedding ProsPt3 Organic SEO Workshop for Wedding Pros
Pt3 Organic SEO Workshop for Wedding ProsChristie Osborne
 

Tendances (20)

Intro to Web Development
Intro to Web DevelopmentIntro to Web Development
Intro to Web Development
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Meta tag creation
Meta tag creationMeta tag creation
Meta tag creation
 
Joomla Technical SEO
Joomla Technical SEOJoomla Technical SEO
Joomla Technical SEO
 
What is HTML? How do we Write it? Check out this Quick Guide from Web Courses...
What is HTML? How do we Write it? Check out this Quick Guide from Web Courses...What is HTML? How do we Write it? Check out this Quick Guide from Web Courses...
What is HTML? How do we Write it? Check out this Quick Guide from Web Courses...
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 
Deliverance talk at plone meetup
Deliverance talk at plone meetupDeliverance talk at plone meetup
Deliverance talk at plone meetup
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
Html5 structure tags
Html5 structure tagsHtml5 structure tags
Html5 structure tags
 
Css by tanbircox
Css by tanbircoxCss by tanbircox
Css by tanbircox
 
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
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
 
Day of code
Day of codeDay of code
Day of code
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
 
HTML all tags .........its to much helpful for beginners
HTML all tags .........its to much helpful for beginners HTML all tags .........its to much helpful for beginners
HTML all tags .........its to much helpful for beginners
 
How I learned to stop worrying and love the .htaccess file
How I learned to stop worrying and love the .htaccess fileHow I learned to stop worrying and love the .htaccess file
How I learned to stop worrying and love the .htaccess file
 
WordCamp Detroit 2010 Wordpress Theme Hacks
WordCamp Detroit 2010 Wordpress Theme HacksWordCamp Detroit 2010 Wordpress Theme Hacks
WordCamp Detroit 2010 Wordpress Theme Hacks
 
Pt3 Organic SEO Workshop for Wedding Pros
Pt3 Organic SEO Workshop for Wedding ProsPt3 Organic SEO Workshop for Wedding Pros
Pt3 Organic SEO Workshop for Wedding Pros
 

En vedette

Design trends - from html tables to semantic html5
Design trends - from html tables to semantic html5Design trends - from html tables to semantic html5
Design trends - from html tables to semantic html5Kevin Bruce
 
Html5 structure & semantic
Html5 structure & semanticHtml5 structure & semantic
Html5 structure & semanticMuktadiur Rahman
 
Atelier #2 initiation à css
Atelier #2 initiation à cssAtelier #2 initiation à css
Atelier #2 initiation à cssLes-Tilleuls.coop
 
Catalogue Idwatt 2016
Catalogue Idwatt 2016Catalogue Idwatt 2016
Catalogue Idwatt 2016SOREA
 
Html de base
Html de baseHtml de base
Html de basekrymo
 
Présentation html5
Présentation html5Présentation html5
Présentation html5Kénium
 
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)Alphorm
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Stephane PERES
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsRémy Savard
 
Installation et configuration wordpress
Installation et configuration wordpressInstallation et configuration wordpress
Installation et configuration wordpressChi Nacim
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteRaphaël Goetter
 

En vedette (16)

HTML5 and Semantic Web
HTML5 and Semantic WebHTML5 and Semantic Web
HTML5 and Semantic Web
 
Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3
 
Design trends - from html tables to semantic html5
Design trends - from html tables to semantic html5Design trends - from html tables to semantic html5
Design trends - from html tables to semantic html5
 
Créer son 1er site web
Créer son 1er site webCréer son 1er site web
Créer son 1er site web
 
Html5 structure & semantic
Html5 structure & semanticHtml5 structure & semantic
Html5 structure & semantic
 
MySQL Cheat Sheet
MySQL Cheat SheetMySQL Cheat Sheet
MySQL Cheat Sheet
 
Atelier #2 initiation à css
Atelier #2 initiation à cssAtelier #2 initiation à css
Atelier #2 initiation à css
 
Catalogue Idwatt 2016
Catalogue Idwatt 2016Catalogue Idwatt 2016
Catalogue Idwatt 2016
 
Html de base
Html de baseHtml de base
Html de base
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
 
Installation et configuration wordpress
Installation et configuration wordpressInstallation et configuration wordpress
Installation et configuration wordpress
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 

Similaire à Semantic HTML5

Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
LIS3353 SP12 Week 4
LIS3353 SP12 Week 4LIS3353 SP12 Week 4
LIS3353 SP12 Week 4Amanda Case
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quidePL dream
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quideJerry Wijaya
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quideAshok Suragala
 
Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8
Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8
Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8spierre
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]Dalibor Gogic
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205志宇 許
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introductionDiego Scataglini
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction Diego Scataglini
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)christopherfross
 

Similaire à Semantic HTML5 (20)

Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
LIS3353 SP12 Week 4
LIS3353 SP12 Week 4LIS3353 SP12 Week 4
LIS3353 SP12 Week 4
 
Html intro
Html introHtml intro
Html intro
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Html5 quick learning guide
Html5 quick learning guideHtml5 quick learning guide
Html5 quick learning guide
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8
Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8
Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
Web Designing.docx
Web Designing.docxWeb Designing.docx
Web Designing.docx
 
#1 HTML [know-how]
#1 HTML [know-how]#1 HTML [know-how]
#1 HTML [know-how]
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 

Plus de Terry Ryan

Making the Mobile Web Work
Making the Mobile Web WorkMaking the Mobile Web Work
Making the Mobile Web WorkTerry Ryan
 
HTML Design for Devices
HTML Design for DevicesHTML Design for Devices
HTML Design for DevicesTerry Ryan
 
The Future of HTML5 Motion Design
 The Future of HTML5 Motion Design The Future of HTML5 Motion Design
The Future of HTML5 Motion DesignTerry Ryan
 
Adobe and Modern Web Development
Adobe and Modern Web DevelopmentAdobe and Modern Web Development
Adobe and Modern Web DevelopmentTerry Ryan
 
The Future of HTML Motion Design
The Future of HTML Motion DesignThe Future of HTML Motion Design
The Future of HTML Motion DesignTerry Ryan
 
Skip the IDE with PhoneGap Build
Skip the IDE with PhoneGap BuildSkip the IDE with PhoneGap Build
Skip the IDE with PhoneGap BuildTerry Ryan
 
Beautiful PhoneGap Apps
Beautiful PhoneGap AppsBeautiful PhoneGap Apps
Beautiful PhoneGap AppsTerry Ryan
 
The Future of HTML5 Motion Design
The Future of HTML5 Motion DesignThe Future of HTML5 Motion Design
The Future of HTML5 Motion DesignTerry Ryan
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileTerry Ryan
 
Design for Developers
Design for DevelopersDesign for Developers
Design for DevelopersTerry Ryan
 
cf.Objective ANZ Keynote
cf.Objective ANZ Keynotecf.Objective ANZ Keynote
cf.Objective ANZ KeynoteTerry Ryan
 
Flex Mobile Skinning Workshop
Flex Mobile Skinning WorkshopFlex Mobile Skinning Workshop
Flex Mobile Skinning WorkshopTerry Ryan
 
HTML5 Semantic Web
HTML5 Semantic WebHTML5 Semantic Web
HTML5 Semantic WebTerry Ryan
 
Intro to Coldfusion
Intro to ColdfusionIntro to Coldfusion
Intro to ColdfusionTerry Ryan
 
Driving Technical Change
Driving Technical ChangeDriving Technical Change
Driving Technical ChangeTerry Ryan
 
Mobile Apps with ColdFusion
Mobile Apps with ColdFusionMobile Apps with ColdFusion
Mobile Apps with ColdFusionTerry Ryan
 
Developing for Xoom with Flash and AIR
Developing for Xoom with Flash and AIRDeveloping for Xoom with Flash and AIR
Developing for Xoom with Flash and AIRTerry Ryan
 

Plus de Terry Ryan (20)

Making the Mobile Web Work
Making the Mobile Web WorkMaking the Mobile Web Work
Making the Mobile Web Work
 
HTML Design for Devices
HTML Design for DevicesHTML Design for Devices
HTML Design for Devices
 
The Future of HTML5 Motion Design
 The Future of HTML5 Motion Design The Future of HTML5 Motion Design
The Future of HTML5 Motion Design
 
Adobe and Modern Web Development
Adobe and Modern Web DevelopmentAdobe and Modern Web Development
Adobe and Modern Web Development
 
The Future of HTML Motion Design
The Future of HTML Motion DesignThe Future of HTML Motion Design
The Future of HTML Motion Design
 
Skip the IDE with PhoneGap Build
Skip the IDE with PhoneGap BuildSkip the IDE with PhoneGap Build
Skip the IDE with PhoneGap Build
 
D2WC Keynote
D2WC KeynoteD2WC Keynote
D2WC Keynote
 
WebDU Keynote
WebDU KeynoteWebDU Keynote
WebDU Keynote
 
Beautiful PhoneGap Apps
Beautiful PhoneGap AppsBeautiful PhoneGap Apps
Beautiful PhoneGap Apps
 
The Future of HTML5 Motion Design
The Future of HTML5 Motion DesignThe Future of HTML5 Motion Design
The Future of HTML5 Motion Design
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery Mobile
 
Design for Developers
Design for DevelopersDesign for Developers
Design for Developers
 
cf.Objective ANZ Keynote
cf.Objective ANZ Keynotecf.Objective ANZ Keynote
cf.Objective ANZ Keynote
 
Flex Mobile Skinning Workshop
Flex Mobile Skinning WorkshopFlex Mobile Skinning Workshop
Flex Mobile Skinning Workshop
 
HTML5 Semantic Web
HTML5 Semantic WebHTML5 Semantic Web
HTML5 Semantic Web
 
Intro to Coldfusion
Intro to ColdfusionIntro to Coldfusion
Intro to Coldfusion
 
Driving Technical Change
Driving Technical ChangeDriving Technical Change
Driving Technical Change
 
Mobile Apps with ColdFusion
Mobile Apps with ColdFusionMobile Apps with ColdFusion
Mobile Apps with ColdFusion
 
Developing for Xoom with Flash and AIR
Developing for Xoom with Flash and AIRDeveloping for Xoom with Flash and AIR
Developing for Xoom with Flash and AIR
 

Dernier

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
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
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
 
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
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
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
 
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
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
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
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
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
 

Dernier (20)

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
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
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
 
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
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
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
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
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)
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
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
 

Semantic HTML5

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n
  108. \n
  109. \n
  110. \n
  111. \n
  112. \n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. \n
  123. \n
  124. \n
  125. \n
  126. \n