Jessica's HTML Notes

Differences between HTML and XHTML

In XHTML:

- css element selectors = case sensitive (previously weren't)
- stricter code structure requirements (all elements must be closed, no cross-nesting)
- mime type for XHTML may not be recognized by IE
- some older DOM methods may not be available (eg: innerHTML, document.images, document.forms)
- tags have to be closed and paired. For brevity a slash can be used there is not a paired closing tag eg: <br />
- tags should all be lowercase
- attributes must have quotation marks around them eg <div align="center"> is okay but <div align=center> is not

Even if you chose not to use full XHTML and use Strict HTML, you can still use may of the principles of XHTML such as quoting attributes and lowercase tag names

In HTML Strict: tags such as img and br are written without the closing slash. Paragraph <p> and list item <li> should still be closed however (unlike earlier versions of html)

Quirks mode vs. Strict Mode

• Invalid HTML can cause browser to tick back to Quirks mode (designed to handle and render pages in a way more compatible with older browsers where it would try to repair invalid code...but may not repair the way you hoped it would)
• Strict mode provides more consistent rendering
• Quirks mode makes troubleshooting problems more difficult

Semantic HTML

• Using tags that convey meaning (this is important) rather than presentation (what it should look like).
• Examples
  • emphasis <em> rather than italics <i>
  • categorizing headings with tags like <h1> or <h2>
  • div class-names like "error" rather than "boldRed" (conveys meaning over presentation)
• Why?
  • Gives users more control over presentation/seperation of presentation from code
  • may be more meaningful to assistive technologies like screen-readers
  • brevity: often shorter code than using classes or id's would be
  • browsers inherently have some level of default presentation for various semantic tags if you don't specify the presentation via CSS