1 / 55

Using HTML

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;

sauda
Download Presentation

Using HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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: • <!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">

  7. Identify the primary natural language: • Add lang attribute to opening <HTML> declaration; • Choose from list of ISO language codes.

  8. Language declarations: • html documents: • <html lang="en"> • For xhtml documents: • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

  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'): • <title>5.1 Include this stuff at the top - HTML coding - NDA Accessibility Guidance </title>

  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: • <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">

  13. Navigational Metadata • Consider providing navigation information in metadata: • See more on navigational metadata;

  14. 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: • xyz@aaa.com" /> • <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

  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: • <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" />

  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 <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>;)

  19. Use • <h1> Page Title </h1> • <h2> Sub Heading</h2> • <h3> Sub Sub Heading</h3>

  20. 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.

  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 <ul>, <ol>, <dl>: • 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 <ul>, <ol>, <dl> 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 <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

  27. 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: • ------------------------- • Coffee • Milk

  28. 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):

  29. 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

  30. 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>

  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 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.

  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 <span>; • Choose the language argument from the list of ISO language codes.

  35. 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>

  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 <acronym> and <abbr> • to expand acronyms and abbreviations using the title attribute: • Some browsers style these using dotted underlines.

  38. Acronym examples: • ...<acronym title="World Wide Web"> •   WWW</acronym>... • ... the <acronym title="National Disability Authority">NDA</acronym> is a...>

  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 <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;

  42. 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>...

  43. 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.)

  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 <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>).

More Related