What is a markup language?

What is a markup language?

As we have mentioned several times now, here at Develocraft, Jamstack is kind of our thing.

Jamstack is becoming a modern way of building websites and apps. Its position and general awareness about the Jamstack architecture are becoming more and more prominent among developers. Basically, Jamstack is for everyone, who wants to build a product faster, make it secure and SEO-friendly from the very start, and be able to scale it with ease later on.

However, there is no Jamstack without its three key “JAM” parts - J for Javascript, A for an API, and M for Markup. One architecture to rule them all - the “Lord of the Rings” reference is not out of place here. Each movie from that trilogy is fantastic in its own way, but only when they are together, combined, and binge-watched (director’s cut versions, obviously), they make up a complete, incredible story. It's a bit the same with Jamstack. Also, like in Peter Jackson’s trilogy, it’s all about the third part* of the whole - the “M”, the markup language.

*the finale of “The Return of the King”, with “my friends, you bow to no one”? Tears, every single time.


    The “M” in Jamstack

    You see, you can build most of the sites with API, Javascript, and markup language. This does not mean, though, that the given product is created using the Jamstack architecture approach. In fact, it is possible to develop a Jamstack product without API or Javascript… But not without markup. Why is that, you may ask?

    We’ve talked about two-thirds of Jamstack’s fundamentals already. We’ve covered JavaScript and how it differs from Java as well as why you need API integrations, what is an API key and how API call works.

    The question left is what does Markup mean in the Jamstack context? Why using markup language matter in this approach? To answer this question, we have to get the basics first.

    What is a markup language?

    By definition, markup language is a system based on elements such as keywords, names, and tags to format the overall view of a given page and all the data it contains. Simply speaking, its main job is to make everything readable for a human. Despite the fact that markup language is invisible to the user on the actual web page, it is always there, working behind the scenes.

    A great example of one of the markup languages in action is actually this paragraph. This sentence even. Or this one. The markup language you are seeing right now, formatting these very letters is HTML (HyperText Markup Language). All of the characters in this article are wrapped in specific, yet invisible, tags to make them appear a certain way. HTML is the standard markup language of the world wide web, used to tell browsers how to display words and images on a web page.

    To put it short and sweet - something written in markup language consists of two main things: text to be displayed and language on how to display it.

    Graphic showing the idea of using a markup language

    Difference between markup language and programming language

    ..and why we need both.

    Markup languages and programming languages (such as JavaScript, C++, Visual Basic, Java, etc.) are very different from each other. The only common thing between them is that they all represent data somehow.

    The thing that makes markup languages different from programming languages is how data is represented. A markup language is static and not using algorithms. There is no database in use - in practice, this means that the only way to edit site content requires editing HTML tags.

    In the case of markup language, the data is represented in a specific format so that the software in question knows what to do with it. A browser, for example, knows how to read data coded in HTML and how it should be displayed to the user.

    Programming languages, on the other hand, are dynamic and have to be combined and interpreted. They do not only represent data but foremost manipulate it in a certain way and produce even more useful data. Thanks to programming languages it is possible to manipulate data and use it for something else.

    This is why we need both markup languages and programming languages - thanks to the latter, the data coded in a markup language like HTML (which in this case is in plain text format) can be converted into visual representations for the user and displayed in the browser window.

    Bonus question: is Python a markup language? Python supports a variety of modules to work with various forms of structured data markup. This includes modules to work with the Standard Generalized Markup Language (SGML) and the Hypertext Markup Language (HTML), and several interfaces for working with the Extensible Markup Language (XML).

    Graphics showing the need to use markup languages and programming languages simultaneously

    What are the features of markup languages?

    While thinking, “what is a markup language,” we can easily see what they all have in common. A given language is a markup language if it has the following characteristics:

    • A markup language uses some sort of tags to annotate texts. Tags are special characters or words that determine when to apply formatting.
    • Tags have to have an opening tag and a closing tag. In the case of HTML, the underline element is written as and .
    • The text between the opening and closing tags is affected by the specific formatting. In the case of the underline tag, the document would show the underlined text.
    • Markup languages are quite accessible. Pretty much anyone should be able to read and understand a markup language, even if they are unfamiliar with it.
    • Each Markup language has a set of rules, that define how to use the tags. Thanks to this, the documents created are consistent and properly structured.

    Keep in mind though, that markup languages can vary greatly depending on what their developers designed them for.

    Other markup languages

    The most common use of markup languages is to create formatted documents and web pages, but there is more:

    • XML (Extensible Markup Language), is a markup language intended for data storage and transportation. If you want to create a database or exchange data between different systems, there is a good chance that XML will be somehow involved. Also, it is used to create sitemaps - a file containing a list of the most important pages of the website, meant for Google crawlers to scan the entire content of the website.

    • SGML (Standard Generalized Markup Language) had been the basis of XML and HTML. Industries such as aerospace and engineering continue to use it to some extent.

    • TeX is basically the grandad of markup languages. It is a typesetting language, used mainly for preparing documents like PhDs, articles submitted for publication, or books. TeX was originally intended for documents printed on paper, but now is also commonly used to produce PDF files. Popular among mathematicians and anyone who will find a use for e.g. precise spacing and unusual fonts in their work.

    Jamstack - the confusion between Markup and Markdown

    Going back to the Markup in Jamstack, we have to address the elephant in the room first - the M in Jamstack is actually for markup, not markdown. The term “Markdown” is much narrower than “Markup” - a markdown is a lightweight form of markup.

    From a Jamstack point of view, Markup is so much more than just HTML or Markdown. Combining markup languages with templating is the crucial part here. Thanks to such a solution, normally static files gain so much more potential - they are now capable of generating an entire site filled with content, which can be deployed as HTML, CSS, and JavaScript.

    The role of Markup in Jamstack architecture

    This is the exact reason why the M in Jamstack means far more than just the Markdown or HTML. You can develop any site with JavaScript, APIs, and Markup, but not all of them are built in line with the Jamstack architecture. The M in Jamstack stands for the way of putting all these elements together - meaning the M includes not just Markup, but your static site generator as well.

    It is all about the content itself - how it's delivered, not the format it was in before rendering. While building a site in Jamstack way, the content can come from anywhere - as long as it’s pre-rendered it still counts as “M”.

    Jamstack - all about that content

    As mentioned above, nowadays, the letter “M” in Jamstack should rather be replaced with “C” - for “content”. Why is that, exactly?

    Jamstack is based on previously prepared files that were opened once when the page was launched. The content is not delivered in a dynamic way by a web server responsible for building a page at runtime but rather generated from ready-made and static HTML files. This makes the work much easier.

    The letter M is responsible for the content provided by the CMS - what we want to present on the website. It can "live" in different places:

    • In the GIT repository (a good example is Netlify CMS - content lives in the repository).
    • In database and available via API.
    • As a JSON file without any styles.
    • As a file on the server.

    It is possible that while working in the spirit of Jamstack we will not need an API, since our content may be elsewhere. The very essence of Jamstack is the pre-generation of static HTML files. That's it.

    HTML files can be generated with Next, Gatsby, or Nuxt, as well as written in React or Vue. It's still Jamstack - it's all about content.

    Markup language - the foundation

    A markup language is pretty much the foundation for any website and a truly essential part of Jamstack - a dynamic, modern approach to web development that’s growing in popularity.

    Reach us at Develocraft, and build your product the better way - from online shops, through SaaS websites to big online platforms, thanks to Jamstack, the final site will be fast, efficient, secure, and SEO-friendly from the get-go. Technical knowledge, skills, and experience - we’ve got it all!

    2022-29-0913 mins

    Rafał Kruczek

    Hi there, dear reader! I'm the content guy at Develocraft. Here to be nerdy, talk about tech challenges for any business of any size, and share the knowledge. If you want to do something together, exchange stories or tell me the most inappropriate joke you can think of - feel free to hit me up on LinkedIn.

    Share article