What is Markup?

Speaking about markup, it goes way back to the history of document formatting. Document markup is the process of adding codes to a document to form the structure of a document or the format in which it is to appear. The internet which has a network of webpages acts as a communication platform. These webpages need a common document format in which users navigate the web. One common document is the Hypertext mark-up language (HTML).

HTML uses different tags such as <body>, <div>, and <p> to layout the webpage and other tags such as <em> and <span> to give structure to the page. The latest HTML version is HTML5. Below is a basic HTML5 layout.

html layout

The most interesting new elements are new semantic elements like <header>, <footer>, <article> and <section>. New form control attributes like number, date, time, calendar and range. New gaphic elements: <svg> and <canvas>. New multimedia elements: <audio> and <video>.

Many applications are now rely more on HTML5 as it has more to offer. Many applications that were built for other platforms are being rewritten to support HTML5 applications. These are some of the examples of apps that uses HTML5.

HTML5 app No. 1: HTML5 slide apps

slide app1slideapp2

There are more than half a dozen HTML5 libraries for building slide decks in HTML instead of the well-known PowerPoint and two examples are fathom.js and reveal.js. These slide apps are able to change viewpoint by panning, twisting, turning or even rotating in 3D making them attractive, impressive and eye catching compared to the traditional PowerPoint. The core of the program uses basic HTML to lay out slides in DIVs given absolute coordinates. While designing slides, new HTML5 additions to CSS layout engine and canvas object are available for use.  Partnering with JavaScript, graphics can be drawn.

HTML5 app No. 2: Aviary

aviary2

Aviary is an impressive Photo Editor using JavaScript and HTML. Many important tools are available as buttons for any application that runs in your browser. This is a free application that provides more than what an average person require in a photo editor. Aviary uses HTML5’s Canvas object and it offers basic ways of drawing text and lines and a number of web apps even use these features to draw graphs.

HTML5 app No. 3: Scribd

Scribd

Scribd started out as a detailed Flash application for displaying documents. Its goal was to become the leading repository for documents on the Web, and only Flash has the font support and precise placement required to render accurately the wide range of documents of the world.

Today, with the two major features of HTML5: Web fonts and canvas, Scribd can function just like Flash. Web font enhancements have made it possible for Scribd to better capture fonts used in documents.

The improved HTML5 canvas enables Scribd to draw these letters and other bitmaps at arbitrary positions on the screen. Scribd’s HTML5 version is now simpler because there is no longer issues with the incompatibilities caused by using the Flash plug-in. The other features of the browser also work with the documents – unlike using the Flash plug-in. Users can select sentences or words directly with mouse clicks. Voilà. Complex documents are now treated just like regular websites.

References:
Peter Wayner(2012) 7 apps making the most of HTML5 from

http://www.infoworld.com/article/2615639/html5/7-apps-making-the-most-of-html5.html

Dennis G. Watson(2005) Brief History of Document Markup from https://chnm.gmu.edu/digitalhistory/links/pdf/chapter3/3.19a.pdf

W3schools.com (2014) What is New in HTML5? from http://www.w3schools.com/html/html5_intro.asp

Jennifer Marsman (2011) HTML5 Part 1: Semantic Markup and Page Layout from http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx

Advertisements

One thought on “What is Markup?

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s