Introduction to Markup Languages For The Web

When you are writing for the web, such as blog posts or comments on forum, it is a good idea to learn the basic of HTML. HTML is the markup language for web pages, it is the formatting language understood by web browsers. Writing using HTML is not as easy as using a word processor such as Pages or MS Word for text formatting but it is simple enough for most computer users. Nonetheless there are alternative markup languages other than HTML that aims to make writing for the web even easier.

HTML basics

• To denote a paragraph, you enclose the text with the open tag <p> and closing tag </p>, for example

  <p>The PlayStation 3 Slim gaming console from Sony Computer Entertainment is not only smaller and cheaper, but adds hardware enhancements that make it speedier, including a new Cell microprocessor.</p>

• For headers, you use the tags <h1>, <h2>, <h3>..etc and end the heading text with respective closing tags </h1>,</h2>,</h3>…etc.

  <h2>Third episode of new season’s Mad Men leaks out</h2> <p>The third episode of the Emmy-winning drama’s new season was briefly made available by mistake to holders of an iTunes Season Pass on Tuesday evening.</p>

* To format an ordered list in HTML, you use the <ol> tag:

<ol>
<li>London</li>
<li>New York</li>
<li>Tokyo</li>
</ol>

• To format an unordered list in HTML, you use the <ul> tag:

  <ul>
<li>Fish</li>
<li>Chicken</li>
<li>Meat</li>
</ul>
  

• To format a URL link:

  <a href="http://www.youtube.com/" title="My YouTube Video">Please visit my YouTube video.</a>

• Use the img tag to embed an image:

  <img src="image01.jpg" alt="My Image" >

Alternative Markup Languages

Instead of using HTML, Markdown and Textile are two popular alternative markup languages you might consider. The aim for these alternatives is to make it easier for you to compose HTML pages. Since Markdown/Textile is not native language of the web, you need a convertor or editor support in order to use them:

• In some forums, you might have a choice of using Markdown/Textile if the forum administrator add it into their forum.

• If you are using Tumblr, Markdown is the language you can use when composing your blog.

• If you are Wordpress administrator, you can add Markdown or Textile support into your blog using the respective plugins. This will allow you to compose Wordpress blog using Markdown or Textile, and users can comment using these languages as well.

• If you are composing Markdown/Textile pages in text files, you can use the respective software to convert the Markdown/Textile text files into HTML files.

Markdown

Markdown is by John Gruber. Mr Gruber incidentally is a well known blogger in Mac community, and his predictions for Apple products at his Daring Fireball website are well read.

• Headers using equal signs and dashes

  “Underline” the header text with equal signs for first-level header and dashes for second-level header. Any number of equal signs/dashes will work.

  This is header h1
  ===================

  will convert to

  <h1>This is header h1</h1>

  
  

  This is header h2
  ------------------

  will convert to

  <h2>This is header h2</h2>

• Headers using hash characters

  You can use 1 to 6 hash characters at start of line for corresponding header level:

  # This is an H1

  ## This is an H2

  #### This is an H4

  ###### This is an H6

• Ordered list

  Use a number follow by period for ordered list.

  1. London
  2. New York
  3. Tokyo
  

  The above will produce this:

  <ol>
<li>London</li>
<li>New York</li>
<li>Tokyo</li>
</ol>
  

• Unordered list

  You can use asterisks, pluses, or hyphens for unordered list:

  * Fish
  * Chicken
  * Meat
  

  + Fish
  + Chicken
  + Meat
  

  - Fish
  - Chicken
  - Meat
  

  The above will all produce this:

  <ul>
<li>Fish</li>
<li>Chicken</li>
<li>Meat</li>
</ul>
  

• URL link

  [Please visit my YouTube video.](http://www.youtube.com/ "My YouTube Video")

  The above will produce:

  <a href="http://www.youtube.com/" title="My YouTube Video">Please visit my YouTube video.</a>

• Image

  ![My Image](image01.jpg)

  The above will produce:

  <img src="image01.jpg" alt="My Image" >

Visit Markdown website for complete reference guide to Markdown syntax.

Textile

• Headers

  Use the character ‘h’ follow by header level and a period for headers:

  h1. This is header h1

  h2. This is header h2

  h4. This is header h4

  h6. This is header h6

• Ordered list

  Use the “#” character for ordered list:

  # London
# New York
# Tokyo
  

  The above will produce this:

  <ol>
<li>London</li>
<li>New York</li>
<li>Tokyo</li>
</ol>
  

• Unordered list

  Use the “*” character for unordered list:

  * Fish
  * Chicken
  * Meat
  

  The above will all produce this:

  <ul>
<li>Fish</li>
<li>Chicken</li>
<li>Meat</li>
</ul>
  

• URL link

  “Please visit my YouTube video.(My YouTube Video)”:http://www.youtube.com/

  The above will produce:

  <a href="http://www.youtube.com/" title="My YouTube Video">Please visit my YouTube video.</a>

• Images

  !image01.jpg(My Image)!

  The above will produce:

  <img src="image01.jpg" alt="My Image" >

Visit Textile website for syntax reference.