Basics: a deeper dive into markup languages

EBS Integrator
Oct 29, 2019,

markup languages Before unveiling popular frontend scripting frameworks, or put them on an ultimate Mortal Kombat ring, I believe we should take a deeper dive into what markup languages are and which ones power user interfaces nowadays. Now, without expanding too much into eventualities, let’s reel this markup language story.

Markup Languages and their basic definitions

In one of our previous posts, we spoke about one of the most notorious markup languages: the HyperText Markup Language. At the time, defining the Markup Language term would have been a bit confusing, thus it fell off the scope. Now, however, we need to properly define the term “markup language” to add-up to the story.

According to Wikipedia […] any system used for annotating a document in a way that is syntactically distinguishable from the text, making use of human-recognizable tags […] is, in fact, a markup language. The term “mark-up” came directly from the practice of manual paper manuscripts annotation. I.e., the revision instructions by editors, which is traditionally written with a red or blue pencil on authors’ initial copy.

markup languages

Before being ported to the internet, there were over a dozen markup languages to use. And these have diversified and expanded over the last decades. Following-up on that definition, you should know that HTML is not the only markup language used by apps. As mentioned before, this one grew out of SGML (a standard used to annotate documents at CERN) and there are a couple that, in their turn, evolved from HTML itself. If you really want to know about every markup language there is, a good start would be to consult this list on Wikipedia (a site which, by the way, uses its own light-weight method called “Wiki markup”).

WYSIWYG – a short note about it in WEB2.0

Speaking of Wiki Markup: compared to a full-fledged markup language, this lightweight method holds an opposed nickname: “markdown”. Modern methods sprout-out HTML as soon as WEB 2.0 became a thing and forum boards required a much simpler language than HTML, that would appeal to their users. This is how the “What You See Is What You Get” or WYSIWYG principle was born. Think of it as an inside-out HTML where you write the text that compiles into code. As opposed to code that translates into text. The same principle powered initial word processors such as WordPerfect, Electric Pencil, or WordStar.

markup languages

If you’re a blogger that uses WordPress, you might be familiar with the Guttenberg Editor. As in the case of any other markdown scope, you do not have to know any HTML. Instead, you’re using an interface that is similar to a word processor than a compiler. Then again, if you really want to make your life difficult […] you can always hit “Edit as HTML” and use tags as you please.

Internet-Enabled Markup Languages

Since there are hundreds of Markup Languages […] today we’ll only focus on the main 3 used by the internet: HTML, XML and XHTML.

The Hypertext Markup Language

As the primary language of the internet, HTML stands above all. As a matter of fact, most of those secondary languages derived from, or subject to compiling back into HTML. Almost every page you can access today features HTML. This is how your browser defines how text, images either multimedia lay within a web view.

markup languages

As we mentioned before, HTML is based on an older Markup Language called SGML or Standard Generalized Markup Language, that makes use of tags to define how your text is structured. Despite its popularity, keep note: HTML  ain’t the only WWW language used today. Its evolution led into derivates and extensions that build the interactive internet we know and love. This has been courtesy of maintaining simplicity and elimination of complex tags from rudimentary use.

For instance, over its entire development process, HTML cluttered in embedded styles and functional procedures. These split apart the main source, giving birth to the Cascading Style Sheet extension. Various frontend scripting practices such as AJAX followed (Asynchronous JavaScript and XML). This way, HTML became less and less cluttered and remains a standard to date.

W3C – or how HTML stayed relevant as a markup language

Besides its utility, you should also know that HTML’s popularity isn’t a natural occurrence. Any web markup language needs to be consistent to stay relevant. HTML has been quite lucky in this matter, I guess. Right from the beginning, a notorious authority: the World Wide Web Consortium (or W3C) controlled and adjusted the WWW language, molding it for modern needs.

markup language

Founded and led by Tim Berners-Lee, W3C is powered by a variety of member organizations which maintain full-time staff working together to engage in outreach and education, develop software for the web and build a community of bright minds that enable discussions about the WEB. In fact, thanks to this authority we have frequent reviews of HTML . Descendent extensions, as well as various deployed web standards (additional markup languages and internet protocols) included. Thanks to W3C, HTML had 5 major releases, that lead to the HTML5/CSS3 tandem. This one powers the most recent web pages on the internet.

XML or the extensible Markup Language

Many markup/markdown languages are based on HTML. XML is no exception – in fact, the consensus acknowledges it as a mix between SGML and HTML. To put a pin on it, imagine SGML, XML and HTML as part of a stack. In this instance, the language’s complexity and the level of strict ruling decrease from top to bottom. Considering the analogy, XML holds the sweet-spot between complexity, strictness and functionality prerogatives of that stack.

Since it is provided with a bit more functionality than HTML, XML remains a very popular derivate. Usually for building  other web standards upon. Its rather node-like structure makes it a language designed to write markup languages. Hence it powers standards such as Scalable Vector Graphics (for direct drawing)… MathML (for defining math formulas/procedures)…  SMIL (to manage multimedia)…. VoiceXML (as a web voice exchange method) and last but not the least, xHTML. We’ll get to this one right away.

W3C maintains XML and its extensions as a web standard to date. With over 4 revisions, the end-result reached the release of XML 2.0. Despite the fact it is rarely used as a direct implementation (especially with the increased popularity of frontend scripts), XML is still at the core of various web-enabled standard implementations, powering over 100 markup languages and serves as at the base of any known WYSIWYG online word processors and office suites.

xHTML or the eXtended Hypertext Markup Language

As an internet markup language, xHTML  resembles an HTML 4 extension, a W3C redesign focused on meeting the XML standard. In fact, to date, various modern frontend scripting methods and HTML5 replaced  xHTML entirely.

markup languages

There’s not much else to say about it. That is, unless you’re looking to rebuild a web application delivered back in 2013. Most probably, you’ll never have to deal with it.

HTML5, CSS3 and JavaScript as current standards

Finding out there are other markup practices/languages than HTML, CSS and JavaScript might come to you as a surprise. Nevertheless, you must account for these especially when building complex web applications. I.E. word processing, human-computer voice exchange or other quirks you might think of when building an application’s scope.

While you’ll rarely use XML directly, chances are you’ll probably use a derivative standard or a replacement mechanism which is, in essence, an XML model, hence the required awareness. Of course, it is not entirely false that some of these protocols can be replaced by frontend scripting practices that make use of the Document Object Model interface, a concept that treats an HTML or XML document as a tree structure, rendering XML standards use cases to a minimum.

In fact, modern applications rely heavily on this, but since that story is at least as long as this one, I’ll make sure to cover it in our next week’s post. If you’re interested in finding out which are the most widely used frontend frameworks, as well as what lies behind their mechanics, make sure to keep up with our releases by following us on LinkedIn, Facebook and/or Twitter.