Simple HTML

How to do it

In simple HTML, markup tells you what something is, not how to display it. Here's an example of some simple HTML from the previous page:

 Now stop before you bolt out the door. I'm talking simple HTML. Basic stuff. All I'm going to ask you to do is keep an eye on your HTML, look at it every now and then, and make sure it stays simple. 

That was it. We've got two kinds of elements in there: we've got a paragraph and we've got a couple of words that we want to emphasize.  stands for "paragraph" and  stands for "emphasis", as you probably guessed already.

How do we display paragraphs? How much space goes above them and below them and on either side? How much space goes between the lines inside the paragraph? We don't say. How do we display emphasized text? With italics? Colors? Blinking? We don't say.

Does that mean we'll leave it up to the browser to decide for us? Not on your life. This is our web page, and we get to say. Oh, we could be lazy and just take the default, but that's no fun.
In simple HTML, everything that controls how the page looks goes into style sheets. "Oh joy," I hear you say, "besides learning HTML, now we've got to learn CSS (Cascading Style Sheets)." Negatory, good buddy. Here's why this is going to be much easier than you think:
1. First off, you don't have to learn HTML at all. You'll learn about a dozen tags (header, paragraph, division, emphasis, lists) and a handful of attributes, not hundreds of tags and attributes like in the HTML spec, so simple HTML is hardly making you learn HTML at all.
2. There are some WYSIWYG editors that do just fine on style sheets, so you don't have to dirty your hands with the details of the code. Other stylesheet editors make you type in everything, but they'll stop you if you try to type in a bad CSS attribute or value.
3. There are places on the Web where you can swipe just about any kind of style sheet you want, from the very basic to the exotic. That's how most people first learned HTML, and it's how they're learning CSS.
4. And finally, even if you've got a huge website, you'll probably build only a small handful of CSSs and reuse them like crazy. When every CSS you play with can affect a dozen or more web pages, it becomes kinda worthwhile to spend the time to learn CSS and play with them a little.
You may wonder whether anybody's really doing this. Everybody's doing it.
Simple HTML has a couple of grammatical rules. But they're easy.
1. Every opener (e.g., ) has got to have a closer (e.g., ). Take a look at our example, and you'll see we did that.
2. A few tags don't have natural closers (e.g.,   for "break"). You write them like this:  . That extra space before the slash at the end is kinda important. Some older browsers will faint dead away if they don't see it.
3. Every tag has got to be in lower case (e.g., , not ).
4. In regular HTML, attributes were supposed to be in quotes (e.g., <img height="32" ...) but browsers didn't complain if they weren't. In simple HTML they have to be.
5. No naked attributes. In regular HTML there's a mix of name-value attributes (<img height="32"...) and "naked" attributes (<input type="radio" checked...). In simple HTML, you have to put clothes on all your attributes (<input type="radio" checked="checked"...).
6. Finally, there's a little bit of gobbledegook you've got to put in the top of your file, that your web page editor will probably generate for you automatically. In case it doesn't, here it is:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 That's it.
 
 Oh. One more thing. What I've been calling "simple HTML" is really XHTML. It's been a web standard since 1999. You've just learned everything you need to know about XHTML. If you look at the spec, you'll see you've learned nearly everything there is to know about XHTML. We need to add one more thing:
7. You have to nest elements the right way. You probably already know that this is bad HTML:
 SPLAT!
 
 Just in case you're a normal person and that wasn't immediately obvious, let's show it on multiple lines to make it clearer:
```

 
 SPLAT!
 ???
 ???
```
 That makes no sense at all. You need to close "container tags" from the inside out, like this:
```

 
 SPLAT!
 

```
 That's all this rule is saying: you shouldn't write HTML that doesn't make sense.
In HTML, you're supposed to do that and all the other things, but if you don't, web browsers are just supposed to shut up and do the best they can to display this bad HTML. In XHTML you have to do all those things, and if you don't an XHTML web browser is allowed to pop up an error message, and it may even refuse to display the bad code.

WYSIWYG web page editors that support XHTML will usually keep you out of trouble on all these rules, but if you insist on playing with your code by hand and the web browser or editor complains about the results, it's complaining about one of the things I listed.

Let's go fill up our toolbox and actually do some Simple HTML.

> Web Builders' Toolkit