Review of Good Semantic HTML
The very first thing you must do is to organize the content of the page in your
Then you can begin to use the HT
ML to reflect that organization and the CSS to
Your pages should all use the same navigation and that navigation should be
captured in the
By now you know that the navigation section will go on the top or on one side
You can use the css to place the navigation.
The Web Centric Re
sources Page has many examples of elegant menus you can
For complicated sites or deep menus it is a good idea to show breadcrumbs or
some other ‘you are here’ information.
tag is used to collect the main header (the one and only h1 on a
e) and the subheaders.
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.
(sidebar) tags may be used to furt
her organize the
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
, especially the first article.
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.
drop doesn’t work well on mobile
browsers, as they use dragging
The <br />
may also look odd on mobile bro
Block and inline elements
You should understand the difference between them and use them appropriately.
block & inline elements
show the structure of your document
e.g. div, p,
, lists, tables & new
section, aside, nav, header, footer, ar
watch out for the newer ones until html5 is widespread
don't interrupt the flow
ay contain only other inline elements
e.g. span and <a>
Understand how the box model in CSS uses inheritance differently for these
two types of elements.
Forms and new input types
Use the new in
put types in HTML5 (email, url
, etc.) but be aware that th
default to text in older browsers (so you may need to do additonal validation of
For the input type=’number’ you can set min and max values and avoid the use
Organize your forms with fieldsets and legends.
Use the for attr
ibute in your legend
For check boxes use attribute checked=''checked" so that it works for both HTML
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
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:
value='Save changes' />
<button type='submit'>Save changes </button>
The input method will also work better on older mobile devices
button method allows for fancier styling.
Classes, id’s etc
Classes should be used when appropriate, but
Of course the class name should be short but descriptive.
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.
Polyglot or XHTML
Tags are all lower case.
All tags are closed when optional
to do so
All attribute values are quoted
Classes and id’s will be used as appropriate.
Code as if everything is case
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
specific CSS sparingly, if at all.
Some people believe that these are on the way out.
Format your HTML so
that it is easy to follow and debug.
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'>
You can hide a link by positioning it off the page. This often works better than
tag may be associated with a form element.
A lovely example is at
The important things to remember are
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.)
how the label gets applied to a particular form element.
The text between the opening and closing label tags is what is displayed
next to the form element.
The form element may be inside the label tag or not
ither way will
Clicking on the label will provide focus to the form element and
boxes and radio buttons
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
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.
is a clear description at
and the example at
has a simple page whose source you may examine.