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

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
 

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

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
 

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

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
 
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
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
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
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
"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
 
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
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
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
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
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
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
"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
 
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
 

Recently uploaded (20)

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
 
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
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
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
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
"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
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
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
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
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
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
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...
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
"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
 
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
 

HTML5 - Just the basics

Editor's Notes