Enviar búsqueda
Cargar
Html5 Seminario Tid
•
1 recomendación
•
1,038 vistas
José Manuel Cantera Fonseca
Seguir
Training course at TID on HTML5
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 58
Recomendados
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
José Manuel Cantera Fonseca
OpenCms Days 2013 - Social Connect for OpenCms Portal
OpenCms Days 2013 - Social Connect for OpenCms Portal
Alkacon Software GmbH & Co. KG
Ppt to Website
Ppt to Website
Noemi Longjas-Ampong
OpenCms Days 2012 - OpenCms 8 as a JSR-286 compliant portlet server
OpenCms Days 2012 - OpenCms 8 as a JSR-286 compliant portlet server
Alkacon Software GmbH & Co. KG
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
Peter Lubbers
Html Hell
Html Hell
Ian Ecclestone
Notes/Domino Application Development Competitive Advantage - UKLUG 2011 Edition
Notes/Domino Application Development Competitive Advantage - UKLUG 2011 Edition
John Head
¿Vacaciones en Buzios?¡Diversión asegurada!
¿Vacaciones en Buzios?¡Diversión asegurada!
TurismoyViajesporAmerica
Recomendados
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
José Manuel Cantera Fonseca
OpenCms Days 2013 - Social Connect for OpenCms Portal
OpenCms Days 2013 - Social Connect for OpenCms Portal
Alkacon Software GmbH & Co. KG
Ppt to Website
Ppt to Website
Noemi Longjas-Ampong
OpenCms Days 2012 - OpenCms 8 as a JSR-286 compliant portlet server
OpenCms Days 2012 - OpenCms 8 as a JSR-286 compliant portlet server
Alkacon Software GmbH & Co. KG
HTML5--The 30,000' View (A fast-paced overview of HTML5)
HTML5--The 30,000' View (A fast-paced overview of HTML5)
Peter Lubbers
Html Hell
Html Hell
Ian Ecclestone
Notes/Domino Application Development Competitive Advantage - UKLUG 2011 Edition
Notes/Domino Application Development Competitive Advantage - UKLUG 2011 Edition
John Head
¿Vacaciones en Buzios?¡Diversión asegurada!
¿Vacaciones en Buzios?¡Diversión asegurada!
TurismoyViajesporAmerica
Presentacion teoria
Presentacion teoria
Lissette Mejia
Siguencia jefferson grupo1
Siguencia jefferson grupo1
jefferpauls
Aprendizaje autónomo
Aprendizaje autónomo
kriRdgz
Tema 17 El núvol
Tema 17 El núvol
JordiAntonUrrios
NTIC EN LA EDUCACION SOCIEDAD Y TRABAJO
NTIC EN LA EDUCACION SOCIEDAD Y TRABAJO
jenniferavilavictoria
Evangeli1
Evangeli1
Gladysmorayma Creamer Berrios
Actividad 2
Actividad 2
primariaTERCERO
Florcarina flores
Florcarina flores
Florxi Flores
LECTIO DIVINA DEL EVANGELIO DE HOY MARCOS 12., 1, 12
LECTIO DIVINA DEL EVANGELIO DE HOY MARCOS 12., 1, 12
Gladysmorayma Creamer Berrios
Apliicaciones de las tics
Apliicaciones de las tics
Piopote
Reporte monitoreo financiero 20 11-2014
Reporte monitoreo financiero 20 11-2014
afipdocumentos
Novena dia 5
Novena dia 5
Cory Sanchez
EL TRAYECTO DE_PRACTICA_PROFESIONAL_PARA_SU_DESARROLLO
EL TRAYECTO DE_PRACTICA_PROFESIONAL_PARA_SU_DESARROLLO
Jovita Guerrero Molina
Presentación1
Presentación1
Disponible54
Tema 2
Tema 2
nietobidarte
Благодарственное письмо
Благодарственное письмо
Reforma FAS
Proyecto de ley: POR MEDIO DE LA CUAL SE REGLAMENTA LA AUTORIZACIÓN DE VIAJES...
Proyecto de ley: POR MEDIO DE LA CUAL SE REGLAMENTA LA AUTORIZACIÓN DE VIAJES...
PrensaSenador
Quinto informe IPCC y Negociacion en la CMNUCC
Quinto informe IPCC y Negociacion en la CMNUCC
ipcc-media
ОТКРЫВАЯ ЧУДО ОГРОМНОГО КОЛИЧЕСТВА АНТИМОНОПОЛЬНЫХ РАССЛЕДОВАНИЙ В РОССИИ: РО...
ОТКРЫВАЯ ЧУДО ОГРОМНОГО КОЛИЧЕСТВА АНТИМОНОПОЛЬНЫХ РАССЛЕДОВАНИЙ В РОССИИ: РО...
Reforma FAS
Оценка ожидаемых экономических эффектов отдельных новаций "пятого антимонопол...
Оценка ожидаемых экономических эффектов отдельных новаций "пятого антимонопол...
Reforma FAS
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
Kanishka Chakraborty
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
Team Mango Media Private Limited
Más contenido relacionado
Destacado
Presentacion teoria
Presentacion teoria
Lissette Mejia
Siguencia jefferson grupo1
Siguencia jefferson grupo1
jefferpauls
Aprendizaje autónomo
Aprendizaje autónomo
kriRdgz
Tema 17 El núvol
Tema 17 El núvol
JordiAntonUrrios
NTIC EN LA EDUCACION SOCIEDAD Y TRABAJO
NTIC EN LA EDUCACION SOCIEDAD Y TRABAJO
jenniferavilavictoria
Evangeli1
Evangeli1
Gladysmorayma Creamer Berrios
Actividad 2
Actividad 2
primariaTERCERO
Florcarina flores
Florcarina flores
Florxi Flores
LECTIO DIVINA DEL EVANGELIO DE HOY MARCOS 12., 1, 12
LECTIO DIVINA DEL EVANGELIO DE HOY MARCOS 12., 1, 12
Gladysmorayma Creamer Berrios
Apliicaciones de las tics
Apliicaciones de las tics
Piopote
Reporte monitoreo financiero 20 11-2014
Reporte monitoreo financiero 20 11-2014
afipdocumentos
Novena dia 5
Novena dia 5
Cory Sanchez
EL TRAYECTO DE_PRACTICA_PROFESIONAL_PARA_SU_DESARROLLO
EL TRAYECTO DE_PRACTICA_PROFESIONAL_PARA_SU_DESARROLLO
Jovita Guerrero Molina
Presentación1
Presentación1
Disponible54
Tema 2
Tema 2
nietobidarte
Благодарственное письмо
Благодарственное письмо
Reforma FAS
Proyecto de ley: POR MEDIO DE LA CUAL SE REGLAMENTA LA AUTORIZACIÓN DE VIAJES...
Proyecto de ley: POR MEDIO DE LA CUAL SE REGLAMENTA LA AUTORIZACIÓN DE VIAJES...
PrensaSenador
Quinto informe IPCC y Negociacion en la CMNUCC
Quinto informe IPCC y Negociacion en la CMNUCC
ipcc-media
ОТКРЫВАЯ ЧУДО ОГРОМНОГО КОЛИЧЕСТВА АНТИМОНОПОЛЬНЫХ РАССЛЕДОВАНИЙ В РОССИИ: РО...
ОТКРЫВАЯ ЧУДО ОГРОМНОГО КОЛИЧЕСТВА АНТИМОНОПОЛЬНЫХ РАССЛЕДОВАНИЙ В РОССИИ: РО...
Reforma FAS
Оценка ожидаемых экономических эффектов отдельных новаций "пятого антимонопол...
Оценка ожидаемых экономических эффектов отдельных новаций "пятого антимонопол...
Reforma FAS
Destacado
(20)
Presentacion teoria
Presentacion teoria
Siguencia jefferson grupo1
Siguencia jefferson grupo1
Aprendizaje autónomo
Aprendizaje autónomo
Tema 17 El núvol
Tema 17 El núvol
NTIC EN LA EDUCACION SOCIEDAD Y TRABAJO
NTIC EN LA EDUCACION SOCIEDAD Y TRABAJO
Evangeli1
Evangeli1
Actividad 2
Actividad 2
Florcarina flores
Florcarina flores
LECTIO DIVINA DEL EVANGELIO DE HOY MARCOS 12., 1, 12
LECTIO DIVINA DEL EVANGELIO DE HOY MARCOS 12., 1, 12
Apliicaciones de las tics
Apliicaciones de las tics
Reporte monitoreo financiero 20 11-2014
Reporte monitoreo financiero 20 11-2014
Novena dia 5
Novena dia 5
EL TRAYECTO DE_PRACTICA_PROFESIONAL_PARA_SU_DESARROLLO
EL TRAYECTO DE_PRACTICA_PROFESIONAL_PARA_SU_DESARROLLO
Presentación1
Presentación1
Tema 2
Tema 2
Благодарственное письмо
Благодарственное письмо
Proyecto de ley: POR MEDIO DE LA CUAL SE REGLAMENTA LA AUTORIZACIÓN DE VIAJES...
Proyecto de ley: POR MEDIO DE LA CUAL SE REGLAMENTA LA AUTORIZACIÓN DE VIAJES...
Quinto informe IPCC y Negociacion en la CMNUCC
Quinto informe IPCC y Negociacion en la CMNUCC
ОТКРЫВАЯ ЧУДО ОГРОМНОГО КОЛИЧЕСТВА АНТИМОНОПОЛЬНЫХ РАССЛЕДОВАНИЙ В РОССИИ: РО...
ОТКРЫВАЯ ЧУДО ОГРОМНОГО КОЛИЧЕСТВА АНТИМОНОПОЛЬНЫХ РАССЛЕДОВАНИЙ В РОССИИ: РО...
Оценка ожидаемых экономических эффектов отдельных новаций "пятого антимонопол...
Оценка ожидаемых экономических эффектов отдельных новаций "пятого антимонопол...
Similar a Html5 Seminario Tid
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
Kanishka Chakraborty
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
Team Mango Media Private Limited
Html5
Html5
Nitish Sharma
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
Edgar Parada
HTML5 and XHTML2
HTML5 and XHTML2
Michael(tm) Smith
HTML5
HTML5
Western Illinois University Libraries
Html5
Html5
Shivani Gautam
Html5
Html5
Shivani Gautam
Html
Html
viralsaliya
Modern Web Applications
Modern Web Applications
Srdjan Strbanovic
Html5
Html5
Oliver Zico Mendes
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
ijceronline
Html5
Html5
Western Illinois University Libraries
Html birth & evolution
Html birth & evolution
Adil Nisar Khan
Web Development Training Report.docx
Web Development Training Report.docx
CuriosityKlinic
Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5
Christian Heindel
Html5 mobile apps
Html5 mobile apps
princeofgiri
HTML5: The next disruptive technology
HTML5: The next disruptive technology
Linda Jacobson
Report html5
Report html5
Himanshu Phulara
Full Stack Development Course in Gurgaon
Full Stack Development Course in Gurgaon
digitallynikitasharm
Similar a Html5 Seminario Tid
(20)
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
Html5
Html5
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
HTML5 and XHTML2
HTML5 and XHTML2
HTML5
HTML5
Html5
Html5
Html5
Html5
Html
Html
Modern Web Applications
Modern Web Applications
Html5
Html5
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
Html5
Html5
Html birth & evolution
Html birth & evolution
Web Development Training Report.docx
Web Development Training Report.docx
Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5
Html5 mobile apps
Html5 mobile apps
HTML5: The next disruptive technology
HTML5: The next disruptive technology
Report html5
Report html5
Full Stack Development Course in Gurgaon
Full Stack Development Course in Gurgaon
Último
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
gurkirankumar98700
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Results
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
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
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
Último
(20)
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Slack Application Development 101 Slides
Slack Application Development 101 Slides
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
Html5 Seminario Tid
1.
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
2.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
3.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
4.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
5.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
6.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
7.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
8.
HTML5 Design Principles
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
9.
HTML5 Design Principles
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
10.
HTML5 Design Principles
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
11.
© 2009 Telefónica
Investigación y Desarrollo, S.A. Unipersonal 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< >eltit/<tnemucoD LMTH nA>eltit< > "8-FTU"=tesrahc atem< >daeh< >lmth< >lmth EPYTCOD!< (text/html) HTML Serialization Getting Started
12.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
13.
HTML5 .- XHTML
vs HTML 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
14.
HTML5 .- XHTML
vs HTML 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
15.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
16.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
17.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
18.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
19.
<script> <noscript> elements
<script> — @type, normally ‘text/javascript’ — @src, if specified the script element should be empty — @charset, must not be specified if the @src it is not specified — @language no longer allowed — @async, @defer (new) are boolean attributes that indicate how the script should be executed. Three modes – @async=true indicates that the script should be executed asynchronously as soon as the script is available – @defer=true, the script will executed once the page has finished parsing – If @async and @defer are not present the script is executed immediately i.e. before the user agent continues parsing the rest of the page <noscript> — Allows to include fallback content in case scripting is not enabled TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
20.
© 2009 Telefónica
Investigación y Desarrollo, S.A. Unipersonal 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< >eltit/<tnemucoD LMTH nA>eltit< > "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
21.
<link> element
Regular links (<a href>) simply point to another page. Link relations are used to explain why another HTTP resource is being pointed — They are conveyed using the @rel attribute — Note: The @rev attribute has disappeared in HTML5 HTML 5 breaks link relations into two categories: — links to external resources that are to be used to augment the current document – The behavior depends on the exact relationship, as defined for the relevant link type. Example: – <link rel=stylesheet type=“text/css” href=“mycss.css”> — hyperlink links are links to other documents. Example: – <link rel=alternate type=“application/atom+xml” href=“http://myfeeds.com/feed1”> TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
22.
<link> relations
rel=alternate — in conjunction with the type attribute indicates the same content in another format. Example: the same page in another language: – <link rel=alternate type=“text/html” href=“en/page.html” hreflang=en> rel=archives — indicates that the referenced document describes a collection of records, documents, or other materials of historical interest. – Ex. A blog’s index page could link to an index of the blog’s past posts rel=author — link to information about the author of the page (ex. a mailto: URI or a URI pointing to a FOAF document) rel=first, last, prev, next, and up — to define relations between pages that are part of a series TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
23.
<link> Relations
rel=icon — <link rel=icon href=windows.ico sizes="32x32 48x48"> rel=prefetch — indicates that preemptively fetching and caching the specified resource is likely to be beneficial, as it is highly likely that the user will require this resource. rel=search — indicates that the referenced document provides an interface specifically for searching the document and its related resources. — it should point to an OpenSearch document that describes how a browser could construct a URL to search the current site for a given keyword. And others — see http://www.htmlfive.net/the-road-to-html-5-link-relations/ TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
24.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
25.
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 >eltit/<tnemucoD LMTH nA>eltit< >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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
26.
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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
27.
© 2009 Telefónica
Investigación y Desarrollo, S.A. Unipersonal TELEFÓNICA I+D >redaeh/< >van/< >llllu/< >redaeh/< >van/< > u/< >redaeh/< >van/< > u/< >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
28.
© 2009 Telefónica
Investigación y Desarrollo, S.A. Unipersonal 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/<> >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
29.
© 2009 Telefónica
Investigación y Desarrollo, S.A. Unipersonal 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