SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

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
 
HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic TagsBruce Kyle
 
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
 
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
 
Blade Template and Laravel
Blade Template and LaravelBlade Template and Laravel
Blade Template and LaravelSayed Ahmed
 

Tendances (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
 

Similaire à 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
 
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
 
Quan Head Tag Presentation
Quan Head Tag PresentationQuan Head Tag Presentation
Quan Head Tag PresentationQuanslides
 
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
 

Similaire à 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
 

Dernier

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 

Dernier (20)

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 

HTML5 - Just the basics

Notes de l'éditeur