HTML5 Examples

Here are a few simple examples showing some of the new elements and attributes available in HTML5. Use Text View in XMLSpy (starting with Version 2012) to edit the HTML5 source and take advantage of the new entry-helpers that are now available.

Example 1: New element <section>

This entire document has been grouped into various sections to clearly separate the different examples. The sections are separated clearly in the Browser view.

Ceremony

Opening Procession

Speech by Validictorian

Closing Speech by Headmaster

Visitors

Footer information for section.

Example 2: New element <article>

The new <article> element allows for a better structure and presentation of articles, such as different blog entries and their corresponding comments, and provides uniform rendering in the browser.

Tech Topics: What is XBRL?

Published:

Extensible Business Reporting Language (XBRL) is an XML-based vocabulary for electronic transmission of business and financial data. Currently in version 2.1, XBRL is an open standard that is maintained by XBRL International, a global non-profit consortium of over 550 major companies, organizations, and government agencies.

XBRL was developed to facilitate business intelligence (BI) automation by enabling machine-to-machine communication and data processing for financial information with an eye towards cost reduction through the elimination of time consuming and error-prone human interaction.

Drawing upon the power and flexibility of the XML family of standards, XBRL utilizes familiar W3C specifications such as XML Namespaces, XML Schema, XPath, and XLink to offer a growing set of taxonomies for defining semantics, syntax, and relationships for single source financial reporting, helping to overcome data redundancy and quality issues in addition to offering instantaneous delivery to a variety of different output formats.

Source: http://www.altova.com/whitepapers/XBRL_Whitepaper.pdf

Example 3: SVG Elements

You can now include SVG elements directly within your HTML5 code, such as this orange circle and pink rounded rectangle with a gray border.

Example 4: New elements <figure>, <video> and <figcaption>

Video Example - using child element <source> and 'poster' attribute