Category Archives: HTML5

01 – INTRO TO HTML5

New Elements for better structure:
other new elements:
Unusual Elements/Tags:

2014
Style.css 2014

inline-block-2015
inline-block-2015

inline-block-2016
inline-block-2016

display-block-2015
display-block-2015

display-block-2016
display-block-2016

Input Element Type Attribute Values:
New Attributes to existing elements:
Deprecated Tags:
Deprecated Attributes:
HTML5 Differences from HTML4: w3.org/TR/html5-diff

02 – HISTORY

  • HTML Version 2
  • HTML3 (1995)
  • HTML 3.2 (1997)
  • HTML4 (1998)
  • HTML 4.01 (1999) -> XHTML
  • HTML5 (2014)

In 2004, at a two day workshop in San Jose, California on Web Applications and Compound Documents, the World Wide Web Consortium staff advocated replacing that stack with non-backward-compatible XHTML2 + XForms + SVG + MathML + RDFa.

However, a poll taken at the end of the workshop showed that browser makers unanimously favored an incremental approach based on evolving HTML4/ XHTML1 + CSS + DOM.

In 2005, the  W3C  began work on HTML5 to advance regular HTML, and in 2009 it acknowledged that HTML5 would be the only next-generation version of HTML, although it would include both XML and non-XML serializations.

  • Fixes to HTML4
  • Richer Semantic Markup
  • New Forms Capabilities
  • Native Multimedia
  • Programmable Vector Graphics
  • Powerful APIs

All browsers need two modes: quirks mode for the old rules, strict mode for the standard.

03 – SEMANTIC WEB

Semantic Web: an evolutionary stage of the World Wide Web in which automated software can store, exchange, and use machine-readable information distributed throughout the Web, in turn enabling users to deal with the information with greater efficiency and certainty.

Convert unstructured web documents into a common framework that allows data to be shared and reused across application, enterprise, and community boundaries.

Object-oriented design; object (sky), attribute (color) and value (blue)

05 – TRANSITION

MARKUP

Presentational -> Semantic

Attributes & Properties

<input id="the-input" type="text" value="Name:">

The  value attribute of input contains the initial text-content of the value attribute from the HTML source code. The value property reflects the current text-content inside the input box.


CSS TO REPLACE PRESENTATIONAL MARKUP

HTML Font Tag

CSS Font Properties

  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight

 

IMAGE HYPERLINK

<a href=”…”><img border=”0″></a>

:link img,:visited img { border:0; }

 

TABLES

For XHTML/XML compatibility, include a <tbody> tag along with the opening and closing tags of every <table>:

table

 

CSS for table presentation:

<style> 
table { border-collapse:collapse; } 
td { border: 2px solid black; padding: 10px; text-align:right; } 
</style>
11 12
21 22

06 – SEMANTIC RECASTING

The <strong> element has been redefined to mean “importance”. Use <em> for emphasis.

Use the <small> element for little bits of legalese or other items to explicitly de-emphasize. Things such as

  • small print legalese
  • disclaimers
  • caveats
  • copyright statements

The formerly presentational <i> for italics has been redefined to semantically express any one of the following:

  • idioms
  • taxonomy terms
  • technical terms
  • ship names

Use the <b> element for the following:

  • keyword
  • product name
  • lead sentence or paragraph

The primary semantic use for the <br> element is for lines of poetry.

The <hr> element has found meaning in separating paragraphs to indicate a thematic break between them. Control its appearance with CSS:

hr { border:0 }
hr { width:100%; height:3em; background:url(images/flourish.jpg) no-repeat; }

<hr style="height: 3em; background: url('http://zapmap.com/images/flourish.jpg') no-repeat scroll center;" />

Use the seamless attribute to undo any default presentation around iframes.

<iframe src=”embedded.html” seamless=”seamless”></iframe>

 

The target attribute is now valid on a, area, and base:

<a target=”t1”> - the hyperlink targets the iframe or window named “t1”
<area target=”t1”> - the imagemap area link targets “t1”
<base target=”t1”> - all links target “t1” by default

07 – FLEXIBILITY

Wrap your links around both the heading and the image:

<a rel="bookmark" href="http://shakespeare.com/hamlet"> 
    <img src="http://shakespeare.com/hamlet" alt="">
    <h3>To be, Or not to be?</h3>
</a>

Use one hyperlink for both to simplify your markup, eliminate a potential source of data drift errors, and help with accessibility by getting rid of the adjacent duplicate hyperlinks.

These attributes are allowed on all elements:

  • class
  • dir
  • id
  • lang
  • style
  • tabindex
  • title

Use the following attributes on all <a>, <area>, and <link> elements:

  • media (to indicate applicable media)
  • hreflang (language of the destination)
  • rel (relation of the destination to the source)

09 – VECTOR GRAPHICS


JavaScript can draw a line in the canvas element.


canvas

11 – USER INTERFACE ELEMENTS

The search input type is a special kind of text input that conveys the additional semantic that the user will be entering search terms.

Numerous date and time inputs for specifying the date and time, a month, or a week.

Input types of tel, url, and email also represent special text inputs, but with different structures as well as semantics.

On an <input> element, the autofocus attribute indicates to the browser that this input should be focused upon loading the page, so the user can start typing without having to first activate that input.

The <output> element is used to perform some sort of computation or calculation based on input from the user.

The <details> element is for representing and presenting a piece of content that offers a summary label with further details provided through a progressive disclosure interface. The new <summary> element marks up the summary or label inside the <details> element.

details

Shopping List
  • avocado
  • broccoli
  • carrots
  • grapes
  • kale
  • spinach
  • tamales
  • tomatoes

The <meter> element can be used to display measurements such as a score, a rating, a countdown, or donations towards a goal. The new element comes with min and max attributes to set the bottom and top ends of the range, as well as a value attribute.

The <progress> element is for the special case of progress towards completion of a task; and also has max and value attributes.

 

12 – FOR MORE INFORMATION

HTML5 differences from HTML4

HTML: The Markup Language

Geolocation API (http://www.w3.org/TR/geolocation-API). Allows a web page to ask the browser for geolocation information about where the user is.

HTML Device (http://dev.w3.org/html5/html-device). For accessing various hardware capabilities, such as built-in cameras or microphones.

Microdata (http://www.w3.org/TR/microdata). A way to annotate content in HTML with custom vocabularies.

Web Sockets API (http://www.w3.org/html5/websockets). Defines an API for two-way communication between web pages and servers.

Web SQL Database (http://www.w3.org/TR/webdatabase). Defines an API for storing data in a database in the web browser that can be queried using a variant of SQL.

Indexed Database API (http://www.w3.org/TR/IndexedDB). A non-SQL alternatives is the Indexed Database API, which defines a database of records holding simple values and hierarchical object records of key/value pairs.

Web Storage (http://www.w3.org/TR/webstorage). Simpler than a database, Web Storage defines an API for storing key/value pairs in the browser, a logical step forward from using cookies.

Web Workers (http://www.w3.org/TR/workers). Web Workers is an API for creating additional JavaScript threads that are able to run in the background.

Web Messaging (http://dev.w3.org/html5/postmsg). Defines mechanisms for communicating between different browser windows, tabs, and iframes.