Frontend Engineering, Volume I

HTML Chapter 9 Companion

© 2012, Martin Rinehart


History—Rescued by WHATWG

Frequently asked questions about the Web Hypertext Application Technology Working Group: WHATWG FAQ.

The W3C and WHATWG split: www.i-programmer.info/news/191-htmlcss/4531-which-html5-whatwg-and-w3c-split.html.

The W3C HTML 5 standard due 2014 (14 Feb. 2012 news story): www.computerworld.com/s/article/9209322/W3C_HTML5_will_be_finished_in_2014.

The original intent of the WHATWG was to revive HTML, instead of letting it be replaced by XHTML. As time went on, however, the group became convinced that there were valid reasons for having an HTML flavor that could be manipulated by XML tools, so it revived XHTML. The simple doctype, <!DOCTYPE html> is valid for both. If you like irony, while XHTML is aggressively lowercase (uppercase tags and attributes will fail), the use of uppercase "DOCTYPE" is due to XML concerns: wiki.whatwg.org/wiki/HTML_vs._XHTML.

Websites—Frontend Engineers

We went to the classified ads for New York City and grabbed the first "help wanted" that specified "frontend engineer." This is the skill set the employer wanted:

This ad was exceptional in that it did not specify platforms: desktop, tablet, phone, etc. It was representative in the breadth of the skillset required. They wanted four years' experience. Compensation was not specified but it would likely be in six figures. Not bad for someone in their mid-twenties.

HTML editors, unranked: en.wikipedia.org/wiki/List_of_HTML_editors.

HTML editors ranked: a recent survey of frontend engineers on LinkedIn showed Notepad++ as the favorite. With half as many votes, Sublime Text 2 (free trial, low price) placed second. (Unscientifically, ST2 supporters were more enthusiastic than any others.) Nearly a thousand voters spread their choices among two dozen products. Warning: there are multi-platform editors, and others that run on Mac but not Windows, and vice-versa.

CSS made simple(r), nicely illustrated: www.noupe.com/css/50-useful-css-tools-and-generators-for-developers.html.

Directory of JavaScript libraries: javascriptlibraries.com.

HTML 5 / Living HTML

The "last call" HTML 5 proposed standard: www.w3.org/TR/2011/WD-html5-20110525.

The WHATWG publishes a full standard (that you do no want) and a Developer's Edition (that you want). The full standard includes lots of material on exactly what a browser should do with malformed, obsolete and dropped HTML, as well as lots of other material that is relevant to browser implementers but not the concern of HTML authors. Last we checked, the full standard weighed in at about 7MB. The Developer's Edition is about one third as heavy.

The Living HTML stasndard: developers.whatwg.org.

Blocks—Fancy Tables

If you've been following our histories, the name Dave Raggett will ring a bell. Back in 1995 he wrote a proposal for HTML tables, which was published as Internet Engineering Task Force 1942. (After the IETF gave up on HTML, and the W3C failed to find consensus on HTML 2 and HTML 3, Raggett wrote the document that became HTML 3.2, the first official standard.) Raggett's table proposal has survived virtually unchanged since IETF 1942. It makes simple tables simple, but doesn't fail when simple is no longer adequate. To our way of thinking, this is HTML at its best.

HTML 2 (see the notes): martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html.

Row and Column Spans

Example page "9a" (menu, above) shows the first form of the first example table in the print: Chapter 9, Blocks—Fancy Tables. Example "9b" shows the same table using left-side labels that span two rows each. Grab the source (use your browser's View Source and then Save As...). Add a third person to be sure you understand the rowspan attribute.

Example page "9c" (also above) shows the first form of the second example table in the print. Example "9d" shows the same table using multi-column labels in the top row. Again, grab the source and add a "Career" category, as you see in example "9e".

<col> and <colgroup> Tags

Ready to try one without our help? We hope so. If you hadn't noticed, you are writing HTML and there is only one more chapter in this knowit. So take the table you built above and add a couple <col>s to the final table. (You'll google the topic, we trust. This one's easy because we told you the name of the tag. On your own you'll have to work a little harder.)

Got those columns? Now try to create a <colgroup>. (You'll get more use from column groups once you get to CSS and learn to style them.)

Now you're ready to go on to your own sample project's time line page.

HTML 5 Input Widgets

Third in a blog series: webaim.org/blog/future-web-accessibility-new-input-types-in-html5.

Concise but undated summary of browser suppport: www.wufoo.com/html5.

Early 2012 status, mobile: www.quirksmode.org/html5/inputs_mobile.html.

Though this is the first time it appears in this volume, the "quirksmode" site is invaluable for JavaScript. Warning: the above report is discouraging.

Project—Title and Time Line

In your work above you tried row and column spans. Now it's time to go back to your time line page and add some spans. Your goal: an informative time line. Your secondary goal: a good-looking time line.

To complete your project, take screen shots of your time line and your image map. Use these to arrange a nice-looking title (home) page. Remember, this is your site's landing page. Make it a good one.

Got it done? A bit of leaning back and admiring your own work would be appropriate at this point. Perhaps a bit of showing off for your significant other. Enjoy. You've earned it.

Character Entities—HTML Characters

If you find yourself writing about HTML you'll need these two:

Feedback: MartinRinehart at gmail dot com

# # #