Html5 Seminario Tid

HTML5
Part I: Language and basic DOM APIs

José M. Cantera Fonseca
Senior Technologist
CC 3001
TELEFÓNICA I+D
Date: 17/12/2009

© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal

What is HTML5?

HTML5 reflects an effort, started in 2004, to study contemporary HTML
implementations and deployed content in order to improve interoperability
on the Web platform

HTML5
— encompasses the set of technologies (language and APIs) to be implemented by
web browsers in the short, medium-term (and perhaps long-term)
— will be the core technology (delivery format) on which future Web Applications
will be based on

The HTML5 draft:
— Defines a single language called HTML5 which can be written in HTML
syntax and in XML syntax.
— Defines detailed processing models to foster interoperable
implementations.
— Improves markup for documents based on prevailing authoring practices
— Introduces markup and APIs for emerging idioms, such as Web applications.

TELEFÓNICA I+D


HTML History
1990-1995: early days at CERN and IETF (ex. HTML 2.0, RFC 1866)
— http://www.w3.org/People/Raggett/the-early-days-of-the-Web.html
October 1st 1994: W3C is created (hosted by CSAIL @ MIT)
1995 HTML 3.0 1997 HTML 3.2 http://www.w3.org/TR/REC-html32
April 1998 HTML 4 http://www.w3.org/TR/1998/REC-html40-19980424/
1998 DOM Level 1 http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/
June 1999 RFC 2616 (HTTP 1.1) published
24th December 1999 HTML 4.01 http://www.w3.org/TR/1999/REC-html401-19991224
— http://www.w3.org/TR/html4/appendix/changes.html#19991224
— At this time, the W3C membership decided to stop evolving HTML
January 2000 XHTML 1.0 (HTML 4.01 serialized as XML)
Nov.2000 DOM Level2 Core http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-
20001113
2001 Work on XHTML Modularization and XHTML2 starts
August / December 2002 XHTML2 working drafts published
2003 DOM Level2 HTML http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-
20030109
TELEFÓNICA I+D


HTML History
2003 XForms becomes a W3C Recommendation http://www.w3.org/TR/2003/REC-xforms-20031014/
— Browser vendors (Apple, Opera) are seriously concerned
– http://lists.w3.org/Archives/Public/www-forms-editor/2003Sep/0006.html

May 2004 Backwards Compatibity blog entry (Ian Hickson)
— Authors still want to write Web applications, and the currently deployed standards are
inadequate. Since completely new standards won't cut it [...] this leaves us with the solution we
(Opera and Mozilla) have been advocating: updating HTML and the DOM.
June 2004 W3C Workshop on Web Applications and CDFs
— Hosted by Adobe in San José, California http://www.w3.org/2004/04/webapps-cdf-ws/
— Mozilla and Opera position “Design Principles for Web Application Technologies”
http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html

— Web Forms 2.0 an evolutionary approach for enhancing forms
— W3C staff and membership voted to continue developing XML-based replacements instead.
June 2004 (just after the workshop) Apple, Mozilla, and Opera found the
WHATWG (Web Hypertext Applications Working Group) http://whatwg.org
— The group aims to develop specifications based on HTML and related technologies to ease
the deployment of interoperable Web Applications [...] for implementation in mass-market Web
browsers, in particular Safari, Mozilla, and Opera; [the group] intends to ensure that all its
specifications address backwards compatibility concerns [...] and specify error handling
behavior to ensure interoperability even in the face of documents that do not comply to the
letter of the specifications.
February 2005 AJAX: A new approach to Web Applications (Jesse James Garrett)

TELEFÓNICA I+D


HTML History
September 2005 WHATWG Web Applications 1.0 Early Working Draft
— http://www.whatwg.org/specs/web-apps/2005-09-01/
October 2005 Ian Hickson (then at Opera Software) goes to Google
October 2006 Reinventing HTML blog entry (Tim Berners-Lee)
— Some things are clearer with hindsight of several years. It is necessary to evolve HTML
incrementally. The attempt to get the world to switch to XML, including quotes around
attribute values and slashes in empty tags and namespaces all at once didn't work... The
plan is to charter a completely new HTML group. Unlike the previous one, this one will be
chartered to do incremental improvements to HTML, as also in parallel xHTML.
March 2007
— 5th W3C HTML Working Group chartered http://www.w3.org/2007/03/HTML-WG-
charter.html
– Chairs: Chris Wilson (Microsoft), Sam Ruby (IBM). Team Contact: Dan Connolly
— W3C XHTML2 Working Group chartered
May 2007 W3C’s HTML WG resolves on using WHATWG’s HTML5 spec as an starting
point
— Apple, Mozilla, and Opera allowed the W3C to publish the specification under the W3C
copyright, while keeping a version with the less restrictive license on the WHATWG site.
— Since then, both groups have been working together.

TELEFÓNICA I+D


HTML History

January 2008 W3C publishes the FPWD on HTML5
— http://www.w3.org/TR/2008/WD-html5-20080122/
July 2009 the end of the work on XHTML2 and XHTML
Modularization is announced
— http://www.w3.org/2009/06/xhtml-faq.html
August 2009 latest HTML5 WD published at W3C
http://www.w3.org/TR/2009/WD-html5-20090825/
October 2009 WHATWG announces Last Call for Comments for
HTML5 http://blog.whatwg.org/html5-at-last-call
More info at
— http://esw.w3.org/topic/HTML/history
— http://www.atendesigngroup.com/blog/brief-history-of-html

TELEFÓNICA I+D


HTML5 Design Principles
Differentiating between
— Conforming Language : Pages syntactically correct
— Supported Lang. : Pages not syntactically correct but which actually work
Compatibility
— Support existing content
– to process existing HTML documents as HTML 5 and get results that are compatible with the
existing expectations of users and authors, based on the behavior of existing browsers.
– Ex. <b>a<i>b</b>c</i>
— Degrade gracefully
– Web content should degrade gracefully in older or less capable user agents, even when
making use of new elements, attributes, APIs and content models.
– Ex. the <video> element allows to define fallback content if video is not supported
— Do not reinvent the wheel
– Ex. contenteditable=“”
— Pave the cowpaths
– Ex. <br/>
— Evolution not revolution
– Switching to XML syntax requires a global change, so continue supporting classic HTML
syntax as well.

TELEFÓNICA I+D



Utility
— Solve real problems
– Prioritizing widespread problems to be solved
— Priority of Constituencies
– In case of conflict, consider users over authors over implementors over specifiers over
theoretical purity.
— Secure By Design
– Ensure that features work with the security model of the web. Preferrably address security
considerations directly in the specification.
– Ex. Cross-document messaging (postMessage API)
— Separation of Concerns
– markup that expresses structure is usually preferred to purely presentational markup
– Ex. <article> element
— DOM Consistency
– Regardless of XHTML or HTML serializations
– The HTML (text/html) parser puts elements in
the http://www.w3.org/1999/xhtml namespace in the DOM for compatibility with the
XML syntax of HTML5.

TELEFÓNICA I+D



Interoperability
— Well-Defined behavior
– Prefer to clearly define behavior that content authors could rely on, in
preference to vague or implementation-defined behavior.
– This way, it is easier to author content that works in a variety of
user agents. However, implementations should still be free to make
improvements in areas such as user interface and quality of
rendering.

— Avoid needless complexity
— Handle errors
– Error handling should be defined so that interoperable
implementations can be achieved.
– Prefer graceful error recovery to hard failure, so that users are not
exposed to authoring errors.

TELEFÓNICA I+D



Universal access
— Media independence
– Features should, when possible, work across different platforms,
devices, and media
– Ex. A hyperlink can not be actuated in a printed document, but that is
no reason to omit the <a> element.
— Support world languages
– Ex. Supporting Unicode allows text in most of the world's languages,
including mixing of text in different languages.
— Accessibility
– Design features to be accessible to users with disabilities.
– Ex. the <progress> element is intrinsically accessible as it has
unambiguous progress bar semantics which permits mapping to
accessibility APIs that can represent progress indicators

TELEFÓNICA I+D


TELEFÓNICA I+D
>lmth/<
>ydob/<
>p/<.tnemucod LMTH elpmaxe na si sihT>p<
>1h/<elpmaxE>1h<
>"elpmaxe"=ssalc ydob<
>daeh/<
>/ ssc.teehsym =ferh teehselyts =ler knil<
“ “ “ “
>eltit/<tnemucoD LMTH nA>eltit<
>daeh<
>"lmthx/9991/gro.3w.www//:ptth"=snlmx lmth<
>?"8-FTU"=gnidocne "0.1"=noisrev lmx?<
(application/xhtml+xml) or (application/xml)
XML Serialization
>lmth/<
>ydob/<
.tnemucod LMTH elpmaxe na si sihT>p<
>1h/<elpmaxE>1h<
>elpmaxe=ssalc ydob<
>daeh/<
>ssc.teehsym=ferh teehselyts=ler knil<
> "8-FTU"=tesrahc atem<
>daeh<
>lmth<
>lmth EPYTCOD!<
(text/html)
HTML Serialization
Getting Started

HTML5 .- XHTML vs HTML

XHTML taught us

— lowercase tags!

— close void elements! (img, meta, input, ...)

— no empty attributes! (disabled=”disabled”)

— always put attribute values in double quotes!

HTML5 says: you choose

TELEFÓNICA I+D


HTML5 defines a syntax compatible with HTML 4 and XHTML 1
HTML5 is no longer formally based upon SGML
— The HTML serialization defines its own parsing rules
— the DOCTYPE declaration is only needed to enable “standards mode” for
documents written using the HTML syntax
HTML 5 defines three parsing modes (which influence the final
rendering obtained)
— quirks mode
– violate contemporary Web format specifications in order to avoid “breaking”
pages authored according to practices that were prevalent in the late 1990s
— limited quirks mode (a.k.a. almost standards mode)
– implements the vertical sizing of table cells traditionally and not rigorously
according to the CSS2 specification
— no quirks mode (a.k.a. standard mode)
– browsers try to give conforming documents the specification-wise correct
treatment to the extent implemented in a particular browser
More info at http://hsivonen.iki.fi/doctype/
TELEFÓNICA I+D


HTML syntax remarks
— HTML syntax is case-insensitive
— Void elements (forbidden from containing any content at all)
– <link type="text/css" rel="stylesheet" href="style.css">
— Empty elements (any element that does not contain any content within it)
– <span></span>

— boolean attributes, <true> value specified using an empty attribute (with no value), the empty
string or a value which it is equal to the name of the attribute. ‘false’ or ‘true’ are invalid
values!
– <input disabled>
— Unquoted attribute values <div class=example> (provided there are no spaces or quotes)
Any document, including a document authored with the intention of being XHTML,
served as text/html is technically an HTML document.
— See current problems with XHTML served as text/html at http://www.hixie.ch/advocacy/xhtml
Documents with an XML media type are always handled in standards (no quirks) mode
A polyglot HTML document is a document that conforms to both the HTML and
XHTML syntactic requirements, and which can be processed as either by browsers,
depending on the MIME type used.
More info at http://wiki.whatwg.org/wiki/HTML_vs._XHTML

TELEFÓNICA I+D


HTML5 Syntax Remarks

Tag soup? No!
— small degree of freedom, but very detailed rules for parsing
— validation will matter
– http://html5.validator.nu/
— keep a clean coding style, you’ll thank yourself for it later
HTML5 is designed so that old HTML 4 browsers can
safely ignore new HTML5 constructs
“Documents must not use deprecated features. User
agents should support deprecated features.”
— Extensive error handling by UAs

TELEFÓNICA I+D


Character Encoding
For the HTML syntax, three means of setting the character encoding:
— At the transport level. By using the HTTP Content-Type header
— Using a Unicode Byte Order Mark (BOM) character at the start of the file. This
character provides a signature for the encoding used.
— Using a meta element with a @charset attribute that specifies the encoding within
the first 512 bytes of the document. E.g.
– <meta charset="UTF-8"> could be used to specify the UTF-8 encoding.
– <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
– is still allowed.
For the XML syntax, authors have to use the rules as set forth in the XML
specifications to set the character encoding.
Authors are encouraged to use UTF-8.
— Conformance checkers may advise authors against using legacy encodings.
— Authoring tools should default to using UTF-8 for newly-created documents.
More info at
— The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About
Unicode and Character Sets (No Excuses!)

— On the Goodness of Unicode, On Character Strings, and Characters vs. Bytes

TELEFÓNICA I+D


Metadata
<meta> element with @name and @content attributes. Example
— <meta name=author content=“José Cantera”>
Standard properties
— application-name
— author
— description
— generator
Pragma directives, using the @http-equiv attribute
— <meta http-equiv=refresh content=600>
@lang is a global attribute which specifies the primary language for the
element's contents and for any of the element's attributes that contain text.
— Its value must be a valid BCP 47 language code (Ex. @lang=es)
Other metadata (document semantics), see later
— RDFa
— Microdata

TELEFÓNICA I+D


Global Attributes
@accesskey Accessibility / Mobile
@class
@contenteditable Rich in place editing of content
@contextmenu For assigning a contextual menu to an element
@dir for the reading direction of languages
@draggable for drag&drop interaction
@hidden In HTML5 any element can be hidden
@id
@itemid, @itemprop, @itemref, @itemscope, @itemtype
— Microdata (Semantics)
@lang
@spellcheck Activates spellchecking on a textual input
@style
@tabindex
@title
@role, @aria-xxx To instruct Assistive Technology, see later
@data-xx for extensibility, see later

TELEFÓNICA I+D


TELEFÓNICA I+D
>lmth/<
>ydob/<
>elcitra/<
>p/<oluc tra le azneimoC>lamron=ssalc p<
í
>elyts/<
}
;fi r e s , s e m i T , " n a m o R w e N s e mi T ": yli m af -t n of
;xp41:ezis-tnof
{ l a mr o n. p
}
;der dilos xp5:redrob
{ elpmaxe.
>"ssc/txet"=epyt depocs elyts<
>elcitraym=di elpmaxe=ssalc elcitra<
.tnemucod 5LMTH elpmaxe na si sihT>p<
>1h/<elpmaxE>1h<
>elpmaxe=ssalc ydob<
>daeh/<
>ssc.teehsym=ferh teehselyts=ler knil<
> "8-FTU"=tesrahc atem<
>daeh<
>lmth<
>lmth EPYTCOD!<
Ex.
defined by its parent element
It indicates that the specified style has to be applied only to the elements of the subtree
A new attribute @scoped has been added to the <style> element
Scoped Styles

New Structural Elements

They can be employed in many situations where <div> is used today and should help
you make more readable, maintainable, HTML source.
<section>
— a generic document or application section
— Ex. a book chapter
<nav>
— A section devoted to major navigation blocks
<article>
— A self-contained composition that is intended to be independently distributable or
reusable (e.g. in syndication)
— Ex. forum post, newspaper article, a Web log entry, a gadget …
<aside>
— A section that consists of content that is tangentially related to the main content
— Ex. sidebars, ads,

TELEFÓNICA I+D


Sectioning Example
If you just go through your document and blindly replace all the
<div>s with <section>s you are doing it wrong.

Each time you nest a <section>, you increase the outline depth by 1
• http://gsnedders.html5.org/outliner/

>lmth EPYTCOD!<
>lmth<
>daeh<
> "8-FTU"=tesrahc atem< Document Outline
>daeh/< This is the main header
>elpmaxe=ssalc ydob< +--This is a subheader
>1h/<redaeh niam eht si sihT>1h<
>noitces< +--This is a subsubheader
>1h/<redaehbus a si sihT>1h<
>noitces< +--This is a second subheader
>1h/<redaehbusbus a si sihT>1h<
>noitces/<
>noitces/<
>noitces<
>1h/<redaehbus dnoces a si sihT>1h<
>noitces/<
>ydob/<
>lmth/<

TELEFÓNICA I+D


New Structural Elements

<hgroup>
— represents the heading of a section
<header>
— a group of introductory or navigational aids
<footer>
— A footer for its nearest ancestor sectioning content
— Ex. copyright data, links to related documents, …
<time>
— Represents either a time on a 24 hour clock or a precise date in the
proleptic Gregorian calendar
<mark>
— A run of text marked or highlighred for reference purposes

TELEFÓNICA I+D


TELEFÓNICA I+D
>redaeh/< >van/< >llllu/<
>redaeh/< >van/< > u/<
> /<>a/<
> /<>a/< ó >
>
>iiiillll/<>a/<n inipO>4=yekssecca n inipO =eltit lmth.noinipo"=ferh a<>iiiillll<
> /<>a/< > ó “ “ “ a<> <
a<> <
a<> <
> /<>a/<
> /<>a/< >
>
>iiiillll/<>a/<aporuE>3=yekssecca aporuE =eltit lmth.aporue"=ferh a<>iiiillll<
> /<>a/< > “ “ “ a<> <
a<> <
a<> <
> /<>a/<
> /<>a/<
> /<>a/< >
>
>iiiillll/<>a/<odnuM>2=yekssecca odnuM led otseR =eltit lmth.odnum"=ferh a<>iiiillll<
> “ “ “ a<> <
a<> <
a<> <
> /<>a/<
> /<>a/< ñ >
>
>iiiillll/<>a/<a apsE>1=yekssecca a apsE =eltit lmth.a apse"=ferh a<>iiiillll<
> /<>a/< > ñ “ “ “ ñ a<> <
a<> <
a<> <
> u<
>llllu<
> u<
> u<
>van<
>van<
>van<
>van<
>puorgh/<
>puorgh/<
>puorgh/<
>puorgh/<
>3h/<>em t/<>rbba/<
>3h/<>em t/<>rbba/<
>3h/<>em t/<>rbba/< ” “ rbba<
>3h/<>emiiiit/<>rbba/<.h> saroh =eltit rbba< 73:61 odazilautcA
rbba<
rbba<
>
>
.9002/21/01 seveuJ>etadbup "00:10+00:73:61T01-21-9002"=emitetad emiiiit<>3h<
> em t<>3h
em t<>3h
em t<>3h
ñ >2h/<
>2h/<
>2h/<lo apsE ne laidnuM red L>2h<
>2h/< í >2h<
>2h<
>2h<
>1h/<
>1h/<
>1h/<se.odnuM lE>1h<
>1h/< >1h<
>1h<
>1h<
>puorgh<
>puorgh<
>puorgh<
>puorgh<
>redaeh<
>redaeh<
>redaeh<
>redaeh<
>
>
>ocidoirep=ssalc niam=di noiiiitces<
> no tces<
no tces<
no tces<
>redaeh/<
>redaeh/<
>redaeh/<
>redaeh/<
>v d/<
>v d/<
>viiiid/<
>v d/<
>van/<
>van/<
>van/<
>van/<
> u/<
>llllu/<
> u/<
> u/<
> /<>a/<
> /<>a/<
> /<>a/< >
>
>iiiillll/<>a/<acetoremeH>"lmth.acetoremeh"=ferh a<>iiiillll<
> a<> <
a<> <
a<> <
> /<>a/<
> /<>a/< >
>
>iiiillll/<>a/<selaicepsE>"lmth.selaicepse"=ferh a<>iiiillll<
> /<>a/< > a<> <
a<> <
a<> <
> /<>a/<
> /<>a/<
> /<>a/< >
>
> a<> <
>iiiillll/<>a/<sgolB>"lmth.sgolb"=ferh a<>iiiillll<
a<> <
a<> <
> /<>a/<
> /<>a/<
> /<>a/< >
>
>iiiillll/<>a/<aidemitluM>"lmth.aidemitlum"=ferh a<>iiiillll<
> a<> <
a<> <
a<> <
> u<
>llllu<
> u<
> u<
>van<
>van<
>van<
>van<
>
>
>"odnuM lE ed opitogoL =tla gnp.odnuMlEogol"=crs gmiiii<
> “ “ gm <
gm <
gm <
>
>rab=ssalc viiiid<
>
> v d<
v d<
v d<
>redaeh<
>redaeh<
>redaeh<
>redaeh<
>
>
>reniatnoCpot=ssalc pot=di viiiid<
> v d<
v d<
v d<
>ydob<
>ydob<
>ydob<
>ydob<
>daeh/<
>daeh/<
>daeh/<
>daeh/<
>
>
>"ssc.odnumle =ferh teehselyts=ler kniiiillll<
> “ kn <
kn <
kn <
>
>
>
>"8-FTU"=tesrahc atem< atem<
atem<
atem<
>e t t/<
>e t t/<
>e t t/< >e t t<
>e t t<
>elllltiiiit/<se.odnumle>elllltiiiit<
>e t t<
>daeh<
>daeh<
>daeh<
>daeh<
> mth<
mth<
>se=gnal llllmth<
>
> mth<
>lmth EPYTCOD!<
Example “Diario El Mundo” as HTML5

TELEFÓNICA I+D
> mth/< >ydob/<
> mth/< >ydob/<
>llllmth/< >ydob/< >-- lapicnirp euqolb led nif --!< >viiiid/<
> mth/< >ydob/< >v d/<
>v d/<
>v d/<
>ed sa/<
>ediiiisa/<
>ed sa/<
>ed sa/<
>no tces/<>
>no tces/<> no tces<
>noiiiitces/<>opmeit=ssalc noiiiitces<
no tces<
>no tces/<>
>no tces/<>
no tces<
>noiiiitces/<>soicivres=ssalc noiiiitces<
no tces<
>ed sa<
>ed sa<
>ediiiisa<
>ed sa<
>no tces/<
>no tces/<
>-- ocidoirep led nif --!< >noiiiitces/<
>no tces/<
>retoof/<
>retoof/<
>retoof/<
>retoof/<
>van/<> u/<
>van/<>llllu/<
>van/<> u/<
>van/<> u/<
> /<>a/<
> /<>a/< í >
>
>iiiillll/<>a/<dadicavirP ed acit loP>lmth.virp=ferh a<>iiiillll<
> /<>a/< > a<> <
a<> <
a<> <
> /<>a/<
> /<>a/<
> /<>a/< >
>
> a<> <
>iiiillll/<>a/<lageL osivA>lmth.osiva=ferh a<>iiiillll<
a<> <
a<> <
> u<>van<
>llllu<>van<
> u<>van<
> u<>van<
<!– del periódico --> >retoof<
>retoof<
>retoof<
>retoof<
>no tces/<
>no tces/<
>-- adatrop al ed nif --!< >noiiiitces/<
>no tces/<
>e c tra/<
>e c tra/<
>ellllciiiitra/<
>e c tra/<
>v d/<>p/<
>v d/<>p/<
>viiiid/<>p/< .n isirp ne osac led sodatupmi ocnic sol ed
>v d/<>p/< ó
ocin le res ,o acraC leugiM ,ollitsaC led atraM anallives nevoj al ed osefnoc onisesa le ,n icalecracxe atse noC >p<
ú á ñ ó >p<
>p<
>p<
>> gm <>v d<
>taolf=ssalc gnp.negami=crs "leumaS ed otoF"=tla gmiiii<>viiiid<
> gm <>v d<
gm <>v d<
>puorgh/<
>puorgh/<
>puorgh/<
>puorgh/<
>1h/<>a/<
>1h/<>a/< >
>
>1h/<>a/<edrat atse rdlas euq ,leumaS a datrebil ne renop anedro aicneiduA aL >"lmth.1n"=ferh a<>1h<
>1h/<>a/< á > a<>1h<
a<>1h<
a<>1h<
>2h/<
>2h/< >naps/<
>naps/< >>
>2h/<n icneted us edsed avleuH ed lecr c al ne odatse aH >naps/< ATRAM OSAC>yrogetac=ssalc naps<>2h<
>2h/< ó á >naps/< > naps<>2h<
naps<>2h<
naps<>2h<
>puorgh<
>puorgh<
>puorgh<
>puorgh<
>e c tra<
>e c tra<
>ellllciiiitra<
>e c tra<
>e c tra/<
>e c tra/<
>ellllciiiitra/<
>e c tra/<
>retoof/<
>retoof/<
>retoof/<
>retoof/<
>van/<>a/<
>van/<>a/<
>van/<>a/< ó >
>
> a<>van<
>van/<>a/<yeR led n icaidem al nedip satsitrA soL>"lmth.x"=ferh a<>van<
a<>van<
a<>van<
>retoof<
>retoof<
>retoof<
>retoof<
>p/<
>p/<
>p/< .'radiaH osac' le ne
>p/<
"sairasecen senoitseg sal" razilaer a otseupsid artseum es solraC nauJ nod euq al ne atrac anu od el ah araL oyaC >p< í >p<
>p<
>p<
>redaeh/<
>redaeh/<
>redaeh/<
>redaeh/<
>puorgh/<
>puorgh/<
>puorgh/<
>puorgh/<
>1h/<>a/<
>1h/<>a/<
>1h/<>a/< >
> a<>
a<>
>1h/<>a/< jed el on onreiboG le orep 'radiaH' osac le ne raidem osiuq yeR lE >"lmth.1n"=ferh a<>sweNtsrif=ssalc 1h<
ó > a<> 1h<
1h<
1h<
>2h/<
>2h/< >2h<
>2h/<iuarahas atsivitca al ed agleuh al aunitnoC>2h<
>2h/< >2h<
>2h<
>puorgh<
>puorgh<
>puorgh<
>puorgh<
>redaeh<
>redaeh<
>redaeh<
>redaeh<
>e c tra<
>e c tra<
>ellllciiiitra<
>e c tra<
>1h/<
>1h/<
>1h/<odnuM lE ed adatroP>1h<
>1h/< >1h<
>1h<
>1h<
>
>
> no tces<
no tces<
>anigap=ssalc adatrop=di noiiiitces<
no tces<
Example “Diario El Mundo” as HTML5

TELEFÓNICA I+D
>erug f/<
>erug f/<
>erugiiiif/<
>erug f/<
>dd/<
>dd/<
>dd/<
>dd/<
>erp/<
>erp/<
>erp/<
>erp/<
>edoc/<
>edoc/<
>edoc/<
>edoc/<
} ; ) (t c u rt s e D fl e Sti ni di o v
;)atad >etyb;tl&ecneuqes ni(ataDdnes diov
;)(eniLataDyfirev naeloob { eroCyramirP ecafretni
>edoc<
>edoc<
>edoc<
>edoc<
>erp<
>erp<
>erp<
>erp<
>dd<
>dd<
>dd<
>dd<
>td/<
>td/<.noitaralced IPA ecafretni eroc yramirp ehT .4 gnitsiL>td<
>td/<
>td/< >td<
>td<
>td<
>
>
> erug f<
erug f<
>"4l"=di erugiiiif<
erug f<
>erug f/<
>erug f/<
>erugiiiif/<
>erug f/<
>td/<
>td/<
>td/< >td<
>td/<krow ta selbbuB>td<
>td<
>td<
>dd/<
>dd/<
>dd/<
>dd/<
>
>
> gm <
>"riahc eciffo sih ni gnittis ,selbbuB"=tla "gepj.krow-selbbub"=crs gmiiii<
gm <
gm <
>dd<
>dd<
>dd<
>dd<
>erug f<
>erug f<
>erugiiiif<
>erug f<
The <dd> element child of the element represents the element's contents. —
is no caption.
the figure element's contents. If there is no child <dt> element, then there
The <dt> element child of the element, if any, represents the caption of —
to dedicated pages, or to an appendix
be moved away from that primary content, e.g. to the side of the page,
document, but that could, without affecting the flow of the document,
listings, etc, that are referred to from the main content of the
It can be used to annotate illustrations, diagrams, photos, code
<figure> Element

Html5 Seminario Tid

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Html5 Seminario Tid

Similar a Html5 Seminario Tid (20)

Último

Último (20)

Html5 Seminario Tid