on the net by Greg R. Notess
Montana State University
Diverging Web Markup Choices
" o) ack in the early days of the Web, the amazing thing about HTML was the ease
JD) with which it could be understood. Many nonprogrammers felt comfortable
enough with it that they created Web pages and started populating the Web with
information content. The basics of HTML (using a beginning and end tag, link
tags, and image tags) gave a fair amount of creative license to early Web creators.
Now, with a decade of Web development behind us. Web sites are much more
database-driven content, and many other advanced techniques.
days of interactive At the same time, in these Web 2.0 days of interactive sites with comments and
other user-edited input, there is a fascinating divergence of markup styles that go
sites with beyond HTML. While the what-you-see-is-what-you-get (WYSIWYG) editors are
the default for many Internet applications, we now have wikis, blogs, and Web 2.0
applications that use other approaches—such as Markdown, Textile, and Wikitext.
comments and Each one of these approaches attempts to make formatting easy by using a
simplified markup language. While some applications use toolbars for basic style
other user-edited formatting, others don't, or the toolbar may not include the formatting command
you wish to use.
input, there is a For anyone who wants to write using anything more than plain text, whether to
create a list, use a header, or just bold or italicize certain words, the techniques now
fascinating used to achieve that look vary more widely and may be quite different from other
styles. Want to add some information to Wikipedia, comment on a blog post, write
a review for Amazon, and then contribute to an online forum? Adding markup style
divergence of to each of these may involve using different commands at each service.
markup styles that A STUDY IN BOLD
Consider the simple act of adding bold or italics to your text. In the early
go beyond HTML. incarnations of HTML and accepted Web styling, marking a word in bold or italics
was as simple as using the one-letter tags of <b> or <i> and putting the appropri-
ate closing tag at the end: </b> or </i>. It was fairly simple for most people to
create a sentence using bold and italics, such as in the following example:
Try <i>italics</i> or <b>bold</b> in your markup.
Yet early on. Web designers advocated separating semantic markup from visual
markup. This movement created the concept of putting the semantic markup in
HTML for a Web page and putting the visual or display markup in a style sheet
using CSS. Since the <i> and <b> tags designate visual markup, the initial step was
the recommendation to use the emphasis tag <em> or the strong emphasis tag
<strong>. While all major browsers display these tags as italics and bold respec-
tively, they are considered better markup since they are structural rather than visual
tags. Some argue that a screen reader will give more vocal emphasis when the <em>
and <strong> tags are used, although just like visual Web browsers, some screen
NOV I DEC 2006 (DNUNS 43
These types of approaches are often called lightweight
1 Your name
markup languages. Beyond just bold and italics, these lan-
j Your email
\ So otti&r peofTfe know who edited this page. guages can provide formatting options for creating lists, de-
lineating sections of a document, defining headings, adding
links, inserting images, creating tables, and adding in specicd
Nhen typing text in this window, clicking characters. Since they are lightweight, none provide all the
•n the **bold button** place3 the Harkdown
3yntax double asterisk around the marked options that can be found in HTML and CSS. Instead, they
text, a list becomes try to provide the most popular choices.
* first Various wikis, content management systems, and blogs
* second use different markup languages. For example, infogami uses
the Markdown language. With Markdown, you surround
PBwiki text formatting tooibar witii WikiStyie markup code
words to be italicized with either one asterisk or one under-
score at each end. Bold text gets either two asterisks or two
readers can and do treat <b> the same as <strong>. For the underscores at each end. A similar, competing markup lan-
casual markup user, remembering to use <em> for italics and guage. Textile, uses one asterisk for bold and one underscore
<strong> for bold instead of the more mnemonically simple for italics. Over at Wikipedia, the Wikimedia Wikitext style
<i> and <b> can be a difficult task. uses triple apostrophes for bold and double apostrophes for
Yet <em> and <strong> are still not using CSS. Another way italics. (Be careful not to use a quotation mark instead of the
to get an italics or bold result is to use CSS within a span ele- double apostrophe!) UBB forum software has yet another ap-
ment as in <span style="font-weight: bold;"> or <span proach with a [b] opener and [/b] closing tag for bold and [i]
style="font-style: italic;"> and then close with a </span> end and [li] for italics.
tag. The irony of this approach—considered by some to be How many options are there for simply marking bold and
more stylistically correct—is that the coding for bold has moved italics? The accompanying table shows the variety discussed
from a two-character beginning and end tab with <b> to 12 here. Not that this listing is comprehensive—there are many
characters for <strong> to 35 for the <span> option with styling. more ways to get the same visual effect in HTML and in many
These are not the only ways to get bold or italics text using other lightweight markup languages.
HTML and CSS. Rather than Ust all of the many possibilities, just
one more italics example may be of special interest to librarians. EASE OF THE TOOLBAR
Since italics has traditionally been used for titles of published How about just using the approach familiar to most of us
books, the <cite> tag can also be used for italics (which is the from word processing—the toolbar buttons? For anyone more
typical way browsers interpret use of the <cite> tag). interested in writing text rather than memorizing multiple
markup codes, editors with toolbar buttons similar to those
LIGHTWEIGHT MARKUP LANGUAGES seen in word processing programs are certainly the easiest
HTML and CSS offer numerous possibilities for text for- way to format text. PBwiki, for example, has a basic toolbar
matting, but some programs and interactive sites use other for editing. While the nine buttons offer many popular choices,
markup syntax. The easiest to use have toolbar buttons to the visible text in the windows does not change in a WYSIWYG
click for basic formatting, but others have nothing, only ac- way. Instead, the toolbar just adds PBwiki's WikiStyie coding
cept HTML coding, or use ASCII punctuation symbols such to the text. In addition, other options available but not in-
as Markdown, Textile, or Wikitext approach to refiect for- cluded in the toolbar must be learned from the WikiStyie doc-
matting. The latter three symbols remind me of the early days umentation [http: / /yummy.pbwiki.com/WikiStyie]. Another
when I was writing this column and sending the text in ASCII. toolbar approach can be seen at Yahoo! Groups, which has a
I would use my own codes, such as a single asterisk to desig- rich text editor for its messages. Unlike PBwiki, using the for-
nate italic (*italic*), two for bold (**bold**), and an under- matting toolbar vdll change the appearance of the text in the
score (_) for underlining (_underlining_). window below. It is a WYSIWYG editor. In this case. Yahoo!
Various Markup Options for Boid and Italics
HTML visual <b>words</b> <i>words</i>
HTML structural <strong>words</strong> <emphasis>words</emphasis>
CSS <span styie="font-weight: bold;">words</span> <span style="font-style: italic;">words</span>
Markdown '*words** OR words *words* OR _words_
Textile *words* _words_
Wikipedia/media '"words'" (tripie apostrophes not quotes) "words" (double apostrophes not double quotes)
UBB Forums [b]wordsf/b] [i]words[/i]
records the markup in HTML, The HTML-literate user can
toggle back and forth from HTML to the WYSIWYG view by Lightweight Markup Language Documentation
clicking a check box.
A graphic toolbar certainly helps users start typing and PBwiki's WikiStyle
formatting right away. Many contributors prefer the easy for- http://yummy.pbwiki.com/WikiStyle
matting with toolbars over learning even the lightweight for-
matting codes. Yet advanced writers who want additional for-
matting options will do well to learn some lightweight
markup options, and certain sites do not accept HTML or Textile
offer a toolbar. Formatting text on these sites requires using http://textism.com/tools/textile/
the formatting language they accept, Wikipedia's Wikitext
Many programs from word processors to blogs automat-
ically convert a URL to an active Unk without requiring any
extra markup from the user. Unfortunately, some long URLs
with question marks or other punctuation along with URLs
that might use an "https://" prefix often will not automati-
cally be turned into a link. Plus, you may want certain anchor Welcome to the [Startup School]
words to be linked to the URL rather than just the URL itself (http://startupschool.org) Wiki!
Looking at some ofthe various markup choices mentioned ## Getting there
above, the following list of techniques could be used to make * What: 2006 Startup School
the text of "Link Text" link to the http://example.edu/ URL: * Where: Kresge Auditorium,
•WikiStyle [http://example,edu/|LinkText] * When: 29 April 2006, 9:00 am.
• Markdown [Linktext](http://example.edu)
• Textile "LinkText":http://example.edu WHITHER MARKUP?
•Wikipedia/media [http://example.edu/ Link Text] The user involvement so common among blogs, wikis,
• UBB Forums ]url=http://example.edu/]LinkText[/url] forums. Web 2.0 products, and even old sites like Amazon's
product reviews are designed to make it easy for anyone to
Wikis, in particular, also use special syntax to link to other publish, comment, and share reactions online. Toolbars and
pages within the same wiki. When editing Wikipedia (and templates at free Web page hosting sites from Protopage to
other Wikimedia wikis), just place two square brackets Google Page Greator to GeoGities make it easy to create a
around a word to create an automatic link to the page with page or a whole site with no knowledge of HTML. Meanwhile,
that title. In other words, link to the page or article entitled creating Web documents in structural HTML, using GSS for
"Library" using the markup [[Library]]. layout, troubleshooting cross-browser compliancy, adding
PBwiki uses another styling approach called the Funny- in lavaScript, and/or pulling content from a database re-
Word: "If you use two capital letters in a word with lowercase quires a much higher level of training and skills. It seems as
letters in between, PBwiki will automatically recognize the if the basic Web page creation with HTML is getting more
word as a link to a page." If the page does not exist, PBwiki complex and has too steep of a learning curve for the major-
will put a link in with a dashed underline, which means an- ity of users. People who created their own Web sites in the
other user can click on it and create a page with that title. 1990s now hire Web designers for a site redesign.
So blogs, forums, social-networking sites, wikis, and oth-
DOING YOUR OWN MARKUPS ers are providing new tools to ease the creation process. For-
If you wish to edit the Wikipedia entry for MARC, you end matting toolbars, HTML input, and lightweight markup lan-
up with a first line that may look like the following due to a guages aim to make it easier to add formatting, yet the syn-
combination of bolded letters, internal links, and link titles: tax varies widely. At least they are usually well-documented.
'"MARC" is an acronym for [[machine readable| Look for the formatting or code help links. Browse some of
"']VIA"'chine- "'R"'eadable] ] [ [catalogingi '"C'ataloging] ]. the documentation online. But above all, don't let a few
With this complex formatting, even using the toolbar will strange formatting codes keep you from sharing your
not make it easy to change the entry without some under- thoughts and contributions online!
standing of Wikitext formatting.
Take a look at another example from the Startup School Greg R. Notess [email@example.com; www.notess.com] is a reference
site at infogami [http:startupschool.infogami,com]. With its librarian at Montana State University and founder of SearchEngine
use of Markdown and no toolbar, the following extract from Showdown.com.
the editing window has links, a header, and a list: Comments? E-maii letters to the editor to firstname.lastname@example.org.
NOV I DEC 2006 (DNUN£ 45