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
![Page 1: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/1.jpg)
Using HTML
The aim is to separate content from presentation and write code that
adheres to available published standards.
![Page 2: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/2.jpg)
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;
![Page 3: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/3.jpg)
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.
![Page 4: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/4.jpg)
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.
![Page 5: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/5.jpg)
• 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.
![Page 6: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/6.jpg)
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">
![Page 7: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/7.jpg)
Identify the primary natural language:
– Add lang attribute to opening <HTML> declaration;
– Choose from list of ISO language codes.
![Page 8: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/8.jpg)
Language declarations:
• html documents:• <html lang="en">• For xhtml documents: • <html
xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
![Page 9: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/9.jpg)
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 10: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/10.jpg)
Page title (a 'reverse breadcrumb'):
• <title>5.1 Include this stuff at the top - HTML coding - NDA Accessibility Guidance </title>
![Page 11: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/11.jpg)
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)
![Page 12: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/12.jpg)
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">
![Page 13: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/13.jpg)
Navigational Metadata
– Consider providing navigation information in metadata: • See more on navigational metadata;
![Page 14: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/14.jpg)
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
![Page 15: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/15.jpg)
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.
![Page 16: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/16.jpg)
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" />
![Page 17: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/17.jpg)
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).
![Page 18: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/18.jpg)
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>;)
![Page 19: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/19.jpg)
Use
• <h1> Page Title </h1>• <h2> Sub Heading</h2>• <h3> Sub Sub Heading</h3>
![Page 20: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/20.jpg)
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.
![Page 21: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/21.jpg)
Likewise
• Don't use heading markup to produce presentational effects: – Only use the Heading tags for headings - nothing
else.
![Page 22: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/22.jpg)
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.
![Page 23: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/23.jpg)
• 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.
![Page 24: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/24.jpg)
• Avoid using inline images to create list effects:
– Spacers, bullets, etc; – Use lists and style the CSS.
![Page 25: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/25.jpg)
Code <ul>, <ol>, <dl> properly according to standards:
– Ensure correct syntax when embedding a list with a list (see example.)
![Page 26: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/26.jpg)
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
![Page 27: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/27.jpg)
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
![Page 28: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/28.jpg)
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):
![Page 29: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/29.jpg)
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
![Page 30: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/30.jpg)
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>
![Page 31: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/31.jpg)
Use CSS
• Use CSS to alter appearance of bullets and numbers, for example using: – List-style: disc url(newbullet.gif) outside.
![Page 32: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/32.jpg)
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.
![Page 33: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/33.jpg)
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.
![Page 34: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/34.jpg)
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.
![Page 35: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/35.jpg)
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>
![Page 36: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/36.jpg)
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.
![Page 37: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/37.jpg)
Use <acronym> and <abbr>
• to expand acronyms and abbreviations using the title attribute: – Some browsers style these using dotted
underlines.
![Page 38: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/38.jpg)
Acronym examples:
• ...<acronym title="World Wide Web">• WWW</acronym>...• ... the <acronym title="National Disability
Authority">NDA</acronym> is a...>
![Page 39: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/39.jpg)
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.
![Page 40: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/40.jpg)
• Use the structural/semantic markup wherever possible to add meaning to a page: – use CSS to style the elements as required.
![Page 41: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/41.jpg)
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;
![Page 42: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/42.jpg)
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>...
![Page 43: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/43.jpg)
• 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.)
![Page 44: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/44.jpg)
Structural / semantic coding Use
• Use these:• h1...h6, p; • em, strong; • cite, blockquote; • ul, ol, li; • dl, dt, dd; • address; • code.
![Page 45: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/45.jpg)
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.
![Page 46: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/46.jpg)
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.
![Page 47: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/47.jpg)
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.)
![Page 48: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/48.jpg)
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)
![Page 49: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/49.jpg)
Standards
• Write HTML and CSS according to the specified standards.
• Ensure all code is validated against the appropriate standard.
![Page 50: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/50.jpg)
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>).
![Page 51: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/51.jpg)
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
![Page 52: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/52.jpg)
Use relative font sizing, not absolute units
• Absolute units make resizing text in some browsers impossible for many users who may need it.
![Page 53: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/53.jpg)
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
![Page 54: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/54.jpg)
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>}
![Page 55: Using HTML](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814758550346895db494ab/html5/thumbnails/55.jpg)
• 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.