Title: Using HTML
1Using HTML
- The aim is to separate content from presentation
and write code that adheres to available
published standards.
2Aim
- 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
3More
- 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.
4Important 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.
6Example 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
7Identify the primary natural language
- Add lang attribute to opening ltHTMLgt declaration
- Choose from list of ISO language codes.
8Language declarations
- html documents
- lthtml lang"en"gt
- For xhtml documents
- lthtml xmlns"http//www.w3.org/1999/xhtml"
lang"en" xmllang"en"gt
9Provide 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.
10Page title (a 'reverse breadcrumb')
- lttitlegt5.1 Include this stuff at the top - HTML
coding - NDA Accessibility Guidance lt/titlegt
11Provide 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)
12Basic 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
13Navigational Metadata
- Consider providing navigation information in
metadata - See more on navigational metadata
14Some 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
15Links 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.
16Linked 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
17Construct 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).
18Use 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)
19Use
- lth1gt Page Title lt/h1gt
- lth2gt Sub Headinglt/h2gt
- lth3gt Sub Sub Headinglt/h3gt
20Do 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.
21Likewise
- Don't use heading markup to produce
presentational effects - Only use the Heading tags for headings - nothing
else.
22Define 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.
25Code ltulgt, ltolgt, ltdlgt properly according to
standards
- Ensure correct syntax when embedding a list with
a list (see example.)
26HTML 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
27HTML 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
28HTML 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)
29Example
- 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
30A 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
31Use CSS
- Use CSS to alter appearance of bullets and
numbers, for example using - List-style disc url(newbullet.gif) outside.
32Note
- 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. -
33Use 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.
34Identify 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.
35Lang 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
36Acronym 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.
37Use ltacronymgt and ltabbrgt
- to expand acronyms and abbreviations using the
title attribute - Some browsers style these using dotted
underlines.
38Acronym examples
- ...ltacronym title"World Wide Web"gt
- WWWlt/acronymgt...
- ... the ltacronym title"National Disability
Authority"gtNDAlt/acronymgt is a...gt
39Use 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.
41Misuse
- 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
42More 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.)
44Structural / semantic coding Use
- Use these
- h1...h6, p
- em, strong
- cite, blockquote
- ul, ol, li
- dl, dt, dd
- address
- code.
45Deprecated 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.
46Style 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.
47The 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.)
48More 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)
49Standards
- Write HTML and CSS according to the specified
standards. - Ensure all code is validated against the
appropriate standard.
50Notes 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). -
51Code 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
52Use relative font sizing, not absolute units
- Absolute units make resizing text in some
browsers impossible for many users who may need
it.
53To 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
54Avoid
- 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.