display | more...

Oftentimes, creative people want to be inventive and artistic with their text. Here are a few guidelines to keep in mind.

Bad markup can cause browser problems

Hypertext Markup Language (HTML) is not a pragmatic language like English. Although many browsers are very forgiving in their understanding of HTML (even when it is not well formed) they interpret incorrect markup in various ways. Keep your markup simple and stick to using tags for their intended purpose. While your tags might produce exactly the desired result on your computer, on another it might be completely broken. Consider the following example:

<i>Where Alf the sacred river ran
   <dd>Down to a sunless sea.</i>

The intent of this is to produce a quote in italics, with the second line indented. As it happens, the author of this particular piece of markup perverted the intended use of <dd> (a definition, associated with a term marked up with <dt>). In one browser, it showed up without problem. On another person's browser, however, the closing </i> was masked out by the <dd> and caused the rest of the write-up to be in italics. Not even an HTML pedant would have been able to predict the result on all web browsers and hardware. Sticking to sound markup —using <dd> only as intended, for a definition— would have prevented it.

If you don't know a lot about HTML, just stick to the basics: paragraphs, headings, lists and emphasis. The potential breakage is just not worth the slightly improved readability on your machine.

Not everyone reads Everything2 the way you do.

HTML should, ideally, be used to structure text, describing how each piece fits in. Much of the bad usage of HTML on Everything2 is to add extra whitespace. But again, each browser interprets this whitespace in a different way. On a portable device, for instance, the margins you introduced with

<blockquote>
           I'd like this node to have a margin to the     
           left, please.
<blockquote>

may hamper the very readability you were seeking to improve: on a narrow screen, 50% whitespace is something of a waste.

Yet others use <ul> for adding a margin, noting that the effect is similar to that of <blockquote> but uses fewer letters. Doing this detracts from the purpose of HTML. Screen readers, both for blind people and people in situations where using a screen is not practical very kindly announce

<ul>
   <li> spring </li>
   <li> summer </li>
   <li> autumn </li>
   <li> winter </li>
</ul>

as This is a list with four items: first item, spring; second item, summer; third item, autumn; fourth item, winter.

In the case where the author intended to help the reader by adding more whitespace, he ends up annoying other people:

<ul>
           This is another way which some people use to 
           provide a margin.
</ul>

will be read as This is a list with no items: This is another way which some people use to provide a margin.

Using bad HTML for layout is not effective

The ideal of the World Wide Web is that any author can provide a text with some information about its structure and any potential reader's (or listener's) computer will interpret this information and render it in a way it sees fit, whether it be a handheld device, wide-screen device, screen reader or text-only browser. If a reader wants to have whitespace, larger fonts, more space between lines or the first line of every paragraph indented, he can modify his browser so that it does this. It is actually very simple to do. In these circumstances, the most courteous thing an author can do is to provide his writing in a markup which is consistent with that of other writings. And how do we ensure that markup is consistent? By all conforming to certain standards: markup headings with heading tags, paragraphs with paragraph tags, lists with list tags, quotes with quote tags, emphasis with emphasis tags and acronyms with acronym tags.

If the reader wants to make his experience more enjoyable, he can modify his browser in a couple of minutes with the result that all the well marked-up writeups on Everything2 will look like he wants them to. Not only is your careful attention to detail then wasted on that reader, but it may even make your writeup look ugly or preposterous. Furthermore, you can only present your own writeups with more whitespace, not the entire website. If you let the reader modify his whitespace, he can do this for the whole of the site. This is clearly more desirable.

Conclusion

Strive for consistent markup from writeup to writeup, throughout the site. Please use consistent, well-formed markup for all our sakes.

Here is a quick reminder of the basics of consistent, reasonable markup which should be enough for most writeups:

  • Every piece of text should be between some opening tag and some closing tag.
  • Use <p>...</p> for paragraphs, <h2>...</h2> if your writeup has a title, <h3>...</h3> for headings within your writeup and <em>...</em> if you want to emphasise some words.
  • Each item of a list must be enclosed in <li>...</li> and the whole list must be enclosed in <ol>...</ol> or <ul>...</ul> depending on whether the list is to be preceded by numbers or bullets.
  • <blockquote>...</blockquote> is used for quoting a piece of text. You have no guarantees that this will add whitespace on all browsers.
  • Avoid using tags only for the sake of adding whitespace.

With this in mind, here is a template writeup which uses a number of these tags.

<h2>This is the title of the writeup</h2>

<p>Here is the <em>first</em> paragraph of the writeup. It serves to introduce the following ordered list:</p>

<ol>
 <li>Only</li>
 <li>Three</li>
 <li>Items.</li>
</ol>

<h3>Here is a subheading</h3>

<p>Another very short paragraph to introduce a quote</p>
 
<blockquote>
  Lorem ipsum dolor sit amet.
</blockquote>

<p><small>Sources:</small></p>
<ul>
 <li><small>
  <cite>First source</cite>
 </small></li>
 <li><small>
  <cite>'Nother source</cite>
 </small></li>
</ul>

This is the title of the writeup

Here is the first paragraph of the writeup. It serves to introduce the following ordered list:

  1. Only
  2. Three
  3. Items.

Here is a subheading

Another very short paragraph to introduce a quote

Lorem ipsum dolor sit amet.

Sources:

  • First source
  • 'Nother source

Author: themanwho. Editors: Lometa, haze. 3-28-2005