using html
DESCRIPTION
Using HTML. The aim is to separate content from presentation and write code that adheres to available published standards. 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; - PowerPoint PPT PresentationTRANSCRIPT
Using HTML
The aim is to separate content from presentation and write code that
adheres to available published standards.
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;
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.
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.
• 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.
Example Document type definitions:
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
• "http://www.w3.org/TR/html4/loose.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Identify the primary natural language:
– Add lang attribute to opening <HTML> declaration;
– Choose from list of ISO language codes.
Language declarations:
• html documents:• <html lang="en">• For xhtml documents: • <html
xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
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.
Page title (a 'reverse breadcrumb'):
• <title>5.1 Include this stuff at the top - HTML coding - NDA Accessibility Guidance </title>
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)
Basic metadata:
• <meta name="description" content="Describe page and the scope of contents provided">
• <meta name="keywords" content="Relevent keywords, Relevent Phrases, comma, Separated">
• <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Navigational Metadata
– Consider providing navigation information in metadata: • See more on navigational metadata;
Some navigational metadata examples:
• <link rel="start" href="tips_intro.html"> • <link rel="home" href="../index.html" /> • <link rel="contents" href="../about/index.html" title="Contents:
accessibility guidelines" /> • <link rel="help" href="
../about/help.html" /> • <link rel="author" href="mailto:• [email protected]" /> • <link rel="prev" href="page9.htm"> • <link rel="contents" href="contents.html" title="accessibility tips
contents"> • <link rel="next" href="page11">• More on navigational metadata
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.
Linked style sheets:
• <link rel="stylesheet" type="text/css" media="all" href="standard.css")
• <style type="text/css" media="screen">@import url(hidefromoldbrowsers.css);</style>
• <link rel="stylesheet" type="text/css" media="Braille" href="braileversion.css")
• <link rel="stylesheet" type="text/css" media="print" href="printversion.css" />
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).
Use <h1>, <h2> ... <h6> to provide structure to web pages:
– All pages should include <h1> for the primary
page heading; – Ideally only 1 heading should be coded with <h1>
per page; – Avoid skipping levels, e.g. • <h1>, <h3> should not follow sequentially (skipping the
<h2>;)
Use
• <h1> Page Title </h1>• <h2> Sub Heading</h2>• <h3> Sub Sub Heading</h3>
Do Not use
• <b> This is not a real Heading even though its bolded </b>
Lesson Style with CSS: • Don't use presentation markup to simulate headings.
Likewise
• Don't use heading markup to produce presentational effects: – Only use the Heading tags for headings - nothing
else.
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.
• If something is a list, always code it as one using <ul>, <ol>, <dl>: – Include all menus if possible: • They are logically lists - and, when style sheets are
turned off, maintain structure and meaning.
• Avoid using inline images to create list effects:
– Spacers, bullets, etc; – Use lists and style the CSS.
Code <ul>, <ol>, <dl> properly according to standards:
– Ensure correct syntax when embedding a list with a list (see example.)
HTML Unordered Lists• An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.• The list items are marked with bullets (typically small
black circles).• <ul>
<li>Coffee</li><li>Milk</li></ul>
• How the HTML code above looks in a browser:• -------------------------------------------• Coffee • Milk
HTML Ordered Lists• An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.• The list items are marked with numbers.• <ol>
<li>Coffee</li><li>Milk</li></ol>
• How the HTML code above looks in a browser:• -------------------------
1. Coffee 2. Milk
HTML Definition Lists
• A definition list is a list of items, with a description of each item.
• The <dl> tag defines a definition list.• The <dl> tag is used in conjunction with <dt>
(defines the item in the list) and <dd> (describes the item in the list):
Example• <dl>
<dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl> How the HTML code above looks in a browser:
• ----------------------------------------------------Coffee
- black hot drink Milk - white cold drink
A simple nested list • <p>Items needed for holiday:</p>
<ol>• <li>Sunglasses</li>
<li>Swimming things <ul> <li>Swimsuit</li> <li>Towel</li>
• </ul> </li> <!-- note the placement --> <li>Suncream</li> <li>Money</li> </ol>
Use CSS
• Use CSS to alter appearance of bullets and numbers, for example using: – List-style: disc url(newbullet.gif) outside.
Note
• Note nav bars should ideally be coded as a list• Even horizontal menus can be coded as lists
using CSS, e.g. • Use display:inline; on the .ul and .li definition
or; • Use list-style-type: none; on the .ul definition,
display: block; float: left; on the .li definition.
Use lang, abbr & acronym to embed useful information
• Some browsers/devices can utilise embedded information to more effectively communicate information about a page's contents.
Identify all changes in the natural language within a page:
– Attach the lang attribute to almost any block level tag, or <span>;
– Choose the language argument from the list of ISO language codes.
Lang example• html lang="en">
... <p>How do you say hello in French?</p>
• <p>You say <span lang="fr">Bonjour</span></p> <p>And in German?</p> <p lang="de">Guten tag </p>
• <p lang="ga">• <a href="irishversion.html">
as gaeilge </a></p>
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.
Use <acronym> and <abbr>
• to expand acronyms and abbreviations using the title attribute: – Some browsers style these using dotted
underlines.
Acronym examples:
• ...<acronym title="World Wide Web">• WWW</acronym>...• ... the <acronym title="National Disability
Authority">NDA</acronym> is a...>
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.
• Use the structural/semantic markup wherever possible to add meaning to a page: – use CSS to style the elements as required.
Misuse
• Do not misuse semantic / structural markup for presentation effects, e.g. – Do not use <blockquote> for indents; – <blockquote>The power of the Internet is in its
universality... </blockquote><p>Tim Berners Lee</p>
– Do not use <th> for centre align in layout tables;
More Misuse
Do not use <address>, <em> for italics (default style for these elements;)
• <address>National Disability Authority, 25 Clyde Road, Dublin 4</address>
Do not use <strong> for bold (default style.) – this is <em>important</em> but this is <strong>
even more important <strong>...
• Do not use presentation elements to simulate structure: – e.g. do not use bolding and increased font size to
make a heading: • use <h1>, <h2> etc. (see DEV 5.2.)
Structural / semantic coding Use
• Use these:• h1...h6, p; • em, strong; • cite, blockquote; • ul, ol, li; • dl, dt, dd; • address; • code.
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.
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.
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.)
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)
Standards
• Write HTML and CSS according to the specified standards.
• Ensure all code is validated against the appropriate standard.
Notes and Tips
• Note: The quotation tag <q> 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 <b> and <i>).
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
Use relative font sizing, not absolute units
• Absolute units make resizing text in some browsers impossible for many users who may need it.
To size text use the following CSS values:
– Font size keywords (recommended); – percent (%); – <em> values. – Example– p { font-size large}• p { font-size 120%}• These are ok
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 <font> tag. – E.g. <p> < font size= “8pt”> This is not good” </font></p>}
• Difficulties: Unfortunately, due to browser inconsistencies, using relative units (%, <em> ) 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.