Lecture on Using HTML
advertisement
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:
• 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
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 &amp; 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 crossbrowser scaling. Most techniques currently
recommend using font size keywords.
![[#PFR-664] [ACCESS] Using em, percent, named for font sizes and](http://s3.studylib.net/store/data/008524257_1-e1b711369b412e0cc1e52963d3e370f9-300x300.png)
