• Citation: This is a phrase element and contains a citation or a reference to other sources.
• Computer Code Fragment: Designates a fragment of computer code.
• Definition List, Definition Term, Definition Description: Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term
. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block level content.• Attributes: class, dir, id, lang, style, title
Sunday, May 8, 2011 DEFINITION LISTS (DL, DT, DD)
SEO Search Engine Optimization is the process of improving the volume and quality of traffic to a web site from search engines via "natural" ("organic" or "algorithmic") search results. Sunday, May 8, 2011 DEL
• Deleted Text: INS and DEL are used to markup sections of the document that have been inserted or deleted with respect to a different version of a document (e.g. in blog authoring where publishers need to view changes made).
• Attributes: cite, class, datetime, dir, id, lang, style, title
Search Engine Optimization Search Engine Marketing
Sunday, May 8, 2011 DFN
• Definition: Indicates that this is the defining instance of the enclosed term.
• Attributes: class, dir, id, lang, style, title
SEO : Search Engine Optimization is a subset of SEM and involves the process of improving the volume and quality of traffic to a web site from search engines via natural (organic or algorithmic) search results. Sunday, May 8, 2011 INS
• Inserted Text: INS and DEL are used to markup sections of the document that have been inserted or deleted with respect to a different version of a document (e.g., in draft legislation where lawmakers need to view the changes).
• Attributes: cite, class, datetime, dir, id, lang, style, title
Search Engine Optimization Search Engine Marketing
Sunday, May 8, 2011 LABEL
• Form Field Label Text: The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.
• Attributes: accesskey, class, dir, for, id, lang, style, title
This Radio Button 1 has a label associated with it.
Sunday, May 8, 2011 MAP
• Client-Side Image Map: The MAP element specifies a client- side image map (or other navigation mechanism) that may be associated with another elements (IMG, OBJECT, or INPUT). An image map is associated with an element via the element's usemap attribute. The MAP element may be used without an associated image for general navigation mechanisms. • Attributes: accesskey, class, dir, id, lang, style, title
Sunday, May 8, 2011 NOSCRIPT
• Alternate content container for non script based rendering. The NOSCRIPT element allows authors to provide alternate content when a script is not executed. The content of a NOSCRIPT element should only be rendered by a script aware user agent.
This is some text to describe the script and it’s effects to those who have javascript disabled or to screen readers.
Sunday, May 8, 2011 PRE
• Preformatted Text: The PRE element tells visual user agents that the enclosed text is "preformatted". • Attributes: class, dir, id, lang, style, title
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks Sunday, May 8, 2011 Q
• Short Inline Quotation: The BLOCKQUOTE and Q elements designate quoted text. BLOCKQUOTE is for long quotations (block level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks. • Attributes: class, dir, id, lang, style, title
As Barack Obama said, Focusing your life solely on making a buck shows a poverty of ambition. It asks too little of yourself. And it will leave you unfulfilled.
Sunday, May 8, 2011 SAMP
• Sample: Program output, scripts, etc. • Attributes: class, dir, id, lang, style, title
If the file starts with nph- then the web server passes all output straight to the socket.
Sunday, May 8, 2011 SPAN
• Generic Style Container: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block level (DIV) but impose no other presentational idioms on the content. • Attributes: align, class, dir, id, lang, style, title
This can be styled differently than this text.
Sunday, May 8, 2011 VAR
• Variable: Instance of a variable or program argument. • Attributes: class, dir, id, lang, style, title
The variable m_head stores the entire header string.
Sunday, May 8, 2011 DON’T USE THESE TAGS
• Presentational Elements: b, br, big, hr, i, small, tt
• Deprecated Elements: basefont, center, dir, font, isindex, menu, s, strike, u
Sunday, May 8, 2011 WHAT ABOUT HTML5?
• No SEO advantage at this time
• Whole new language
• Audio
• Video
• Section
• Aside
• Article
Sunday, May 8, 2011 ACCESSIBILITY
Sunday, May 8, 2011 ACCESSIBILITY
• Two-thirds of disabled internet users use assistive devices (aids, equipment, adaptations) to access a computer or the internet.
• 45% required voice recognition assistance.
• 28% use keyboard adaptations.
• 24% use mouse adaptations and 19% use speech output systems.
• Only 38% of those needing assistive devices found most or many websites easy to use and navigate. This compares with 69% of people who do not use assistive devices.
Sunday, May 8, 2011 ACCESSIBILITY
A recently re-launched website for the home and life insurance market has seen:
• A saving of 66% in maintenance costs, amounting to £200,000 per annum.
• Natural search engine traffic increased by 30%
• A 75% reduction in time to load a page
• An additional 13,000 visitors each month from improved browser compatibility alone.
• A 95% increase in life quotes online with Life insurance sales online increasing by 90%.
Sunday, May 8, 2011 ACCESSIBILITY CODING
• Code for text readers
• Turn off CSS (Web Developer Toolbar)
• Search engines work much like text readers
• Search engines don’t crawl Javascript
• Challenge yourself to use less JavaScript
Sunday, May 8, 2011 ACCESSIBILITY
More information at http://www.w3.org/WAI/bcase/resources
Sunday, May 8, 2011 SEO TIPS & TRICKS FOR PROGRAMMERS
Sunday, May 8, 2011 COMBINING ADJACENT IMAGE AND TEXT LINKS FOR THE SAME RESOURCE
If you have an image and a link, combine them into the same link tag.
Go to the home page Incorrect usage:
Products page
Sunday, May 8, 2011 CREATING A LOGICAL TAB ORDER THROUGH LINKS, FORM CONTROLS, AND OBJECTS
If the source order of your page isn’t in a logical order then set your tab order manually.
• The tabindex is given a value between 0 and 32767. • When elements are navigated using the tab key, the elements are given focus in increasing order of the value of their tabindex attribute.
• Elements that have a tabindex value higher than zero will receive focus before elements without a tabindex or a tabindex of 0.
• After all of the elements with a tabindex higher than 0 have received focus, the rest of the interactive elements are given focus in the order in which they appear in the Web page.
Sunday, May 8, 2011 CREATING A LOGICAL TAB ORDER THROUGH LINKS, FORM CONTROLS, AND OBJECTS (CONT.)
Links with a specified tab navigation order:
Sunday, May 8, 2011 PROVIDING TEXT ALTERNATIVES FOR THE AREA ELEMENTS OF IMAGE MAPS
Provide text alternatives for each
Sunday, May 8, 2011 PROVIDE A TITLE ON LINKS
Title offers additional information about the element for which it is set. It tells users about the nature of the linked resource.
• Visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object).
• Audio user agents may speak the title information in a similar context.
Here's a photo of me scuba diving last summer
Sunday, May 8, 2011 PROVIDE TEXT AND NON-TEXT ALTERNATIVES FOR
If object is used, provide a text alternative in the content of the element.
As temperature increases, the molecules in the balloon...
Sunday, May 8, 2011 PROVIDE DEFINITIONS FOR ABBREVIATIONS BY USING THE ABBR AND ACRONYM ELEMENTS • Use the abbr element for any abbreviation, including acronyms and initialisms.
• Initialisms and acronyms may be marked up using the acronym element.
Sugar is commonly sold in 5 lb. bags.
Welcome to the WWW !
Sunday, May 8, 2011 PROVIDING LINK TEXT THAT DESCRIBES THE PURPOSE OF A LINK FOR ANCHOR ELEMENTS
Describe the purpose of a link by providing descriptive text as the content of the a element. The description lets a user distinguish this link from other links in the Web page and helps the user determine whether to follow the link.
Current routes at Boulders Climbing Gym
Sunday, May 8, 2011 USE ALT ATTRIBUTES ON IMAGES USED AS SUBMIT BUTTONS
For input elements of type 'image', the alt attribute of the input element is used to provide a functional label. This label indicates the button's function, but does not attempt to describe the image.
Sunday, May 8, 2011 USE CAPTION ELEMENTS TO ASSOCIATE DATA TABLE CAPTIONS WITH DATA TABLES
Associate captions for data tables where captions are provided in the presentation. The caption for a table is a table identifier and acts like a title or heading for the table.
Schedule for the week of March 6 ...
Sunday, May 8, 2011 USE DEFINITION LISTS
Provide the definitions of words or phrases by presenting them in a definition list. The list is marked up using the
element. Within the list, each term is put in a separate element, and its definition goes in the element directly following it. The title attribute can be used to provide additional information about the definition list Term Definition of term.
Sunday, May 8, 2011 USE ID AND HEADERS ATTRIBUTES TO ASSOCIATE DATA CELLS WITH HEADER CELLS IN DATA TABLES
Associates each data cell (in a data table) with the appropriate headers. This technique adds a headers attribute to each data cell (td element). It also adds an id attribute to any cell used as a header for other cells. The headers attribute of a cell contains a list of the id attributes of the associated header cells.
Sunday, May 8, 2011
Exams Projects 1 Final 1 Final 15% 20% 10% 15%
Sunday, May 8, 2011 USE LABEL ELEMENTS TO ASSOCIATE TEXT LABELS WITH FORM CONTROLS
Use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control.
First name:
Sunday, May 8, 2011 USE LONGDESC WHEN APPLICABLE
The purpose of LONGDESC is to provide information in a file designated by the longdesc attribute when a short text alternative does not adequately convey the function or information provided in the image.
Sunday, May 8, 2011 USING NOEMBED WITH EMBED
Provides alternative content for the embed element in a noembed element. The noembed is rendered only if the embed is not supported. Position it as a child element of embed so that it is clear to assistive technologies that a text alternative is associated with the embed element it describes.
Sunday, May 8, 2011 USING NOEMBED WITH EMBED
<![CDATA[ <a href="../transcripts/ transcript_history_rome.htm">Transcript of "The history of Rome"</a> ]]>
Sunday, May 8, 2011 USE OL, UL AND DL FOR LISTS
Create lists of related items using list elements appropriate for their purposes.
• The ol element is used when the list is ordered • The ul element is used when the list is unordered • Definition lists (dl) are used to group terms with their definitions.
Mix eggs and milk in a bowl. Add salt and pepper. Sunday, May 8, 2011 USE THE DFN ELEMENT TO IDENTIFY THE DEFINING INSTANCE OF A WORD
Use dfn to mark the use of a word or phrase where it is defined. The dfn element is used to indicate the defining instance of the enclosed term.
The Web Content Accessibility Guidelines require that non-text content has a text alternative. Non-text content is content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language.
Sunday, May 8, 2011 USE THE LINK ELEMENT AND NAVIGATION TOOLS
Describes how the link element can provide metadata about the position of an HTML page within a set of Web pages or can assist in locating content with a set of Web pages.
Sunday, May 8, 2011 USE THE LINK ELEMENT AND NAVIGATION TOOLS
Sunday, May 8, 2011 USE THE LINK ELEMENT AND NAVIGATION TOOLS
•Start: Refers to the first document in a collection of documents.
•Next: Refers to the next document in a linear sequence of documents.
•Prev: Refers to the previous document in an ordered series of documents.
•Contents: Refers to a document serving as a table of contents.
•Index: Refers to a document providing an index for the current document.
Sunday, May 8, 2011 USE THE LINK ELEMENT TO LINK TO A GLOSSARY
Provides a mechanism for locating a glossary. The rel attribute of the link element is set to "glossary", and the href attribute contains the URI of the glossary page. User agents can then assist users in accessing the glossary quickly and easily.
Sunday, May 8, 2011 USE NULL ALT TEXT AND NO TITLE ATTRIBUTE ON IMG ELEMENTS FOR IMAGES THAT SHOULD BE IGNORED
• Shows how images can be marked so that they can be ignored by Assistive Technology.
• If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored.
• Note: Although alt=" " is also valid, alt="" is recommended.
Sunday, May 8, 2011 PROVIDE A DESCRIPTION FOR GROUPS OF FORM CONTROLS USING FIELDSET AND LEGEND ELEMENTS Provides a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.
The play Hamlet was written by: William Shakespeare Sunday, May 8, 2011 FIX THIS CODE!
Sunday, May 8, 2011 FIX THIS CODE!
Sunday, May 8, 2011 FIXED CODE
Sunday, May 8, 2011 FIX THIS CODE!
1. Eggs 2. Milk 3. Cereal Sunday, May 8, 2011 FIXED CODE
Eggs Milk Cereal Sunday, May 8, 2011 FIX THIS CODE!
Sunday, May 8, 2011 FIXED CODE
Sunday, May 8, 2011 FIX THIS CODE
Sunday, May 8, 2011 FIXED CODE
Sunday, May 8, 2011 Q&A
Sunday, May 8, 2011 THANK YOU
Jonathan Shroyer ‘corePHP’ Battle Creek, MI, USA 269.979.5582 Ext:102 | jonathan@corephp.com Twitter: @learncss
Sunday, May 8, 2011
