SlideShare a Scribd company logo
1 of 42
HTML5
Just the basics please.
You not too late
Replacement for
HTML4 and XHTML
Bickering                                 Browser Support

2004        2005   2006   2007    2008    2009    2010      2011

                            Cooperation
                                                             IE9
Philosophy
•   Based on usage

•   Cooperation with browser makers

•   Remove presentation elements

•   Build in scripting elements
Creating an HTML5 Page
Sample.html
<!DOCTYPE html>
Sample.html
<!DOCTYPE html>                                    HTML 4
                  <!DOCTYPE html PUBLIC "-//W3C//DTD
                  XHTML 1.0 Transitional//EN" "http://
                  www.w3.org/TR/xhtml1/DTD/xhtml1-
                  transitional.dtd">
Sample.html
<!DOCTYPE html>
Sample.html
<!DOCTYPE html>

<html lang="en">
Sample.html
<!DOCTYPE html>                                         HTML 4
<html lang="en">   <html lang="en" xml:lang="en" xmlns="http://
                   www.w3.org/1999/xhtml">
Sample.html
<!DOCTYPE html>

<html lang="en">
Sample.html
<!DOCTYPE html>

<html lang="en">

  <head>

     <meta charset="utf-8" />
Sample.html
<!DOCTYPE html>

<html lang="en">                                                    HTML 4
  <head>                        <meta http-equiv="Content-Type" content="text/
                                html; charset=utf-8" />
     <meta charset="utf-8" />
Sample.html
<!DOCTYPE html>

<html lang="en">

  <head>

     <meta charset="utf-8" />
Sample.html
<!DOCTYPE html>

<html lang="en">

  <head>

     <meta charset="utf-8" />

      <title>Sample Page</title>

    <link rel=”stylesheet” href=”style-original.css” />
Sample.html
<!DOCTYPE html>

<html lang="en">

  <head>

     <meta charset="utf-8" />

      <title>Sample Page</title>

    <link rel=”stylesheet” href=”style-original.css” />                                 HTML 4
                                                <link href=”/style/structure.css” rel=”stylesheet”
                                                type=”text/css” />
Sample.html
<!DOCTYPE html>

<html lang="en">

  <head>

     <meta charset="utf-8" />

      <title>Sample Page</title>

    <link rel=”stylesheet” href=”style-original.css” />
Sample.html
<!DOCTYPE html>

<html lang="en">

  <head>

     <meta charset="utf-8" />

      <title>Sample Page</title>

    <link rel=”stylesheet” href=”style-original.css” />

  </head>
New Elements
<section>
a thematic grouping of content, typically
with a heading
<nav>
Contains core navigation items for a site
or page
<article>
A self-contained composition in a document, page,
application, or site and that is intended to be
independently distributable or reusable
<aside>
Content that is related to but not
essential to it’s parent content
<hgroup>
Grouping of h1 - h6 elements
 
<header>
Contains content at the top of a
section, typically a heading tag
<footer>
Take a wild guess
 
<time>
Indicates a date/time in the content
<header>
<article>
<nav>
<footer>
<header>
  <nav>

<section>
<article>
<footer>   <nav>
Forms
Placeholder

Autofocus

Email

Web address

Number
Range

Date, Month, Week, datetime

Search

Color picker
Specialized Elements
Canvas

Video

Location

Offline

More Related Content

What's hot

Module11: Creating A External Style Sheet and Creating A Gallery
Module11: Creating A External Style Sheet and Creating A GalleryModule11: Creating A External Style Sheet and Creating A Gallery
Module11: Creating A External Style Sheet and Creating A Gallery
Daniel Downs
 

What's hot (20)

Cit 230 internal css
Cit 230 internal cssCit 230 internal css
Cit 230 internal css
 
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world
 
Intro to HTML and CSS
Intro to HTML and CSSIntro to HTML and CSS
Intro to HTML and CSS
 
2
22
2
 
Exp12 write up
Exp12 write upExp12 write up
Exp12 write up
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
HTML5 semantics
HTML5 semanticsHTML5 semantics
HTML5 semantics
 
Basic HTML/CSS
Basic HTML/CSSBasic HTML/CSS
Basic HTML/CSS
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginners
 
Pres
PresPres
Pres
 
Module11: Creating A External Style Sheet and Creating A Gallery
Module11: Creating A External Style Sheet and Creating A GalleryModule11: Creating A External Style Sheet and Creating A Gallery
Module11: Creating A External Style Sheet and Creating A Gallery
 
Test
TestTest
Test
 
rel=alternate, hreflang=x - International Duplicate Content Issues
rel=alternate, hreflang=x - International Duplicate Content Issuesrel=alternate, hreflang=x - International Duplicate Content Issues
rel=alternate, hreflang=x - International Duplicate Content Issues
 
Html intro
Html introHtml intro
Html intro
 
Artdm171 Week4 Tags
Artdm171 Week4 TagsArtdm171 Week4 Tags
Artdm171 Week4 Tags
 
Khoa dang (kay)
Khoa dang (kay)Khoa dang (kay)
Khoa dang (kay)
 
Blade Template and Laravel
Blade Template and LaravelBlade Template and Laravel
Blade Template and Laravel
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 

Similar to HTML5 - Just the basics

Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheet
goldenveizer
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
Ashok Suragala
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
Jerry Wijaya
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
PL dream
 
Quan Head Tag Presentation
Quan Head Tag PresentationQuan Head Tag Presentation
Quan Head Tag Presentation
Quanslides
 

Similar to HTML5 - Just the basics (20)

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)
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheet
 
Html2
Html2Html2
Html2
 
DRYing Up Rails Views and Controllers
DRYing Up Rails Views and ControllersDRYing Up Rails Views and Controllers
DRYing Up Rails Views and Controllers
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
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
 
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
 
An-Introduction-to-HTML
An-Introduction-to-HTMLAn-Introduction-to-HTML
An-Introduction-to-HTML
 
More On Html 5
More On Html 5More On Html 5
More On Html 5
 
Quan Head Tag Presentation
Quan Head Tag PresentationQuan Head Tag Presentation
Quan Head Tag Presentation
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
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
Html5Html5
Html5
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
Kick start @ html5
Kick start @ html5Kick start @ html5
Kick start @ html5
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 

HTML5 - Just the basics

Editor's Notes