well formed xhtml
some basics

terms

Just reviewing a few terms you learned these back in Web I:

And, here are further examples that also include an entity:
labeled examples of tags, attributes, attribute-values, and entities (and, text) When talking with other people in the field, it’s important you use these terms correctly.

video (18m55s)

good practices

Even though original HTML always doesn't require the following, they are best practices, and they are required for this class:

Well-formed (duh): each open-tag must be eventually followed by a corresponding close-tag, and if a tag's body contains another open-tag it must also contain the corresponding close-tag.
- Bad: This is <em>not <strong>at all</em> legal</strong> XML.
- Good: This is <em>actually <strong>very</strong> good</em> practice.
Another way of viewing this: The open/close tags must correspond to a tree.
The most common (non-X)HTML example using improperly nested tags is <p>, which (in HTML) doesn't need to be closed; the browser auto-closes the tag when it reaches the next <p> (or more precisely: when it reaches the next block-level open-tag, or a close-tag which is terminating the enclosing block, e.g. if the paragraph was already inside an itemized list).

Browsers tend to go to great lengths to try to make sense of tag soup; just because a page looks fine in your browser doesn't mean it's legal. The result is that many people learned their HTML by doing a show-source on bad, illegal examples, and then propagating that bad HTML, and never realizing it because most browsers still did something reasonable (although the details of how a browser handled bad HTML are of course entirely non-standard).
Tag names are case-sensitive (with a preference for lower-case and camelCase).
Thus, you can have “<em>hello</em>” or “<EM>hello</EM>”, but not “<em>hello</EM>”. You should use the lower-case version of all html tags.
Quote all attribute-values, even when they look numeric.
Thus, you can have “<td colspan='3'>” or “<td colspan="3">” but not “<td colspan=3>”.
By the way: In this class, I'll suggest preferring single-quotes over double-quotes (only for slightly-greater-ease-when-interacting-with-other-languages — nothing significant).
No empty-attribute syntax: every attribute is followed by “=” and a value. Thus, you can have ¹ “<div hidden='hidden'>” but not (for this class) “<div hidden>”.
Although it's legal HTML5 to have boolean-valued attributes simply be present without any value provided (indicating true-ish), XHTML and this class require that every attribute have an explicit value.

relevent: Unfortunately, boolean attributes in HTML don't tend to take the values “true” or “false”; instead the value should either be the same as the attribute name (“<div hidden='hidden'>”) (or not present at all, “<div>”).
I guess it would just make too much sense to have booleans be "true" or "false".
Self-closing tags:
- <br></br> — fine, but long-winded.
- <br/> — self-closing tag, allowed by XML. Yay!
- <br /> — Formerly used for backwards compatability. The original HTML required a space before the /, and it's conceivable (if unlikely) that a modern browser will insist on using the HTML standard.
  
  We will not worry about such archaic cruft for this class, but your future employers might well care about customers who use old browsers.
- <br> </br>— (note the space inside the tag) this version is not equivalent (and, not valid HTML) — spaces are part of your XML text, even if an HTML browser chooses often ignore them for layout purposes.
Important: While self-closing tags can be used with any tag in general XML, HTML5 only allows (and browsers actually enforce!) self-closing tags for tags which can never have a body (“void elements”). For tags that can optionally-have a body (notably: script), HTML does not recognize the self-closing version, even in places where you want it to have an empty body.
- <hr />— fine; hr never has a body.
- <img src="foo.jpg" />— fine; img never has a body.
- <script type="text/javascript" src="foo.js"></script>— fine.
- <script type="text/javascript" >callSomeFunction();</script>— fine.
- <script type="text/javascript" src="foo.js" />— BAD; a browser may ignore the tag entirely!, which is an annoyingly difficult bug to track down.
There is no good reason for HTML to be defined like this!
Note that xhtml is always ² valid html5 (but not vice versa — for example, unclosed p tags are allowed in html5).

Special tags, attributes, and entities

attributes

id — Used to name a particular element, in the html-document.
The name must be unique, of course.
class — Used to attach a CSS style to an element.
related: CSS styles should be semantic in nature, describing the end-purpose, not merely the effect. So don't have a style named “dark-blue” or “pale-and-underlined”, but do have styles named things like “due-date” or “minor-note”.
style for adding ad hoc CSS to an element.
there are some other global attributes (notably lang, title for, e.g., tooltip-info, and event handlers like onchange and onclick)

entities

Most HTML entities are merely names for special characters (like — for “—” or ≤ for “≤” or … for “…”).

However, there are five essential entities defined in XML itself, necessary to distinguish between content and the (xml) markup itself:

< (“less than”)
> (“greater than”)
& (“ampersand”)
" (“(double) quote”)
' (“apostrophe”)

The most important is lt; the others can usually be distinguished by context ³. But just because browsers handle the incorrect markup, doesn't make it right.

Another place these entities might occur is in URLs, like http://some-site.com/some-page's-weird-stuff.html.

relevent: A URL — especially if it refers to a filename — might have characters which confuse it with syntx-for-URLs. In particular, a space or a slash (/), but also URL-specific characters like ?, =, , (used to encode GET parameters). In these cases, one will use a character-encoding that involves the numeric unicode: rather than http://websearch.com?word1=why?&word2=M&M's&word3=space␣case you would use http://websearch.com?word1=why%3F&word2=M&M's&word3=space%20case

tags (“elements”)

There are two particular HTML tags that don't actually mean anything by themselves(!). They are purely used for grouping (kinda like parentheses):

span
div

They’re useful since you can attach a class/style attributes to them (or event-handlers like onclick, etc.).

well formed xhtml some basics