Review of Good Semantic HTML 1.Organization a.

goldbashedΤεχνίτη Νοημοσύνη και Ρομποτική

15 Νοε 2013 (πριν από 3 χρόνια και 4 μήνες)

52 εμφανίσεις

Review of Good Semantic HTML


1.

Organization

a.

The very first thing you must do is to organize the content of the page in your
own mind.

Then you can begin to use the HT
ML to reflect that organization and the CSS to
style it.

b.

Your pages should all use the same navigation and that navigation should be
captured in the
nav

tags.

By now you know that the navigation section will go on the top or on one side
(or both).


You can use the css to place the navigation.

The Web Centric Re
sources Page has many examples of elegant menus you can
use.

For complicated sites or deep menus it is a good idea to show breadcrumbs or
some other ‘you are here’ information.

c.

The
hgroup

tag is used to collect the main header (the one and only h1 on a
pag
e) and the subheaders.

d.

Use h1, h2 etc. in the obvious hierarchical fashion.

Don’t skip levels.

Be sure that items at the same organizational level have the same number in
their header tags.

e.

The
article
,
section
, and
aside

(sidebar) tags may be used to furt
her organize the
page.

f.

The most important and most timely content goes at the top of the page


remember that users read in an “F” pattern.

Excellent advice on what your writing should be like is at
h
ttp://www.useit.com/papers/webwriting/

, especially the first article.

g.

Think about what will happen if you port your page to a mobile browser.

There are some HTML5 and CSS3 features which are not implemented.

Also, drag
-
and
-
drop doesn’t work well on mobile

browsers, as they use dragging
for scrolling.

The <br />
may also look odd on mobile bro
w
s
ers.


2.

Block and inline elements

You should understand the difference between them and use them appropriately.

a.

Block elements


display vertically



may contain
block & inline elements



show the structure of your document



e.g. div, p,

h1 etc
, lists, tables & new

section, aside, nav, header, footer, ar
ticle



watch out for the newer ones until html5 is widespread

b.

Inline elements


don't interrupt the flow



m
ay contain only other inline elements



e.g. span and <a>

c.

Understand how the box model in CSS uses inheritance differently for these
two types of elements.


3.

Forms and new input types

a.

Use the new in
put types in HTML5 (email, url
, etc.) but be aware that th
ey will
default to text in older browsers (so you may need to do additonal validation of
the input.)

b.

For the input type=’number’ you can set min and max values and avoid the use
of sliders.

c.

Organize your forms with fieldsets and legends.


Use the for attr
ibute in your legend
s
.

d.

For check boxes use attribute checked=''checked" so that it works for both HTML
and XHTML.



When
you
want to set this attribute it is safer to use the DOM
(this.checked='true') than to toggle it.

Of course, all checkboxes in a group

must have the
same name

and different
id
s.

e.

Submitting forms:

The 2 codes below will render the same way but in the legacy browsers IE6 and
IE7 the <button ...> method sends the inner html rather than the button's value:


<input type='submit'
value='Save changes' />


<button type='submit'>Save changes </button>

The input method will also work better on older mobile devices
---

but the
button method allows for fancier styling.


4.

Classes, id’s etc

a.

Classes should be used when appropriate, but
not indiscriminately.

Of course the class name should be short but descriptive.

b.

The same thing is true of id’s


although they will also be used for any element
that you will need to get a hold of , e.g. for changing the styling.


5.

Polyglot or XHTML
compatible

a.

Tags are all lower case.

b.

All tags are closed when optional

to do so
.

c.

All attribute values are quoted

d.

Classes and id’s will be used as appropriate.

e.

Code as if everything is case
-
sensitive.

If you are writing for a specific domain (e.g. for EHRs o
r for financial statements) then
you will probably need name
-
spaces (and industry specific tags) and
end up
us
ing

XHTML.


6.

Use browser
-
specific CSS sparingly, if at all.

Some people believe that these are on the way out.


7.

Miscellaneous

a.

Format your HTML so
that it is easy to follow and debug.

b.

The
title

attribute may be used to show tool tips when the user hovers over it.
The tip should be kept short.


<label for='cell_phone' title='please enter include area code' >Cell Phone</label>




<input type='telephone' id='cell_phone'>


c.

You can hide a link by positioning it off the page. This often works better than
changing its
display

attribute.

d.

The
label

tag may be associated with a form element.

A lovely example is at


http://www.electrictoolbox.com/using
-
label
-
tag
-
html
-
forms/


The important things to remember are

i.

The for attribute in <label for =’xxx’> is the same as the id of the form
element you are labeling.
(See the example on the link above.)
This is
how the label gets applied to a particular form element.

ii.

The text between the opening and closing label tags is what is displayed
next to the form element.

iii.

The form element may be inside the label tag or not


e
ither way will
work.

iv.

Clicking on the label will provide focus to the form element and
,

for check
boxes and radio buttons
,

will
toggle its state.

This toggling action is not part of the <label> tag’s specs but it appears to
work in all major browsers. Be c
areful!

e.

The
role

attribute is used to make pages easier for screen readers to render. The
idea is to specify parts of your page as filling certain landmark roles. The choices
are banner, main, navigation, form, search, application and contentinfo.

There
is a clear description at
http://www.paciellogroup.com/blog/2010/10/using
-
wai
-
aria
-
landmark
-
roles/

and the example at
http://www.html5accessibility.com/tests/roles
-
land.html

has a simple page whose source you may examine.