Introduction to HTML5 Where to start learning about HTML5? HTML 5 - - PowerPoint PPT Presentation

▶
introduction to html5 where to start learning about html5
SMART_READER_LITE
LIVE PREVIEW

Introduction to HTML5 Where to start learning about HTML5? HTML 5 - - PowerPoint PPT Presentation

Aug 31, 2023 328 likes •689 views

Introduction to HTML5 Where to start learning about HTML5? HTML 5 differences from HTML 4 http://w3.org/TR/html5-diff/ HTML 5 HTML 4 http://standards.mitsue.co.jp/ resources/w3c/TR/html5-diff/ HTML5 differences

slide-1
SLIDE 1

Introduction to HTML5

slide-2
SLIDE 2

Where to start learning about HTML5?

slide-3
SLIDE 3

HTML 5 differences from HTML 4

http://w3.org/TR/html5-diff/

slide-4
SLIDE 4

HTML 5 ― HTML 4 からの変更点

http://standards.mitsue.co.jp/ resources/w3c/TR/html5-diff/

slide-5
SLIDE 5
slide-6
SLIDE 6

HTML5 differences

  • Syntax simplifications
  • MathML and SVG integration
  • New elements/attributes added
  • Removed old elements/attributes
  • Added new APIs for scripting
slide-7
SLIDE 7

Syntax simplifications

slide-8
SLIDE 8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">

slide-9
SLIDE 9

<!DOCTYPE html>

slide-10
SLIDE 10

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

slide-11
SLIDE 11

<meta charset="Shift_JIS">

slide-12
SLIDE 12

New elements

  • <video> & <audio> (no plugins)
  • <canvas> (scriptable image)
  • <ruby> (ふりがな)
  • <article>, <section>, <header>
  • more...
slide-13
SLIDE 13

New attributes

  • draggable (drag-and-drop)
  • contenteditable (editable pages)
  • spellcheck (catch spelling errors)
  • new form attributes (for client-

side validation, plus new form controls such as date picker, etc.)

slide-14
SLIDE 14

Elements and attributes that have been removed or obsoleted

  • <frame>, <frameset>
  • <a name>
  • more...
slide-15
SLIDE 15

New APIs for scripting

  • API for <video> & <audio>
  • 2D drawing API for <canvas>
  • getElementsByClassName()
  • innerHTML
  • more...
slide-16
SLIDE 16

Design principles

slide-17
SLIDE 17

HTML design principles

http://w3.org/TR/html-design-principles/

slide-18
SLIDE 18

HTML 設計原則

http://standards.mitsue.co.jp/ resources/w3c/TR/2007/WD- html-design-principles-20071126/

slide-19
SLIDE 19
slide-20
SLIDE 20

HTML design principles

  • Support existing content
  • Ensure interoperability
  • Precisely define UA behavior
  • Handle errors (non-draconian)
  • Evolution not revolution
slide-21
SLIDE 21

Very important point: HTML5 includes XHTML

slide-22
SLIDE 22

Frequently Asked Questions (FAQ) about the future of XHTML

http://www.w3.org/2009/06/xhtml- faq.html

slide-23
SLIDE 23

XHTML の 今後に関する FAQ

http://standards.mitsue.co.jp/ resources/w3c/2009/06/ xhtml-faq.html

slide-24
SLIDE 24

Very important point: HTML5 focuses on Web applications (not just Web documents)

slide-25
SLIDE 25

About error handling...

slide-26
SLIDE 26
  • Well-formed XML:

<input disabled="disabled"/>

  • Empty attribute: <input disabled>
  • Without quotes: <input value=yes>
  • Single quotes: <input type='checkbox'/>
  • Double quotes: <input name="be evil"/>

Which of these are errors?

slide-27
SLIDE 27

<i><b>misnested tags</i></b>

This is a real error

slide-28
SLIDE 28

HTML5 defines how browsers can handle real errors interoperably and gracefully.

slide-29
SLIDE 29

Why is it important to handle errors?

slide-30
SLIDE 30

More than 93% of Alexa Top 500 sites contain are not conformant XHTML

slide-31
SLIDE 31

We need to specify error handling behavior to ensure interoperability “even in the face

  • f documents that do not comply

to the letter of the specifications”.

slide-32
SLIDE 32

Authors will write invalid content regardless of what we

  • spec. So the spec states “what

authors must not do, and then tells implementors what they must do when an author does it anyway”.

slide-33
SLIDE 33

HTML5 Validator

http://validator.nu

slide-34
SLIDE 34

That’s it.

slide-35
SLIDE 35

Thank you.