Reading an excellent article at Accessible Web Design called It’s still important to talk about HTML 4 got me thinking. It was talking about beginners finding out-of-date information on the web and how we need to continue to promote best practices with current information. One point made in the article:
It’s still important to talk about older technology: it’s still relevant to write or promote articles which offer tutorials on simple tasks, like changing font color using CSS or properly forming an unordered list. The reason it’s relevant is because the internet knowledge base is polluted — those who are in control of outdated material should take responsibility for updating their information, ideally, but we don’t all have that power. The best we can do is continue to promote best practices in all areas.
Last week I was teaching a continuing ed class at UNM. The class was a basic overview of how to create and maintain a web site. Here’s what I did and why I think it was a decent compromise for the current state of the web.
- They looked at the HTML 4, XHTML, and HTML5 DOCTYPES. I gave a brief overview of what each one meant and how they differed. (Very brief. This is a 12 hour continuing ed class we’re talking about. Keep that in mind.)
- I told them it was okay to start using the HTML5 DOCTYPE. I think that’s safe. Browsers know what to do with it.
- When they got going with HTML, I taught them HTML 4 Strict syntax. I didn’t let them use the choose-your-own-style syntax of HTML5 in their page building. I think they are a lot safer in terms of browser rendering and accessibility if they stick with a rigorous syntax model like HTML 4 Strict (or XHTML Strict).
Before I started teaching it to them that way, I hadn’t really thought much about the pedagogy of it. But the article at Accessible Web Design spurred me on a bit.
HTML5 hasn’t been implemented fully enough to be mainstream at the present time. Beginners trying to cope with new HTML5 elements with spotty implementation would have more frustration than they need when trying to learn the basics of web design. Learning something that is currently best practice, and rigorous enough to work in any situation seems like a better choice. However, using the HTML5 DOCTYPE is simply easier and will work, even if the rest of the document is formatted as HTML 4. And it eliminates the need for one of those long-winded earlier DOCTYPES.
What are other teachers doing with DOCTYPES and syntax models these days?
Hi Virginia
I would eventually get here, since you’re feed is in my reading list, but today I was prompted by some tweets as well…
Teaching philosophy: I like to get them coding from the first minute and take the theory in snippets as we go along…
This is what I tell my students about doctypes:
Lesson 1a: Use a doctype to trigger “standards mode”.
I include an HTML5 doctype in my very first code example, and tell them this is the “easiest one” that will get the job done. (“What is standards mode?” “We’ll come to that later, for now just know that browsers may not behave as expected when there is no doctype…”)
Lesson 1b: Validate!
Yes, I teach validation from day one. The immediate benefit is catching spelling errors and other similar mistakes.
“The doctype is will tell the validator what set of rules to validate against.”
“The world is moving towards HTML5, thus that is my default nowadays.”
Lesson (about) 3: Students know enough to start googling for solutions to simple problems. I give them a list of warning signs that content might be outdated or plain bad:
No mention of separation of concerns, font tags, align attributes, bgcolor and alink, vlink, etc attributes on the body tag…
I also show them some good resources.
We use the InterACT book, BTW…
Lesson (about) 5, when students know some CSS and are beginning to do real layout:
20 minute talk: The box model according to IE5 and according to standards…
Mention: Standards mode will also affect some aspects of floats and inheritance.
Lesson (about) 10. By now the students know about 20 tags and 10 attributes. It’s time for a systematic walk through of HTML.
This means a 40 minute talk about history and versions.
Another 40 minute talk about details of HTML syntax:
This includes void elements, implicitly closed elements, shortened attributes for boolean values.
Another 20 minutes about HTML and true XHTML. (Save a file using the .xhtml extension and make a markup error to show them the Yellow Screen of Death.)
Until now EVERY SINGLE EXAMPLE I’ve shown them has been using XHTML syntax, BTW.
My rationale: It reduces errors. By now most of them have experienced this first hand anyway.
Lesson (about) 11: Short introduction to HTML5
Main points:
– The term is used in many ways. Show some slides or demos, but no code.
– For a browser, there are no such things as HTML versions (except in IE, but that’s saved for later.)
– Browsers will handle bad markup in a uniform way now, but validation is not about looks anyway, but getting a predictable and consistent DOM from your markup.
– Thus authors should not stray from the path of validation and best practices. HTML5 is no excuse to produce sloppy code!
– A quick walk through on some new features. I’ll let them test input[date] in Opera, or a simple video. Canvas is way too hard, so at this stage I’ll only show them demos.
– Different features of HTML, especially in the broad sense, are at different levels of maturity. Use carefully. Google, read and test.
I do not teach shims, fall backs and workarounds. Not in my beginners’ class. If it does not work in IE8+ and better browsers without a decent built in fall back, they MAY find a solution, but I do NOT require it in my beginners’ class.
Their sites must not work in IE lte 7 at all. My students won’t enter the work force until 2012. Probably not until 2015.
Students that want to do real world sites *today* are encouraged to use JQuery for effects.
Using this setup, it is 100 % OK to use the versionless HTML5 doctype. But I do miss a good HTML lint tool or a pedagogic profile for the validator, that I’ve in various forms written about in my English language blog at http://itpastorn.blogspot.com/
Wow, Lars, thanks for this thorough description of what you’re teaching. I know reading it can help others who are web educators like yourself.
Virginia
Hi Virginia!
We’ve been introducing the HTML4 and XHTML 1.0 doctypes and following XHTML sytnax in our web development program — with a few “look aheads” to HTML5. I believe that with a strong foundation in web standards and good coding practices a student will be able to pick up HTML5 when needed.
However, I agree that the HTML5 doctype is safe to use and will definitely introduce it at the beginning of next semester. My plan is to still follow a rigorous coding style — with tags and attribute names in lowercase letters and quoted attributes. Some of my students are currently working in the industry as graphic designers and their websites need to display in today’s popular browsers (including IE7 and even IE6, depending on the client). Our community college students need to learn about new HTML5 elements and features but also to create websites that work today and in the future. My new web development textbook, Basics of Web Design: HTML5 & CSS (http://webdevbasics.net — in press and expected out sometime in March, 2011) will use this approach.
@Lars — The HTML lint tool at http://lint.brihten.com/html seems to be useful.
Glad to hear what you are doing, Terry. It sounds like we are doing about the same thing. Good luck with the new edition of your excellent book.
@Terry
That tool might be the start of something good. Unfortunately it still has ways to go before it is feature complete and bug free, IMO.