Using HTML

1
Using HTML

• The aim is to separate content from presentation
  and write code that adheres to available
  published standards.

2
Aim

• pages that should work on the maximum number of
  platforms and devices
• ...therefore pages will work for the maximum
  number of the potential audience
• pages will be flexible enough to respond to
  audience needs
• e.g. simple change of text size in user-defined
  style sheets
• pages will contain inherent structure and
  elements will have inherent meaning
• making them more machine readable and more easily
  understood by people

3
More

• pages will essentially be self-documenting
• making them easier to modify in the future
• pages will be easier to upgrade and easier to
  repurpose for emerging technologies and
  standards
• pages will be easier to find and classify
• by both humans and machines.

4
Important HTML Code elements

• These are fairly basic code elements that can be
  cut and pasted into a standard template. They are
  important for accessibility and code validation.
  They provide
• the version of HTML used
• the language in which the page is written
• useful information for search engines, browsing
  devices and people
• useful navigation options.

5

• Specify a valid Document Type Definition (DTD)
• Ideally you should use the most up-to-date web
  technology
• See the List of valid DTD's from W3C.

6
Example Document type definitions

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"
• "http//www.w3.org/TR/html4/loose.dtd"gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN""http//www.w3.org/TR/xhtml1/DT
  D/xhtml1-transitional.dtd"gt

7
Identify the primary natural language

• Add lang attribute to opening ltHTMLgt declaration
  
• Choose from list of ISO language codes.

8
Language declarations

• html documents
• lthtml lang"en"gt
• For xhtml documents
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  lang"en" xmllang"en"gt

9
Provide unique and meaningful titles for each
page

• Vital for accessibility - good for bookmarking
• The title should correlate with the main page
  title (the H1,)
• Avoid long titles where the relevant part for the
  page only appears at the end,
• The most unique thing should go first - a
  'reverse bookmark' works well.

10
Page title (a 'reverse breadcrumb')

• lttitlegt5.1 Include this stuff at the top - HTML
  coding - NDA Accessibility Guidance lt/titlegt

11
Provide metadata

• At the least, a description and keywords and the
  default character set used
• You may also want to explore using elements from
  standard metadata sets to create a local metadata
  standard for all your sites
• Public sector sites should investigate the Irish
  Public Service Metadata Standard (IPSMS)

12
Basic metadata

• ltmeta name"description" content"Describe page
  and the scope of contents provided"gt
• ltmeta name"keywords" content"Relevent keywords,
  Relevent Phrases, comma, Separated"gt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetiso-8859-1"gt

13
Navigational Metadata

• Consider providing navigation information in
  metadata
• See more on navigational metadata

14
Some navigational metadata examples

• ltlink rel"start" href"tips_intro.html"gt
• ltlink rel"home" href"../index.html" /gt
• ltlink rel"contents" href"../about/index.html"
  title"Contents accessibility guidelines" /gt
• ltlink rel"help" href"../about/help.html" /gt
• ltlink rel"author" href"mailto
• xyz_at_aaa.com" /gt
• ltlink rel"prev" href"page9.htm"gt
• ltlink rel"contents" href"contents.html"
  title"accessibility tips contents"gt
• ltlink rel"next" href"page11"gt
• More on navigational metadata

15
Links to Style Sheets

• Provide links to external style sheets and
  alternative styles for different media types
• Print particularly useful for excluding all
  navigational elements etc. from print out.

16
Linked style sheets

• ltlink rel"stylesheet" type"text/css"
  media"all" href"standard.css")
• ltstyle type"text/css" media"screen"gt_at_import
  url(hidefromoldbrowsers.css)lt/stylegt
• ltlink rel"stylesheet" type"text/css"
  media"Braille" href"braileversion.css")
• ltlink rel"stylesheet" type"text/css"
  media"print" href"printversion.css" /gt

17
Construct proper headings

• Many people rely on headings to interpret the
  structure of the page.
• Without headings, some people (e.g. screen reader
  users) cannot easily browse the contents of the
  page (e.g. by skipping to and reading just the
  headings or by listing all the headings to get an
  idea of the contents of the page).

18
Use lth1gt, lth2gt ... lth6gt to provide structure to
web pages

• All pages should include lth1gt for the primary
  page heading
• Ideally only 1 heading should be coded with lth1gt
  per page
• Avoid skipping levels, e.g.
• lth1gt, lth3gt should not follow sequentially
  (skipping the lth2gt)

19
Use

• lth1gt Page Title lt/h1gt
• lth2gt Sub Headinglt/h2gt
• lth3gt Sub Sub Headinglt/h3gt

20
Do Not use

• ltbgt This is not a real Heading even though its
  bolded lt/bgt
• Lesson Style with CSS
• Don't use presentation markup to simulate
  headings.

21
Likewise

• Don't use heading markup to produce
  presentational effects
• Only use the Heading tags for headings - nothing
  else.

22
Define list and list items properly

• Lists, when coded correctly, can provide useful
  information, e.g.
• the fact that there is a list of related items
• the number of items in the list
• the number of the current item in the list.
• Lists also add structure to a page, making it
  easier to read and scan.

23

• If something is a list, always code it as one
  using ltulgt, ltolgt, ltdlgt
• Include all menus if possible
• They are logically lists - and, when style sheets
  are turned off, maintain structure and meaning.

24

• Avoid using inline images to create list
  effects
• Spacers, bullets, etc
• Use lists and style the CSS.

25
Code ltulgt, ltolgt, ltdlgt properly according to
standards

• Ensure correct syntax when embedding a list with
  a list (see example.)

26
HTML Unordered Lists

• An unordered list starts with the ltulgt tag. Each
  list item starts with the ltligt tag.
• The list items are marked with bullets (typically
  small black circles).
• ltulgtltligtCoffeelt/ligtltligtMilklt/ligtlt/ulgt
• How the HTML code above looks in a browser
• -------------------------------------------
• Coffee
• Milk

27
HTML Ordered Lists

• An ordered list starts with the ltolgt tag. Each
  list item starts with the ltligt tag.
• The list items are marked with numbers.
• ltolgtltligtCoffeelt/ligtltligtMilklt/ligtlt/olgt
• How the HTML code above looks in a browser
• -------------------------
• Coffee
• Milk

28
HTML Definition Lists

• A definition list is a list of items, with a
  description of each item.
• The ltdlgt tag defines a definition list.
• The ltdlgt tag is used in conjunction with ltdtgt
  (defines the item in the list) and ltddgt
  (describes the item in the list)

29
Example

• ltdlgtltdtgtCoffeelt/dtgtltddgt- black hot
  drinklt/ddgtltdtgtMilklt/dtgtltddgt- white cold
  drinklt/ddgtlt/dlgt How the HTML code above looks in
  a browser
• --------------------------------------------------
  --
• Coffee
• - black hot drink
• Milk
• - white cold drink

30
A simple nested list

• ltpgtItems needed for holidaylt/pgt  ltolgt
•     ltligtSunglasseslt/ligt    ltligtSwimming things
        ltulgt        ltligtSwimsuitlt/ligt        ltl
  igtTowellt/ligt
•       lt/ulgt    lt/ligt lt!-- note the placement --gt
      ltligtSuncreamlt/ligt    ltligtMoneylt/ligt  lt/olgt
  

31
Use CSS

• Use CSS to alter appearance of bullets and
  numbers, for example using
• List-style disc url(newbullet.gif) outside.

32
Note

• Note nav bars should ideally be coded as a list
• Even horizontal menus can be coded as lists using
  CSS, e.g.
• Use displayinline on the .ul and .li definition
  or
• Use list-style-type none on the .ul definition,
  display block float left on the .li
  definition.

33
Use lang, abbr amp acronym to embed useful
information

• Some browsers/devices can utilise embedded
  information to more effectively communicate
  information about a page's contents.

34
Identify all changes in the natural language
within a page

• Attach the lang attribute to almost any block
  level tag, or ltspangt
• Choose the language argument from the list of ISO
  language codes.

35
Lang example

• html lang"en"gt  ...  ltpgtHow do you say hello
  in French?lt/pgt
•   ltpgtYou say  ltspan lang"fr"gtBonjourlt/spangtlt/pgt
    ltpgtAnd in German?lt/pgt  ltp lang"de"gtGuten tag
  lt/pgt
•   ltp lang"ga"gt
•   lta href"irishversion.html"gt  as gaeilge
  lt/agtlt/pgt

36
Acronym v abbr?

• There is much debate and confusion about what
  exactly constitutes an acronym versus an
  abbreviation. Also there is different support
  across browsers and changing support in new
  standards (acronym is likely to be dropped). The
  best advice is to adopt one and use it
  consistently and to always expand the
  abbreviation somewhere in the main body of the
  text.

37
Use ltacronymgt and ltabbrgt

• to expand acronyms and abbreviations using the
  title attribute
• Some browsers style these using dotted
  underlines.

38
Acronym examples

• ...ltacronym title"World Wide Web"gt
•   WWWlt/acronymgt...
• ... the ltacronym title"National Disability
  Authority"gtNDAlt/acronymgt is a...gt

39
Use structural and semantic markup properly and
validate code

• Markup such as headings, paragraphs, lists,
  definitions and quotations add useful semantic
  (inherently meaningful) information. Markup used
  solely for presentation purposes doesn't. You
  should make full use of structural and semantic
  coding.
• Valid code ensures the widest possible acceptance
  by the multitude of devices and a clearer upgrade
  path to new standards.

40

• Use the structural/semantic markup wherever
  possible to add meaning to a page
• use CSS to style the elements as required.

41
Misuse

• Do not misuse semantic / structural markup for
  presentation effects, e.g.
• Do not use ltblockquotegt for indents
• ltblockquotegtThe power of the Internet is in its
  universality... lt/blockquotegtltpgtTim Berners
  Leelt/pgt
• Do not use ltthgt for centre align in layout
  tables

42
More Misuse

• Do not use ltaddressgt, ltemgt for italics (default
  style for these elements)
• ltaddressgtNational Disability Authority, 25 Clyde
  Road, Dublin 4lt/addressgt
• Do not use ltstronggt for bold (default style.)
• this is ltemgtimportantlt/emgt but this is ltstronggt
  even more important ltstronggt...

43

• Do not use presentation elements to simulate
  structure
• e.g. do not use bolding and increased font size
  to make a heading
• use lth1gt, lth2gt etc. (see DEV 5.2.)

44
Structural / semantic coding Use

• Use these
• h1...h6, p
• em, strong
• cite, blockquote
• ul, ol, li
• dl, dt, dd
• address
• code.

45
Deprecated Features

• A number of elements and attributes are
  deprecated in HTML 4 as an indication that other
  methods of accomplishing the same task are
  preferred.
• Deprecated features may become obsolete in future
  versions of HTML, though browsers that support
  the features will likely continue to support
  them.
• Deprecated features are included in HTML 4
  Transitional and HTML 4 Frameset but not HTML 4
  Strict.

46
Style Sheets

• Many presentational elements and attributes are
  deprecated in favor of style sheets, which allow
  authors to suggest a presentation with more
  flexibility and without sacrificing
  accessibility.
• Presentational attributes that cannot currently
  be replaced with style sheets are in most cases
  not deprecated.

47
The following elements are deprecated in favor of
style sheets

• BASEFONT - Base font change
• CENTER - Centered block
• FONT - Font change
• S - Strike-through text
• STRIKE - Strike-through text
• U - Underlined text
• Although not deprecated, avoid b, i
• (use CSS instead.)

48
More Deprecated Features

• The following elements are also deprecated
• APPLET - Java applet (deprecated in favor of
  OBJECT)
• DIR - Directory list (deprecated in favor of UL)
• ISINDEX - Input prompt (deprecated in favor of
  INPUT)
• MENU - Menu list (deprecated in favor of UL)

49
Standards

• Write HTML and CSS according to the specified
  standards.
• Ensure all code is validated against the
  appropriate standard.

50
Notes and Tips

• Note The quotation tag ltqgt isn't well supported
  by browsers at the moment - avoid using for now.
• Tip The emphasis tags em and strong should be
  used to mark important phrases or words.
  Semantically strong is supposed to be 'stronger'
  than em.
• One advantage of using these is that screen
  reader users can potentially hear the difference
  (when they would not with ltbgt and ltigt).

51
Code Validators

• Tip Many code validators will help weed out
  deprecated tags and syntax problems, and assist
  you to code to standards, for example use the
  following free resources

52
Use relative font sizing, not absolute units

• Absolute units make resizing text in some
  browsers impossible for many users who may need
  it.

53
To size text use the following CSS values

• Font size keywords (recommended)
• percent ()
• ltemgt values.
• Example
• p font-size large
• p font-size 120
• These are ok

54
Avoid

• Do not use
• px, pt, cm, ....
• e.g. p font-size 14px
• Put all style information including sizes in
  style sheets
• Do not use the deprecated ltfontgt tag.
• E.g.
• ltpgt lt font size 8ptgt This is not good
  lt/fontgtlt/pgt

55

• Difficulties Unfortunately, due to browser
  inconsistencies, using relative units (, ltemgt )
  does not always produce the desired effect.
• At present, some advanced workarounds are
  required.
• These use bugs in some browsers' CSS parsing to
  deliver accessible and compatible cross-browser
  scaling. Most techniques currently recommend
  using font size keywords.