HTML5

Agenda

  1. Intro. History of HTML
  2. HTML4
  3. XHTML
  4. Doctype
  5. Industry evolution
  6. HTML5 and its benefits
  7. HTML5 today
  8. What's next?

History of HTML

Why should we study the history?

Developed in 1986—1991 by Tim Berners-Lee

HTML 1.0 specification does not exist

Until 1995, there were many informal standards for HTML. In order to create the standard version different from them, it was immediately assigned the second number

Timeline

24.11.1995

HTML 2.0 was published as IETF RFC 1866

14.01.1997

HTML 3.2 was published as a W3C Recom.

18.12.1997

HTML 4.0 was published as a W3C Recom.

24.12.1999

HTML 4.01 was published as a W3C Recom.

15.05.2000

ISO HTML, based on HTML 4.01 Strict was published as an ISO/IEC international standard

28.10.2014

HTML5 was published as a W3C Recom.

HTML4
implementation and improvements

HTML 4

The biggest clean standard.
Many elements have been marked as obsolete and deprecated.

Deprecated and obsolete attributes in HTML 4.0

  • background and bgcolor (deprecated. use CSS instead.) attributes for body
  • align (deprecated. use CSS instead.) attribute on div, form, p and h1...h6 elements
  • align, noshade, size and width (deprecated. use CSS instead.) attributes on hr element
  • align, border, vspace and hspace (deprecated. use CSS instead.) attributes on img element
  • align (deprecated. use CSS instead.) attribute on legend and caption elements
  • align (deprecated. use CSS instead.) and bgcolor (deprecated. use CSS instead.) on table element
  • nowrap (obsolete), bgcolor (deprecated. use CSS instead.), width, height on td and th elements
  • bgcolor (deprecated. use CSS instead.) attribute on tr element
  • clear (obsolete) attribute on br element
  • compact attribute on dl, dir and menu elements
  • type, compact and start (deprecated. use CSS instead.) attributes on ol and ul elements
  • type and value attributes on li element
  • width attribute on pre element

specifications

Strict

Transitional

Frameset

Where are the deprecated elements of html4
are used now?


Hello world!
Which element was deprecated in HTML4, but reintroduced in HTML5.1?
contextual-menu 


  
     Rotate 90
     Rotate 180
     Flip Horizontally
     Flip Vertically
  
  

  View Image
  Copy Image
  Copy Image Location
   ....

XHTML1

XHTML1
extensible hypertext markup language

In 1998, World Wide Web Consortium began work on the new markup language based on HTML 4 but corresponding syntax XML. Subsequently, a new language called XHTML. The first version of XHTML 1.0 as a Recommendation approved by W3C in January 26, 2000.

HTML
1990

XML
1996

XHTML
2000

Differences between XHTML and HTML

The main difference with HTML and XHTML is processing the document. XHTML documents are processed by its module (parser) similar documents XML.
During this processing, the mistakes made by developers, not corrected. As a W3C Recommendation browsers encountering an error in XHTML, you must report it and not to process document. For HTML browsers had to try to understand what the author meant;

Browser selects the parser to process the document based on the header content-type, obtained from the server:
HTML — text/html
XHTML — application/xhtml+xml

The default encoding is UTF-8 (as opposed to HTML, which is the default encoding ISO 8859-1).

Rules of XHTML

  • All elements must be closed. Tags that don't have a closing tag (e.g. <img> or <br>), must have at the end / (e.g. <br />)
  • Logical attributes are written in expanded form. For example, you should write <option selected="selected"> or <td nowrap="nowrap"> instead <option selected> or <td nowrap>
  • Tag names and attributes must be written in lowercase letters (e.g. <img alt="" /> instead <IMG ALT="" />)
  • XHTML is much stricter refers to errors in the code < and & everywhere, even in the URL, must be replaced by &lt; and &amp; respectively.

<!DOCTYPE>

Doctype (document type declaration)

A document type declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a document type definition (DTD) (for example, the formal definition of a particular version of HTML)

Syntax


<!DOCTYPE [Top level element] [Publicity] "[Registration]//[Organization]//[Type] [Name]//[Lang]" "[URL]">
  • Top level element — It indicates the top-level element in a document to HTML, this tag <html>.
  • Publicity — PUBLIC or SYSTEM
  • Registration — Developer DTD registered with the International Organization for Standardization. It takes one of two values: plus - a developer registered in the ISO, and minus - the developer is not registered. The W3C value put "-".
  • Organization — unique name of the organization that developed the DTD
  • Type — type describes the document. For HTML value specified DTD.
  • Name — unique name to describe the document DTD.
  • Lang — the language in which the text is written to describe the object
  • URL — address of the document with DTD.

List of Doctype


<!DOCTYPE [Top level element] [Publicity] "[Registration]//[Organization]//[Type] [Name]//[Lang]" "[URL]">


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

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


<!DOCTYPE html>

Validation

validator

Industry evolution

1998

start work on
XHTML draft version

2000

XHTML was
published as
a W3C Recom.

???

XHMTL 2 draft

HMTL 5 draft

2014

HTML5 was
published as
a W3C Recom.

2016

HTML5.1 was
published as
a W3C Recom.

Problems XHTML1

Although browsers understand markup XHTML, they did not provide a rigorous test of derogations from the rules required by this standard. This means that the page can be set up in violation of the rules of XHTML, but browsers do not blink an eye when it is processed.

XHTML2

This issue should, in theory, be solved in the next version - XHTML 2. It had to tighten the rules for error handling, which would be forced browsers don't handle the pages that do not correspond to valid XHTML 2. In XHTML 2 also got rid of many strange and agreements inherited from HTML.

typical changes for XHTML2

  • The numbering system header (<h1>, <h2>,, <h3>, etc.) has been replaced by a single element <h>, with the level it designates the title, depending on the location of the element in a web page.
  • The element <a>, has been replaced by the possibility of allowing web developers to convert any element in the link
  • Of XHTML 2 was removed a few handy items that are still popular among web developers, such as <b> (bold text), <i> (italic text) and <iframe> (to attach a web page to another).

What happened while HTML sleeping?

While HTML was sleeping, related technologies (mainly, CSS, and JavaScript) were sleeping or nap too
Internet continues to evolve, demanding new features and find ways of their implementation.

Within standard HTML 4 and had not yet been finally adopted CSS 2.1 and the previous standard JavaScript - ECMAScript 3, armed power plug-ins (primarily, Flash, and later, Silverlight), Web developers have made a revolution on the Internet:

Revolution on the Internet

  • Rich Internet Applications (RIA) and general Web applications that run entirely in the web browser
  • Asynchronous communication (AJAX)
  • Web 2.0, social networks
  • Online video and audio in the browser, live streaming
  • Communication via webcam and microphone directly in your browser
  • Features such as geolocation
  • Increase in popularity of Javascript
  • also update the power of computer technology

Web Hypertext Application Technology Working Group WHATWG and HTML 5

Created by Opera Software, Mozilla Foundation and Apple

HTML5

the cornerstone

for modern Web applications

html4-html5

Semantics

Multimedia

Graphics

Web Forms

JavaScript APIs

html5

umbrella term

html5

HTML5 Extended or HTML5+

html5

New Elements

section Represents a generic document or application section
article Represents an independent piece of content of a document, such as a blog entry or newspaper article
aside Represents a piece of content that is only slightly related to the rest of the page
header Represents a group of introductory or navigational aids
footer Represents a footer for a section and can contain information about the author, copyright information, etc
nav Represents a section of the document intended for navigation
figure Represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document
canvas This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games
audio / video Defines an audio / video file
embed Defines external interactive content or plugin
meter Represents a measurement, such as disk usage
time Represents a date and/or time
command Represents a command the user can invoke
details Represents additional information or controls which the user can obtain on demand
progress Represents a completion of a task, such as downloading or when performing a series of expensive operations

New types for <input> tag

date Selector for calendar date
color Color selector, which could be represented by a wheel or swatch picker
email Input type should be an email
number A field containing a numeric value only
range Numeric selector within a range of values, typically visualized as a slider
search Term to supply to a search engine. For example, the search bar atop a browser
tel Input type should be telephone number
time Time indicator and selector, with no time zone information
url Input type should be URL type

Compare semantic HTML4 and HTML5

<div id="header">
    <h1>Header of Site</h1>
</div>
<div id="sidebar">
    <h2>Menu</h2>
    <ul>
        <li><a href="#">Menu item #1</a></li>
        <li><a href="#">Menu item #2</a></li>
    </ul>
</div>
<div class="post">
    <h2>Post #1</h2>
    <p>description of first post.</p>
</div>
<div class="post">
    <h2>Post #2</h2>
    <p>description of second post.</p>
</div>
<div id="footer">
    <p>Bottom of Page</p>
</div>
<header>
    <h1>Header of Page</h1>
</header>
<nav>
    <h2>Menu</h2>
    <ul>
        <li><a href="#">Menu item #1</a></li>
        <li><a href="#">Menu item #2</a></li>
    </ul>
</nav>
<article>
    <h2>Post #1</h2>
    <p>description of first post.</p>
</article>
<article>
    <h2>Post #2</h2>
    <p>description of second post.</p>
</article>
<footer>
    <p>Bottom of Page</p>
</footer>

New APIs

W3C Technical Report Development Process

  1. Publication of the First Public Working Draft,
  2. Publication of zero or more revised Public Working Drafts.
  3. Publication of a Candidate Recommendation.
  4. Publication of a Proposed Recommendation.
  5. Publication as a W3C Recommendation.
  6. Possibly, Publication as an Edited Recommendation
w3c-flow

Standards

Session history management, Offline web applications, Drag and Drop, Text API for Canvas, WebGL - 3D Canvas graphics
Web Notifications
REC 22.10.15 		This API used for displaying simple notifications to the user.
HTML5 Web Messaging
REC 18.05.15 		This specification defines mechanisms for communicating between browsing contexts in HTML document. Messages in server-sent events, Web sockets, cross-document messaging, channel messaging, and broadcast channels use the MessageEvent interface
Server-Sent Events
REC 02.03.15 		This specification defines an API for opening an HTTP connection for receiving push notifications from a server in the form of DOM events.
Geolocation API
REC 24.10.13 		This API is used to provide web applications with scripted access to geographical location information of the hosting device.
Vibration API, Pointer Events, Progress Events, Metadata API, Page Visibility, Widget Interface

Recommendations

Web storage (Second Edition)
REC 19.04.16 		This specification defines an API for persistent data storage of key-value pair data in Web clients.
Media Source Extensions
REC 17.11.16 		This specification extends the HTMLMediaElement interface to allow JavaScript to generate media streams for playback.
WebSocket API
CR 20.09.2012 		This specification defines an API that enables Web pages to use the Web Sockets protocol for two-way communication with a remote host.
Media Capture API
CR 09.09.2014 		This document defines a set of APIs that allow access to the audio, image and video capture capabilities of the device.
Web Cryptography API, Battery Status API, DeviceOrientation Event

Draft

File API The File APIs are used by the browser to provide secure access to the file system.
HTML Microdata This API is used to annotate content with specific machine-readable labels, e.g. to allow generic scripts to provide services that are customized to a page. Microdata allows nested groups of name-value pairs to be added to documents.
Geolocation API Spec. Level 2 This specification adds the ability to retrieve a civic address, rather than coordinates, to the Geolocation API.
Web workers Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
Clipboard API This document describes apis for clipboard operations such as copy/cut and paste, or drag and drop in web applications.

HTML5 today

HTML5.1

W3C Recommendation, 1 November 2016

What's new?

  • table sorting
  • details and summary element
  • dialog element
  • picture element and srcset attribute
  • menu, menuitem, contextmenu elements
  • datetime, datetime-local, week, month input types
  • inert attribute
  • :dir() pseudoclass
  • fullScreen() method
  • HTMLFormElement.reportValidity() method
  • new Canvas methods

Can I use?

caniuse

What's next?

html-next

Forms

  • Automatic writing in input-forms with capital letters
  • Localization of controls (Web developers often have a lack of ability to localize the controls, such as: the button «Browse» to fields <input type=’file’ />, controls for setting the date/time)


Multimedia

  • Audio balance Adjusting audio balance (right / left channel) with HTML5 for stereo tracks.
  • Improving video playback fast / slow motion / fast forwarding and previous / next frame

Text editing

  • Element <editоr> This element allows to save the typed text.
  • <textarea type=”wysiwyg”> The main objective: WYSIWYG-editor for structured (semantic) text. Intended use: blogs, emails, editing articles of CMS sites, and so on. Estimated list of supported elements:
    - blocks: p, ul/li, ol/li, dl/dt/dd, blockquote, pre
    - spans: strong/em/a/sup/sub/u/code/strike
    - inline-blocks: img, br
    - tables: table/tr/th/td

HTML5.2

W3C Working Draft, 28 February 2017

Useful links

Important thing is not to remember,
but to be able to find the information

THE END

any questions?