SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

Cit 230 internal css
Cit 230 internal cssCit 230 internal css
Cit 230 internal cssaly0901
 
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello worldhemi46h
 
Intro to HTML and CSS
Intro to HTML and CSSIntro to HTML and CSS
Intro to HTML and CSSlexinamer
 
Exp12 write up
Exp12 write upExp12 write up
Exp12 write upAnkit Dubey
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic TagsBruce Kyle
 
Basic HTML/CSS
Basic HTML/CSSBasic HTML/CSS
Basic HTML/CSSChris Heiden
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSdanpaquette
 
HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersPrakritiDhang
 
Pres
PresPres
PresAndrey L
 
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 GalleryDaniel Downs
 
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 IssuesPeter Handley
 
Khoa dang (kay)
Khoa dang (kay)Khoa dang (kay)
Khoa dang (kay)halfofdemon
 
Blade Template and Laravel
Blade Template and LaravelBlade Template and Laravel
Blade Template and LaravelSayed Ahmed
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 CssAbhishek Kesharwani
 

Was ist angesagt? (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
 

Ă„hnlich wie HTML5 - Just the basics

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
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 htmlAbhishek Kesharwani
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheetgoldenveizer
 
DRYing Up Rails Views and Controllers
DRYing Up Rails Views and ControllersDRYing Up Rails Views and Controllers
DRYing Up Rails Views and ControllersJames Gray
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmleShikshak
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quideAshok Suragala
 
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-quidePL dream
 
An-Introduction-to-HTML
An-Introduction-to-HTMLAn-Introduction-to-HTML
An-Introduction-to-HTMLHatemMagdyMohamed
 
More On Html 5
More On Html 5More On Html 5
More On Html 5Darren Wood
 
Quan Head Tag Presentation
Quan Head Tag PresentationQuan Head Tag Presentation
Quan Head Tag PresentationQuanslides
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshopvardanyan99
 
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
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developersHernan Mammana
 
Kick start @ html5
Kick start @ html5Kick start @ html5
Kick start @ html5Umesh Agarwal
 

Ă„hnlich wie 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
 

KĂĽrzlich hochgeladen

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGSujit Pal
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
WhatsApp 9892124323 âś“Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 âś“Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 âś“Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 âś“Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
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...Miguel AraĂşjo
 

KĂĽrzlich hochgeladen (20)

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
WhatsApp 9892124323 âś“Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 âś“Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 âś“Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 âś“Call Girls In Kalyan ( Mumbai ) secure service
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
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...
 

HTML5 - Just the basics

Hinweis der Redaktion