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 `

` and closing tag `

`, for example

`

`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.`

`

* For headers, you use the tags `

`, `

`, `

`..etc and end the heading text with respective closing tags `

`,`

`,`

`…etc.

`

`Third episode of new season’s Mad Men leaks out`

`
`

`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.`

`


* To format an ordered list in HTML, you use the `

    ` tag:

    `

      `
      `

    1. `London`
    2. `
      `

    3. `New York`
    4. `
      `

    5. `Tokyo`
    6. `
      `

    `

    * To format an unordered list in HTML, you use the `

      ` tag:

      `

        `
        `

      • `Fish`
      • `
        `

      • `Chicken`
      • `
        `

      • `Meat`
      • `
        `

      `

      * To format a URL link:

      ``Please visit my YouTube video.``

      * Use the `img` tag to embed an image:

      `My Image`

      ### Alternative Markup Languages

      Instead of using HTML, [Markdown](http://daringfireball.net/projects/markdown/) and [Textile](http://textism.com/tools/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](http://daringfireball.net/projects/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](http://daringfireball.net/) 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

      `

      `This is header h1`

      `

      This is header h2
      `——————`

      will convert to

      `

      `This is header 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:

      `

        `
        `

      1. `London`
      2. `
        `

      3. `New York`
      4. `
        `

      5. `Tokyo`
      6. `
        `

      `

      * 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:

      `

        `
        `

      • `Fish`
      • `
        `

      • `Chicken`
      • `
        `

      • `Meat`
      • `
        `

      `

      * URL link

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

      The above will produce:

      ``Please visit my YouTube video.``

      * Image

      `![My Image](image01.jpg)`

      The above will produce:

      `My Image`

      Visit [Markdown website](http://daringfireball.net/projects/markdown/syntax) 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:

      `

        `
        `

      1. `London`
      2. `
        `

      3. `New York`
      4. `
        `

      5. `Tokyo`
      6. `
        `

      `

      * Unordered list

      Use the “*” character for unordered list:

      `*` Fish
      `*` Chicken
      `*` Meat

      The above will all produce this:

      `

        `
        `

      • `Fish`
      • `
        `

      • `Chicken`
      • `
        `

      • `Meat`
      • `
        `

      `

      * URL link

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

      The above will produce:

      ``Please visit my YouTube video.``

      * Images

      !image01.jpg(My Image)!

      The above will produce:

      `My Image`

      Visit [Textile website](http://textism.com/tools/textile/) for syntax reference.