What is Markup Language?

Name: Embryo
Address: 2nd Floor, 127 Portland Street, Manchester, M1 4PZ, United Kingdom
Telephone: 0161 327 2635

Discover the answer to the question 'What is markup language?'

Author:

Paulina Wisniewska

SEO Executive

Categorised In:

Web Development

Share:

If you’ve ever accidentally found yourself on the source code of a webpage, made your own Tumblr blog, or decided you would learn to code at 3 a.m. after watching Mr Robot, you probably have at least a little experience with markup language.

It’s the code that hides behind all your beautiful web pages, orchestrating how data should be structured, stored, and transferred between browsers. Think of it like the Oscar Diggs behind the Wizard of Oz.

In this guide, we’ll go through what markup language is, the different types of markup schemes, and how you can use these systems to improve your SEO and give your audience a better user experience.

Getting a good grasp of markup language can play a huge role in elevating your digital marketing, and at Embryo we have a skilled and enthusiastic team that can guide you through the process. If you would like to maximise the impact of markup language on your site, feel free to reach out to one of our experts! You can contact us by email at [email protected], or by telephone at 0161 327 2635.

So, What is Markup Language?

Enough of the sweet talk; let’s get right into it.

Markup is a computer language made up of tags, which determine how a document should be structured, stored, and interpreted.

Just how ‘I’ comes before ‘E’ except after ‘C’, markup has its own set of rules that dictate where tags are supposed to go and how they should be used. The first ever widely-used markup scheme, SGML, is sort of like the mother of all markup languages – it’s an internationally recognised system that determines how all markup languages should be written. However, although every markup scheme shares some fundamental rules, each one has its own functions and properties. Let’s have a look at a few key markup languages and how they work.

HTML

It’s 1993, and the world of web development is about to change forever. Tim Berners-Lee has just written the first-ever version of HTML – the most popular markup scheme in the world today. HTML, which stands for HyperText Markup Language, is responsible for structuring and defining content on a webpage.

It is made up of a wide variety of ‘elements’, which become ‘tags’ when they are surrounded by ‘<’ and ‘>’ symbols. These tags dictate the meaning and hierarchy of the text between them. Here are some examples:

<header> … </header>: Defines the content inside the tag as being part of the introductory section of the page.
<title> My Blog </title>: Informs the title of a page. This is displayed in a page’s tab on a web browser and in the page’s results on a search engine.
<h1> Welcome to my blog </h1>: Defines the main heading of the page.
<p> … </p>: Defines a paragraph.
<ul> …. </ul>: Represents a list.
<li> … </li>: Represents an item in a list.
<footer> … </footer>: Defines the content inside the tag as being part of the footer (bottom) of the page.

HTML is very popular because it is easy to learn, with tons of resources available to teach yourself to write the language. It is also supported by all browsers and can be used together with styling sheets (like CSS) and scripting languages (like JavaScript) to create pages that look and work great.

XML

Although HTML is an incredible markup language with tons of possibilities, it falls short in some aspects, and this is where XML comes in to save the day.

HTML’s main downfall is that it can only create static webpages, as it is unable to transfer data. XML was created as a way to store and carry this data.

Like all markup languages, XML is made up of elements and tags that give meaning to the content between them. The main difference between this markup and HTML is that HTML displays content, while XML is only used as a vehicle for data. XML also allows you to define your own elements, while HTML has a standard set of tags you can use.

The possibilities with this are endless, but here are a few ways that XML can be used:

To create a sitemap
To create a catalogue of books
To create a restaurant menu
To send emails

XML is also used to create the layout of every Android mobile application, and many popular file formats are made using this language, such as PowerPoint and Excel spreadsheets.

One downside of XML files is that they can be quite long and wordy, which produces very large file sizes. So if you are using XML files on your website, make sure that the rest of your site is well-optimised to keep it running fast.

SGML

As I mentioned in the introduction, SGML is an internationally recognised system that dictates how other markup schemes should be written. Like XML, it allows you to define your own elements and is also capable of storing and transferring data. However, SGML has a lot of strict rules and can be difficult to write, so these days developers overwhelmingly use XML instead. It is still sometimes used in industries like aerospace and engineering.

XHTML

XHTML stands for Extensible HyperText Markup Language. As its name implies, it is an adaptation of HTML that can work with XML data. It has the website-building capabilities of HTML and is capable of supporting CSS and Javascript, but it combines this with the strict syntax rules of XML and the ability to define your own elements. As a result, it’s a very adaptable language – you can convert it to many other file formats and integrate it with both XML and HTML programs.

As with every markup scheme, however, XHTML has its downsides. The main issue with this language is that it has a lot of strict rules, which can be intimidating for new developers, and can even feel restrictive for those who are more experienced. This brings us to the final markup language on our list.

HTML5

HTML5 was released in 2008, intended to build and improve upon the older versions of HTML. A bit like a chilled-out, younger cousin of XHTML, it can do everything that the elder markup can do, but it has more relaxed rules. For instance, in XHTML, you have to make sure to close every tag and type only in lowercase. If you forget to close a tag or type in caps when writing in HTML5, it’s all good man, it’ll still understand what you want it to do. HTML5 is also backwards-compatible with versions of HTML that came before it, while XHTML is not. Another major benefit of HTML5 is that it supports video and audio, as well as vector graphics, so you can use it to create multimedia content.

Others

Outside of these main markup languages, there are tons of other, more specific markup schemes. A few examples include:

MathML: A mathematical markup language based on XML, used to describe mathematical notation
Scalable Vector Graphics (SVG): A markup language used to describe 2D-based vector graphics.
Keyhole Markup Language (KML): An XML-based language that is used to describe geographic notation through maps and 3D Earth browsers.

How You Can Use Markup Language to Improve Your SEO

Now that you have a good idea of the different types of markup languages and how they work, let’s discuss a couple of ways you can implement them into your SEO strategy. A lot of technical SEO revolves around making the most out of markup, so it is a great thing to implement.

Control how your page displays in SERPs

Use title and meta-description tags to dictate the title and description that show up when users see your page in search engine results pages. This is a crucial practice for improving your organic clickthrough rate (CTR).

Example:

Structure your pages

Use tags like <header> <title> <body> <h1> <h2> <p> <footer> to define the hierarchy of your content. This will allow search engine bots to understand how your pages are organised, and enable them to serve your content to the right users.

Define images

To make sure that search engine crawlers understand as much about your page as possible, add descriptive alt attributes to your images.

Example:

This is also a great way to make your website more accessible, as it will allow blind users who use screen readers to understand the images on your site.

Control how your pages are crawled & indexed

If there are pages on your site that you would like to be crawled or indexed differently to the rest of your site, you can use robot meta tags in the <head> section of your HTML markup to specify how you want bots to interact with these pages. Here are some examples of robot meta tags you can utilise:

noindex: page won’t be indexed
nofollow: no link equity will be passed onto external links
nosnippet: prevents the page from showing up in SERP snippets
notranslate: search results won’t offer translations for the page

You can even establish different rules for specific bots, here’s an example:

This would only prevent the page from being indexed in Google’s news results.

To find out more about how you can use robot meta tags, Google has an excellent, concise guide: developers.google.com.

Handle duplicate pages

If you have two URLs on your site that are extremely similar, or even identical, you need to specify to Google which one should be returned in search results. One way of doing this is to add a canonical tag into the <head> section of your HTML code. This is what it will look like:

Differentiate pages on a multilingual site

You can also use markup to optimise your website for international SEO. Let’s say your website has three versions of your homepage: one in English, another in French, and another in Arabic. You can use hreflang tags to tell Google which version of a website should be returned in each country.

Here is what this would look like:

This is great for user experience and again, helps search engine bots to fully understand your website and return the correct pages to users in search results.

Improve site speed

Although a lot goes into creating a fast website, and you should take into account many factors such as image sizes, CSS files, and JavaScript code, don’t forget to check your HTML. Unnecessary elements and spaces, as well as badly formatted tags, can really slow down your site, so make sure that your markup is as minified and functional as possible.

How Do You Learn?

There are so many resources available online to help you learn about and practice writing markup languages. Try out searching for reputable online courses, YouTube videos, blogs, and community forums to get your information. Here is a short list to help you get started:

Markup Language Is the Foundation of Web Development

Markup languages are fundamental in the world of web development. They allow us to structure and describe digital content in a way that can be understood by both humans and machines and have transformed the way that we exchange data online. If you’re looking to optimise your website for SEO, making the most out of markup is a great way to propel your website to the top of the SERPs.

Markup languages are always evolving, and our team at Embryo are experts at keeping on top of the latest developments. If you would like to get advice or support on anything we’ve discussed in this blog, don’t hesitate to get in touch by email at [email protected], or telephone us at 0161 327 2635.