on the net

Document Sample
on the net Powered By Docstoc
					      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
In these Web 2.0      complex and use far more sophisticated JavaScript, Cascading Style Sheets (CSS),
                      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
                                         BOLD                                                   ITALIC
       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]

44     www.onlinemag.net
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
                                                                            UBB Codes
   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,
                                                                              Stanford University,
•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 [greg@notess.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 marydee@xmission.com.

                                                                                                           NOV I DEC 2006     (DNUN£   45

Shared By: