This writeup assumes that you are familiar with the most common html tags available on this here database. If not, read E2 html tags before continuing.
You know how spelling and grammar is really important here? Think about this. Why? First, it has to do with E2's credibility as a publisher. Second, it is a courtesy that you extend to your readers: it makes the writeup easier to read and understand. The same applies to html. Seriously. There are some things which are not important but others are just as important as using proper English.
I have noticed a bunch of common errors people make. These are not your only a pedantic idiot would care mistakes. These are the Real Thing. I can wax pedantic about markup at will, but on this occasion I will spare you all the things which don't matter. All the guidelines presented herein are really important. Please refer to this handy-dandy FAQ at all times. Read it thoroughly. Understand it. Live, breathe and eat it.
NB: If you don't believe in spelling and grammar, you won't find this important. Otherwise, read on.
It's a machine language that no-one will ever see! How on earth could this be important?
I consider that something only matters if there is a specific real-world example where doing it will make a difference. Plenty of people stick their head up their backside about stuff that doesn't matter. You probably don't care. So I'm only telling you about things you should care about.
Basically, html is made to markup text, to say: this is a list, this is a heading and this is a paragraph. Once we have done that, it is up to the reader to say how he wants to view your text. You must afford your readers this freedom. The reader must be able to say: I want my paragraphs to have this huge margin with the first line indented. If you don't want your reader to do this, I suggest you write a book or something. So, in order for this to happen, it is essential that paragraphs be marked up as paragraphs, headings as headings, lists as lists etc. Most of the guidelines here correct misapprehensions about the proper way of doing this.
The example I will focus on is margins. I read my E2 with a gutter around all paragraphs and lists. It makes it easier to read. There are, however, a number of things you can tinker with if and only if you have proper paragraphs: indentation and line-spacing are the most useful of these. Ok, not that many, but compare this to the diligence with which you fight typos: this is at least equally important.
Why are you telling me to put a <p> at the beginning of my writeup?
You probably format your writeups like this:
ανδρα μο&iota εννεπε, μουsα, πολυτροπον οs μαλλα πολλα πλαγχθη, επει τροιηs ιεπον πτολιεθρον επερsε,
πολλων δ' ανθρωπων ιδε αsτεα και νοον εγνω, πολλα δ' ο γ' εν ποντοι παθεν αlγεα ον κατα θυμον,
αρνυμενοs ην τε ψυχην και νοsτον εταιρων.
<p>
C'est l'homme aux mille tours, Muse, qu'il faut me dire, Celui qui tant erra quand, de Troade,
il eût pillé la ville sainte, Celui qui, sur les mers, passa par tant d'angoisses, en luttant
pour survivre et ramener ses gens.
Unfortunately, <p> applies to the block of text which follows it. So what you have is essentially a block of unmarked text, followed by a paragraph. Like this:
ανδρα μο&iota εννεπε, μουsα, πολυτροπον οs μαλλα πολλα πλαγχθη, επει τροιηs ιεπον πτολιεθρον επερsε, πολλων δ'
ανθρωπων ιδε αsτεα και νοον εγνω, πολλα δ' ο γ' εν ποντοι παθεν αlγεα ον κατα θυμον, αρνυμενοs ην τε ψυχην ← unmarked text
και νοsτον εταιρων.
C'est l'homme aux mille tours, Muse, qu'il faut me dire, Celui qui tant erra quand,
de Troade, il eût pillé la ville sainte, Celui qui, sur les mers, passa par tant ← paragraph
d'angoisses, en luttant pour survivre et ramener ses gens.
Of course, putting the <p> like this is much better than using <br><br>, because you are at least marking some of your paragraphs as such. You need to go that little bit further and put a <p> before the first paragraph as well. Unmarked text is bad because there is no way of giving rules to format it.
Do I really need to know the difference between a block tag and an inline tag?
I'm afraid so. A block tag is one whose default is to create new lines before and after it. On e2, these are the following:
- <p>
- <ol>, <ul> and <dl>
- <pre>
- <blockquote>
- <h1>, <h2>, <h3> etc.
The rule is this: you are not allowed to put a block tag inside a paragraph. This means that when your browser meets a block tag after an opening <p> tag, it will auto-magically insert a </p>1. This is why you are allowed to not close your paragraphs: the following <p> causes the end of the previous one. But this can also lead to useless <p> tags and unmarked paragraphs. Consider the following piece:
<p>
Paragraph introducing list:
<ul> ← block-level.
<li>Silly list with one element</li>
</ul>
Paragraph concluding the list
</p>
<p>
<blockquote> ← block-level.
Quoted stuff
</blockquote>
</p>
While this looks rather like two paragraphs, the first containing two bits of text and a list, the second containing a quote, the paragraphs are automatically ended before each block-level tag. So what we actually have is a paragraph, a list, a piece of unmarked text, an extra closing tag, an empty paragraph, a blockquote and another extra closing tag. Supposing blockquotes are only slightly indented we will have this:
Paragraph introducing list: ← paragraph
o Silly list with one element.
Paragraph concluding the list ← unmarked text
← empty paragraph
Quoted stuff
Knowledge of this will allow you to open one paragraph after list and another inside the blockquote, thus yielding the desired result:
Paragraph introducing list:
o Silly list with one element.
Paragraph concluding the list
Quoted stuff
Any other stuff I should know?
There are a few mistakes I see from time to time. One of these is that you may not put a <li> outside of <ol> and <ul>. This is because those higher-level elements are used to put a margin around the whole list and also to identify what marker should be used on the list.
Another thing which should be noted is that the <hN> series is nice for headings. They automatically provide a new line and can be used to structure a document nicely. This is very much superior to using a <b> followed by a <br>.
Lastly, I notice that many noders like to create their own gutter by adding just enough <blockquote>s and <ol>s for their writeups to look just wonderful in their own browsers. Unfortunately, other people have other needs. Some use a larger font, I have my blockquotes specially set to indent very strongly, so that quoted material stands out more. In both cases, the result can be a very long writeup with very short lines. And in the worst of cases, a completely fucked up window which is too wide - and has an adverse affect on the beauty of everyone else's writeup in the same node.
What's with this xhtml stuff? I hate closing those paragraphs!
Remember my promise? "Only stuff that matters". Closing your <p>'s is nice but not important. The only good reason to close them is to ease the readability of your source code2. The same applies to such stuff as using <br /> instead of <br>. Not important. There is not a single case where doing so on E2 could serve any purpose.
The reason for this is simple. E2 is, for better or for worse, pretty much stuck with html 4.0. There is no way that E2 could migrate to xhtml without a seriously huge amount of work. Given that there are a thousand more useful things which could be done to e2 and the fact that html 4.0 is a perfectly respectable standard which will probably be around for a long time, this just ain't gonna happen baby.
This doesn't mean that you shouldn't write in xhtml. But if you don't care about such things, your conscience need not dwell on it.
What about changing all my <i> to <em>?
In a word, Codswallop! Here on e2, there is little difference and may never be any. In fact, <em> is a more powerful tag and should only be used by those who know what they are doing. In short, <i> is for formatting while <em> is for emphasising. Doing emphasis through formatting is tolerable. But doing formatting through emphasis is treble +5 rod of no-goodness: oral browsers pronounce these words with emphasis (no really!). Imagine the poor blind guy having to listen to the quote by Plato with each single word emphasised because you wanted your text to appear in italics!
This is a pet peeve of mine. The case where it matters is probably quite rare (I don't know any blind noders), so you can probably ignore this. But my advice would be use <i> for all your italic needs. If, however, you are interested in the whys and wherefores of all this, by all means, do go and read up on semantic markup.
In short, the general case is that <i> should no longer be used and replaced by css or other tags. Here on e2, we can't do css, and other tags are often too powerful. Using <i> is an acceptable compromise.
What about the rest of the web?
Quite frankly, I don't care what you do on your piece of the interweb. There are two differences with respect to E2. The first is that I'm probably not reading you and even if I am, it's your problem if you haven't coded cleanly: you're the one who will have maintenance problems. The second is that here on E2 we are limited in our html, so different rules apply.
So in conclusion, the rest of the web provides more tags and more possibilities of producing bad code. You have ample space at your disposal to make your point about the harmlessness of sloppy html. Here on E2, just as you provide interesting writeups and try to eliminate all factual errors and typos, so I would encourage you to mark them up in quality html.
- Except in xhtml-strict. xhtml-strict does not allow you to have unclosed paragraphs and will complain about a missing </p>.
- Any browser which doesn't auto-close <p> tags and induces nesting is broken and should be ignored.
Sources:
Homer, Odyssey, (Translation by Victor Bérard), Coll. Folio, Gallimard, Paris, 1999