The QR element is an image container whose source content is automatic generated from input text (e.g. text, URL, call, SMS, vCard… et.al).

Introduction

QR Code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional code) first designed for the automotive industry [[!ISOIEC-18004-2006]]. More recently, the system has become popular outside the industry due to its fast readability and large storage capacity compared to standard UPC barcodes. Generally, the code consists of black modules (square dots) arranged in a square pattern on a white background. The information encoded can be made up of four standardized kinds ("modes") of data or through supported extensions, virtually any kind of data.

Example QR element

This first sample shows how to use the QR element with attirbutes.

Code Example: 
         
Here is an example of the use of QR element in an HTML document:	
            
    <qr size="100" type="url" value=”http://qr.html5ok.kr”>

   
		 
Code Example: 
         
This is another example to geological sharing of QR element in an HTML document:	
 	 
    <qr size="100" type="url" value=”geo:36.381936,127.365105”>
 	 
      

Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation stage should join the aforementioned mailing lists and take part in the discussions.

Terminology

The conformance requirements, conformance classes, definitions, dependencies, terminology, and typographical conventions described in the HTML5 specification apply to this specification. [[!HTML5]]

Interfaces are defined in terms of Web IDL. [[!WEBIDL]]

The following terms are used throughout this specification so they are gathered here for the readers convenience. The following list of terms is not exhaustive; other terms are defined throughout this specification.

The follow terms are defined by the [[!HTML5]] specification: img element, fallback content.

There is only one class of product that can claim conformance to this specification: a user agent.

This specification has the same conformance requirements and applies to the same conformance classes as [[[!HTML5]].

Implementations that use ECMAScript to expose the APIs defined in this specification must implement them in a manner consistent with the ECMAScript Bindings defined in the [[!WEBIDL]] specification.

QR element

Categories:
Flow content.
Phrasing content.
Embedded content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
Empty.
Content attributes:
Global attributes
alt
type
value
size
fgcolor
bgcolor
version
error
DOM interface:
[NamedConstructor=QR]
HTMLQRElement : HTMLElement{
   attribute DOMString alt;
   attribute DOMString type;
   attribute DOMString value;
   attribute unsigned long size;
   attribute DOMString fgcolor;
   attribute DOMString bgcolor;
   attribute unsigned long version;
   attribute DOMString error;
}

The qr element represents a generated image.

The QR element used for displaying an generated image that can come from a range of types (including the type and value attributes). Which image the user agent displays depends on the algorithm for encoding the value. The value of the alt attribute provides equivalent content for those who cannot process images or who have image loading disabled.

The requirements on the alt attribute's value are described in the img section.

note:

Type attribute

Thetype attribute controls the data type (and associated control) of the element. It is an enumerated attribute. The following table lists the keywords and states for the attribute — the keywords in the left column map to the states in the cell in the second column on the same row as the keyword.

Keyword State Data type Control type
text Text Text with no line breaks A text field
url URL An absolute URL A text field
contact E-mail An e-mail address or list of e-mail addresses A text field
calendar Calendar An Calendar information includes event information (e.g. event name, location, description, start date, end date, end time… et.al) A text field

States of the type attribute

Text (type=text) state

The text attribute specifies the text data that encoded in QR code. QR Code is capable of handling all types of data, such as numeric and alphabetic characters, 2 byte characters and symbols. Up to 7,089 characters can be encoded in one symbol.

When an QR element's type attribute is in the Text state, the rules in this section apply.

URL state (type=url)

The url attribute specifies the URLs (include URIs, URNs) that encoded in QR code. A URL is that provides the destination of the hyperlink. If the href attribute is not specified, the element represents a placeholder hyperlink. [[!RFC2397]],[[!RFC3406]],[[!RFC3966]],[[!RFC3986]],[[!RFC3987]]

			mailto:hollobit@etri.re.kr
			tel:+82-111-1111-1111 
			sms:<number>
			mms:<number>
			geo:40.71872,-73.98905,100
			market://details?id=org.example.foo
			youtube://ID
			WIFI:T:WPA;S:mynetwork;P:mypass;;
			facetime:<number>
			skype:<username|number>?query
			irc://<url>:query
			aim:query?<username>
			ymsgr:query?<email|number>
			gtalk:query?<email>
		

When an QR element's type attribute is in the URL state, the rules in this section apply.

The value attribute, if specified and not empty, must have a value that is a valid URL potentially surrounded by spaces that is also an absolute URL.

The value sanitization algorithm is as follows: Strip line breaks from the value, then strip leading and trailing whitespace from the value.

Constraint validation: While the value of the element is neither the empty string nor a valid absolute URL, the element is suffering from a type mismatch.

Contact state (type=contact)

The contact attribute specifies the contact information that encoded in QR code. Contact information includes personal contact information (e.g. name, company, phone number… et.al). Contact information’s format is stored in a plain text file which is formatted according to the dedicated specification (e.g. vCard. MECARD, Bizcard specification). [[!RFC4770]], [[!RFC2426]]

		BIZCARD:N:Jonathan;X:Jeon;T:Software Engineer;C:ETRI;A:76 9th Avenue, New York, NY 10011;B:+12125551212;E:someone@etri.re.kr;;
	
			MECARD:N:Jonathan,Jeon;ADR:161, Kajong-Dong, YuSong-Gu, Daejeon, South Korea 305-350;TEL:+82-10-1111-1111;EMAIL:hollobit@etri.re.kr;;
	

When an QR element's type attribute is in the Contact state, the rules in this section apply.

Calendar state (type=calendar)

The calendar attribute specifies the calendar event information that encoded in QR code. Calendar information includes event information (e.g. event name, location, description, start date, end date, end time… et.al). It can also specify the URL of event file (e.g. vCal, iCalendar). [[!RFC2445]]

		BEGIN:VCALENDAR
		VERSION:2.0
		PRODID:-//hacksw/handcal//NONSGML v1.0//EN
		BEGIN:VEVENT
		UID:uid1@example.com
		DTSTAMP:20130714T170000Z
		ORGANIZER;CN=Jonathan Jeon:MAILTO:hollobit@example.com
		DTSTART:20130714T170000Z
		DTEND:20130715T035959Z
		SUMMARY:WG F2F meeting
		END:VEVENT
		END:VCALENDAR
    
    @@ TBW - vCal example 
 	

When an QR element's type attribute is in the Calendar state, the rules in this section apply.

The value attribute

The value attribute specifies the data string that encoded in QR code.

The size attribute

The size attribute specifies the visible width of an element.

The fgcolor attribute

The fgcolor attribute specifies the foreground color of an element. The value of fgcolor can use to numeric, hexadecimal, RGB values. Default value is black.

The bgcolor attribute

The bgcolor attribute specifies the background color of an element. The value of bgcolor can use to numeric, hexadecimal, RGB values. Default value is white.

The version attribute

The version attribute specifies the symbol versions of QR Code range from Version 1 to Version 40.

Each version has a different module configuration or number of modules. (The module refers to the black and white dots that make up QR Code.)

"Module configuration" refers to the number of modules contained in a symbol, commencing with Version 1 (21 × 21 modules) up to Version 40 (177 × 177 modules). Each higher version number comprises 4 additional modules per side.

The error attribute

The error attribute specifies the error correction capability to restore data if the code is dirty or damaged. Four error correction levels (Low, Medium, Quartile, High) are available for users to choose according to the operating environment. Raising this level improves error correction capability but also increases the amount of data QR Code size.

			Low : 7% of codewords can be restored.
			Medium : 15% of codewords can be restored.
			Quartile : 25% of codewords can be restored.
			High : 30% of codewords can be restored.
	

Use Cases and Requirements

General Use Cases

The purpose of QR Element is to provide automatic generated QR code from input text (e.g. text, URL, call, SMS, vCard… et.al) in the web pages. This could have many uses as bridge offline and online in multi-screen/multi-device environment. Here’s a list of features that QR element can be generally provided with:

Offline Digital Signage

Today QR codes are used in many digital signage applications. The QR code allows the advertiser to provide the audience with fast access to information, promotion and coupons, without the need to memorize any coupon codes, website or contact information. Even if signage system is not connected to network, QR element in HTML can provide to generate QR code with various web contents.

Some of the reasons they are more useful than a standard barcode is that they can store much more data, including URL links, geo coordinates, VCard, SMS, etc. Another key feature of QR Codes is that many modern cell phones can scan them.

Data Sharing between Devices

QR code based data sharing between mobile devices allow the sharing of contacts, web links, directions, and other small pieces of information by displaying/scanning two QR enabled devices front to back. If mobile browser can provide decode/encode functionality, user can make a QR code for data sharing between devices.

Website
Have you ever watched a cooking show or cooking segment on your local station and wished you would have written the ingredients down? Or maybe you did write them down but they didn’t tell you how much or for how long to cook it at what temperature? The TV show program makes it easy for viewers to get the recipes on their mobile device. QR codes can be used to direct people to a web location be that your recipes, a particular manual, a library guide for them to download or an app you wish them to use.
Google maps location
a simple addition to promotional leaflets or websites to enable readers to find the library simply on Google Maps.

Acknowledgments

TBW

Informative references