html standards presentation

HTML Elements Standards

by: Tiago Cardoso

Why bother? I can still do it

● I can do it all with client-side handling ● Every element is standard-natively clickable ● Prevent any native handling in every custom

element event scripting (e.preventDefault...)

● it only works with javascript in some cases.

Well, you kinda should bother!

● Yahoo: 2% of their users are jscript-disabled ● Statistics don't tell whole story: No-js-users

can't reach all pages in only-javascript websites and tend not to come back if nothing works.

● Browser native styling for elements. ● Screen readers, Mobile Devices, etc...

devices with other user inputs. Semantics very important.

● Focusable elements (tabindex does not

solve it all) ● Navigable through keyboard tab key.

● Specific events. ex: visited/clicked/etc.... for anchor tags.

● - anchor tags get crawled, button tags do not

("nofollow" rule is not followed 100%)

Part 1Anchor Tags and Buttons

Elements

Anchor Tag: <a ....></a> Button Tag: <button>....</button> Input Submit: <input type="submit"/> Input Button: <input type="button"/>

<a href=#a> The Anchor Tag </a>

● A link is a connection from one Web resource to another.

● The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.)

<a href="#b">..</a>

<a id="b" href="c.html">...</a>

x.html c.html

<html....>...

<button> The Button Tag </button>

● form inner element ● Defines a push button, submission of form. ● Inside the element you can put content, like

text or images.

<input type=submit value=Submit/>

● form inner element ● Defines a button for submission of form. ● Label of the button is defined by its value

attribute. No option to change background image natively.

<input type=button value=but /input>

● form inner element ● The input buttons represents a button in a

form with no default behavior. ● Input buttons and input submits are styled

similarly (the same difficulties, therefore). ● Typically associated to client-side behaviour.

Conclusion

Links vs. buttons - Links must never change state, while buttons could potentially change state. - similar to RESTful semantics; GET vs. POST/PUT/DELETE

Use case: the post action links

Like/Comment/Share


like


comment


share


like


comment


share

Semantic AnalysisLike Action Adds a new “Like/Follower” to a post -> changes state in the server. Comment Action Makes the comment form visible to the client -> client side flickering. Share Action Facebook: Opens a pop-up formRestorm: Loads an inline form


3 - 1

semantic match

Questions?

Possible Topics: ● discuss the nofollow attribute; ● web-crawling implications in our HTML documents;

End of Part 1

Part DeuxForm Elements

Intro

● Design and Appearance decisions sometimes drive the Architectural Design.

● Clients sometimes (most of times?) base their requisites

on something they saw, like how it looked, but don't know what it does. Developers tend to sometimes follow that lead.

Should it be the other way round? Is there a balance?

Why you should use? (form elements)

● No need to provide script that handles functionality

● Works for JS and no-JS forms ( <3 ) ● All reasons described in Part 1 that apply to

them

Why would you run away from it?

● Form native elements are usually hard to style.

● Cross-browser styling on top of that (<3 your

IEs) (please interrupt me if you have something to add to this list)

Radio Buttons and CheckboxesRadio Buttons:

- used for selection of an item from a list of items. Checkboxes:

- used for selection of multiple items from a list of items. checked: Gives the default checkedness of the input element.name: Gives the name of the input element.required: When specified, the element is required.value: Gives the default value of the input element.

Radio Buttons and Checkboxes

Issues: ● how to style them like tag buttons? ● how to make the radio/checkboxes

disappear and leave only the label? ● And how to make them work in every used

browser?

Use case - RightclearingThe Tags

● Multiple selection of items, orthodoxly represented by checkboxes;

● styling concerns led to the decision of implementing them with anchor tags supported by an hidden input field and a javascript plugin;

Use case - Rightclearing

Pros:● looks really good in all of the supported browsers!Cons:● a lot of client-side scripting (the better part of a custom

plugin of ours) was written to simulate part of the behaviour that the checkbox natively provides.

● non-focusable, does not respond to keyboard events (no mouse, no fun. could be part of the plugin mentioned above, but it would just bloat it).

● javascript-dependent, main reason why the RC search doesn’t work without script (correct me if I’m wrong).

LET THE BROWSER WARS BEGIN!standard css:

.genres { border: medium none; border-radius: 0 0 3px 3px; float: left; margin: 0; padding: 5px; display: inline-block; vertical-align: middle; background: url("http://www.rightclearing.com/images/rightclearing/blue.png?54f75c7") repeat scroll 0 0 transparent; margin-right: 0;}

div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p { background: none repeat scroll 0 0 transparent; border: 0 none; font-size: 100%; margin: 0; outline: 0 none; padding: 0; vertical-align: baseline;}

Tryout 1: Anchor Tag Tags (present)

HTML:

<div class="genres">

<a href="#" data-value="2" class="genres_2">

<div class="left"></div>

<div class="center">

<span class="tag_text">Alternative</span>

</div>

<div class="right"></div>

</a>

<a href="#" data-value="3" class="genres_3 selected">

<div class="left"></div>

<div class="center">

<span class="tag_text">Rock</span>

</div>

<div class="right"></div>

</a>

</div>

a { border: 1px solid rgba(33, 33, 38, 0.55); color: rgba(33, 33, 38, 0.9); cursor: pointer; float: left; font-size: 13px; font-weight: normal; line-height: 24px; margin: 0 0 3px 3px; position: relative; white-space: nowrap; border: medium none; opacity: 1; background: none repeat scroll 0 0 transparent; border: 0 none; font-size: 100%; outline: 0 none; vertical-align: baseline; text-decoration: none;}.left { border-radius: 3px 0 0 3px; width: 5px;}.right { border-radius: 0 3px 3px 0; width: 5px;}a:hover { color: #0096E6; text-shadow: 0 0 4px rgba(0, 150, 230, 0.4);}a:hover > div { background: none repeat scroll 0 0 #0096E6; color: #FFFFFF; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6); }a.selected {

background: url("http://www.rightclearing.com/images/rightclearing/blue.png?54f75c7") repeat scroll 0 0 transparent;}

CSS: a div { display: inline-block; float: left; height: 24px !important; color: #FFFFFF; }

Anchor Tag Tags: Output

Firefox


Firefox

Chrome


Firefox

Chrome

Opera


Firefox

Chrome

Opera

IE9


Firefox

Chrome

Opera

IE9

IE8


Firefox

Chrome

Opera

IE9

IE8

IE7

Tryout Deux: Checkbox Tags (future?)

HTML:

<div class="genres">

<label>

<input type="checkbox" name="search[genres]" value="2">

<div class="title">

Alternative

</div>

</label>

<label>

<input type="checkbox" name="search[genres]" value="3">

<div class="title">

Rock

</div>

</label>

</div>

CSS: label { border: 1px solid rgba(33, 33, 38, 0.55); color: rgba(33, 33, 38, 0.9); cursor: pointer; float: left; font-size: 13px; font-weight: normal; line-height: 24px; margin: 0 0 3px 3px; position: relative; white-space: nowrap; border: medium none; opacity: 1; background: none repeat scroll 0 0 transparent; border: 0 none; font-size: 100%; outline: 0 none; vertical-align: baseline;} .title:hover { background: none repeat scroll 0 0 #00AAFA; color: #FFFFFF; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6); } :root input { position: absolute; clip: rect(0,0,0,0); } .title { display: inline-block; *display: inline; border-radius: 3px; padding: 0 5px;} input:checked + .title { background: none repeat scroll 0 0 #0096E6; color: #FFFFFF; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6); }

Checkbox Tags: Output

Firefox


Firefox

Chrome


Firefox

Chrome

Opera


Firefox

Chrome

Opera

IE9


Firefox

Chrome

Opera

IE9

IE8


Firefox

Chrome

Opera

IE9

IE8

IE7


Firefox

Chrome

Opera

IE9

IE8

IE7

Safari

(it will work in IE 10)

Conclusions

Appearance 1 - Everything looks good.(unsupported css features in the IE <=9, like border-radius and text-shadow)

2 - Everything looks at least functional. Graceful Degradation. Functionality 1 - Works with javascript.2 - Works. point.

Appearance over Functionality or

Functionality over Appearance?

Questions?

Possible Topics: ● Why doesn’t the checkbox disappear in the IEs 8-? (hint: IE is evil)

Referenceshttp://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/http://www.w3.org/TR/html401/struct/links.htmlhttp://www.w3schools.com/tags/tag_button.asphttp://discuss.joelonsoftware.com/default.asp?design.4.541972.17http://www.w3.org/wiki/HTML/Elements/input/submithttp://www.w3.org/wiki/HTML/Elements/input/buttonhttp://www.w3.org/wiki/HTML/Elements/input/radiohttp://www.w3.org/wiki/HTML/Elements/input/checkboxhttp://jsfiddle.net/http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/http://yfrog.com/h7ja8ep

http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/

http://www.w3.org/TR/html401/struct/links.html

http://www.w3schools.com/tags/tag_button.asp

http://discuss.joelonsoftware.com/default.asp?design.4.541972.17

http://www.w3.org/wiki/HTML/Elements/input/submit

http://www.w3.org/wiki/HTML/Elements/input/button

http://www.w3.org/wiki/HTML/Elements/input/radio

http://www.w3.org/wiki/HTML/Elements/input/checkbox

http://jsfiddle.net/

http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/

http://yfrog.com/h7ja8ep

html standards presentation

Technology

post action linkscomment

button tags

post action linkslike

button tag form inner

buttons links

submission of form

input buttons

push button