The Joy of HTML

I don’t understand why people treat the Code View option in Dreamweaver like it’s a bad thing. Like everything has to be done in a visual environment. Like the stuff behind the magic mirror of Design View is too awful for even a glance.

If you are using Dreamweaver, or teaching Dreamweaver, or writing a book about Dreamweaver, you and your students or readers deserve the chance to appreciate the joy of a clean, semantic page of HTML. Clean, semantic HTML is a joy to behold. Everyone deserves the opportunity to admire that nicely crafted doctype, the powerful link to the stylesheet, the well-written title. And what a body you get to see! You see properly marked up headings and paragraphs and lists and blockquotes, uncluttered and clean and purposeful. You may see an occasional div enclosing a group of page elements that fit together logically into a stylish and functional part of a page: perhaps a luscious sidebar or a shy footer.

The joy of clean HTML is that it’s all content. There is no clutter, no presentational trash like font tags and align attributes. Just beautiful words, words marked up or identified to indicate their logical purpose as headings or lists or acronyms.

There’s a name for HTML like that: standards-compliant.

Standards-compliant HTML goes anywhere, does everything, never quits being available, and always makes sense no matter how you get to it. That’s a lot of joy from something so basic and simple as clean markup.

If you are using Dreamweaver, or teaching Dreamweaver, or writing a book about Dreamweaver, open things up to Code View now and then, or maybe Split View, so that everyone can see what they are really doing. Then people can see if what they’re creating visually is joyful, clean, and semantic HTML. HTML that is meant for the masses. HTML that can go anywhere, do anything and always make sense.

That’s too hard you say. You have to learn CSS, you say. CSS takes too long, you say.

But. There’s motivation to consider. If you are using Dreamweaver, or teaching Dreamweaver, or writing a book about Dreamweaver, do you think you or the people you are training want to be what Kathy Sierra calls kick-ass users? Do they want to reach the most people on the most devices? Do they want to create work that will go anywhere, do anything and always make sense: professional level kick-ass work?

Let’s look at motivation a bit more. Suppose someone using Dreamweaver wants to move something over to the right on the page a few pixels. Using only Design View, you could have them use the text indent icon on the Property inspector. The stuff would move, right? But what if they were using Split View and realized that they had, in reality, created a blockquote. Having survived 10th grade English, your user realizes in her heart of hearts that whatever she just moved a few spaces really isn’t a blockquote.

Here’s your moment of motivation. In this moment, you show this user how to move things to the right just a bit with a CSS property called margin-left hitched up to a class or id for the element being moved. Not too hard, not too much CSS to take forever to learn. Just enough CSS to help the user kick butt with clean, semantic, standards-compliant HTML. Ah, joy.

Another example. Suppose you or a person you are training creates a class and assigns it to a paragraph. Wow, you feel cool cause you’re using CSS. However, each time you press Enter in Dreamweaver and type another paragraph, the class attribute persists. Soon you have a page full of paragraphs with dozens of class attributes scattered in the markup.

Unless you looked at Code View now and again, or perhaps work in Split View, you’d never know that the page was littered with class attributes. If you did look at Code View, you might wonder if you really need to assign the same class to every single paragraph you write. Isn’t that, like, classitis or something, dude? Here’s that moment of motivation when you explain that one style for the p element could do the same thing with no classes needed anywhere. Suddenly the difference between cluttered markup and clean markup makes sense and CSS isn’t so hard after all.

I’ve been known to call this notion integrated HTML and CSS, but today, I’m calling it joy.

Is writing standards-compliant web pages is a worthy goal? Is work that will go anywhere, do anything and always make sense a worthy goal? I certainly think so. If I’m right, we have admit that Dreamweaver’s Code View is worth using, at least sometimes. We have to admit that using CSS instead of presentational HTML is easier in Dreamweaver if people can experience the joy of HTML.

Technorati Tags: , , , , , ,

16 thoughts on “The Joy of HTML”

  1. Boy, it’s funny that you mention people not liking code view. I was just thinking today about a former cow-orker who when he walked by my desk and saw that I was in code view would scream at me like I was committing some unpardonable sin. I dunno, maybe he thought I made him look bad or something. I told him that some changes were just easier to make that way. I didn’t have the heart to tell him that I made my first web pages using vi….

  2. What a lyrical description! I know exactly what you mean, and I too find it sad that so many are afraid of that view. (In my previous job I often met students who were adamant about not wanting to have anything to do with code view.)

  3. Thanks, Elaine.

    Dreamweaver is a tool like any other and can be used to create clean code or bloated code. The difference can be found in a working relationship with Code View. HTML is so simple: it ain’t that scary.

    If standards and accessibility were part of the process of teaching Dreamweaver from the beginning, then learning how actions in the visual environment affect what happens in Code View could be a natural part of the learning process, similar to what I described with the references to moments of motivation.

  4. At work a coworker and I have many conversations about this very subject. He teaches as do I and sometimes we feel like Dreamweaver gets in the way or there is too much focus on teaching Dreamweaver. While it is great to have the visual tools in DW when teaching those tools become a hinderance and ends up confusing students. Most students I get already have picked up bad coding habits so it becomes very hard to set them straight.

  5. It’s the Property inspector habit, right?

    It might make life a lot easier if Adobe revamped the Property inspector and removed those fields for text that let you change font, color, and so on. The only options available for formatting text would be to select a tag from the format menu (the p, h1, h2, etc) or an already existing class from the pulldown CSS menu. Then any presentation rules would have to be added in the CSS. Also, if they quit calling the blockquote icon “indent text” and labeled it correctly it would help.

  6. While I started in Dreamweaver years ago, and never thought I’d *ever* get into “coding by hand”, I can’t imagine ever returning to the “Design” view.

    Now that I teach web design, I have all my student start with some text-editor – other than Dreamweaver – to make sure they’re not even tempted to go into the “design” mode.

    At first, the beginning students feel overwhelmed at the possibility of learning HTML, CSS, and the idea of “accessibility”, but a quarter way through the course, I can see that most of them really start to “get it” … By the end of the class most remark how they never new they could learn to hand code their own site and look forward to learning more – especially about CSS.

    Good times!

  7. You think code is beautiful? Excuse me but your are mad (in a good way_).

    The one thing the whole internet suffers from is a way to create web pages easily without having to learn all that rubbish.

    Apples iWeb comes closest followed by CMS systems like Joomla.

    If you like that sort of stuff then I wish you well, I do at least admit that people like yourselves tie the web together and deserve our thanks.

  8. Tekno Boy, Thanks (I think).

    My attitude is based on my support for web standards. If you want web pages to use standards, then understanding the basic building blocks has to be the first step. It’s nothing against tools you might use later.

  9. Well…

    I really like your opinion about the Code View… I myself use Dreamweaver and like the Design View… But here and there I look and delete some code that is just too much… But honestly… I’m afraid of the Code View… I’m loosing the overview so easily.. even when I clean up the code… I don’t if the reason is that I was tough HTML with the Design Mode or that I’m just a wussy :)… Maybe I will never know… But you motivated me to look even more often in the code and clean it up… Thanks 🙂

  10. Sorry for the confusion. I am saying I have a separate site that I want to begin allowing others to post their articles written for that site. But I’m not sure how to manage their articles or post allow them to post them (similar to the format eHow uses). Any suggestions?

  11. I have a site that I will allow women to post encouraging or fun articles for women. It is not a competition for eHow in any way nor is it a site to use eHow articles.

  12. OK. I think I finally see what you want to do. What you want requires quite a bit of functionality. I would suggest learning about CMS software such as Drupal or the CMS capabilities of software like WordPress to achieve your goal. Finding a good book to get you started would probably be your best bet. I don’t have any books in my list of recommended books that deal with CMS software, but you should be able to read reviews on Amazon to get some idea of the best ones.

Leave a Reply