The pulse of Alexander Interactive

Tom is Ai’s front-end tech lead.

The following is a developmental check-list I religiously adhere to and find extremely essential in ensuring semantic-rich, accessible and valid (x)HTML.

Da Basics

1. Specify a DOCTYPE and namespace
2. Specify the document’s language
3. Write your markup before writing any CSS to ensure your HTML is semantic and well-formed
4. Document your HTML with start and end comments for clear separation of layout blocks within your markup
5. Make sure the page validates (x)HTML
   1. 1.0 Strict for all new development
   2. Transitional for legacy applications using HTML flavors from the past
6. Make sure the page title is set
7. Include all necessary meta tags
8. Use block and inline elements appropriately
9. X-browser/X-Platform the page
10. Separate blocks of content with a div
11. KEEP ALL ATTRIBUTES AND THEIR VALUES LOWERCASE…KICKIN’ IT OLD SKOOL IS COOL, BUT NOT THIS WAY

Presentation and Content — Keep ‘em Separate

1. Make sure your markup is semantic in that proper elements are used in which their purpose was intended
   1. Layout => div
   2. Headings => h1 through h6
   3. Paragraphs => p
   4. List of items => ul, ol
   5. Content emphasis => em, strong
   6. Tabular/grid data => table
2. The presentation of content should be consistently applied regardless of CSS

Name Your Children With Some Structure

1. Name your ID’s and classes based upon the structure of its content, not presentation
   1. content_head
   2. content_main
   3. sidebar
   4. navigation_main
   5. navigation_secondary
   6. logo
   7. header
   8. footer
2. This will prevent renaming if the content’s look and feel changes

Headings Schmedings

1. One h1 per page
2. Maintain the hierarchy, h1 -> h2 -> h3 … h6 regardless of how cosmetically they may appear in design

Pretty Pictures

1. Every image must contain a non-empty alt tag
2. Dimensions on every image
3. Keep images used for photographical purposes inline, not as background images

I Call ‘em Links, Anchors are for Boats

1. Include title attributes on important links and/or graphical links containing no text in the image itself that describes the destination of the link
2. Make sure there is always text present within the anchor even if it is a graphic
3. The text should be informative, ie – use ‘close’ rather than just ‘x’ for a close button

Fontography

1. Try to avoid all caps within markup and allow CSS or emphasizing elements to properly transform text so you have the option of reverting if needed
2. Don’t abuse the br tag, using multiple consecutively isn’t necessary, just begin a new block level element

Set the Table, Anthony, and Don’t Forget the…

1. caption element to let users know what your table is about (look at it as short headline)
2. summary attribute to further describe your table’s contents in more detail
3. colgroup‘s for multi-column tables
4. th‘s for column headings
5. thead for table heading content, tfoot for table’s footer content and tbody for the main body of the table’s grid content
6. tfoot comes before the tbody in the markup…don’t ask me why
7. And for pete’s sake, don’t use tables for layout, that’s so 1999

Forms (Don’t Have Anything Cute for this One, Sorry)

1. Don’t forget the action and method attributes (leave em blank if you don’t know, leave that mush to the back-end dude)
2. Have a legend to set the title of the form
3. Use fieldset‘s to group related fields
4. Use div‘s for further content separation within fieldset‘s
5. tabindex on each input for easy keyboard accessibility
6. The corresponding text for each input should be a label with the for attribute set to the input‘s ID
7. maxchar set on inputs where necessary to assist with validation