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.
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.
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.
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.
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 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.
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).
<meta name=”description” content=”This is the best blog in the world”/>
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.
To make sure that search engine crawlers understand as much about your page as possible, add descriptive alt attributes to your images.
<img src=”cool-sunglasses.jpg” alt=”Young man wearing sunglasses”>
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:
<meta name=”googlebot-news” content=”noindex”>
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:
<link rel=”canonical” href=”https://myblog.com”/>
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:
<link rel=”alternate” href=”http://myblog.com” hreflang=”en-gb” /><link rel=”alternate” href=”http://myblog.com/fr/” hreflang=”fr-fr” /><link rel=”alternate” href=”http://myblog.com/ar/” hreflang=”ar-afb” />
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
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:
- W3 Schools Tutorials
- CodeAcademy Learn HTML Course
- Google Developer Courses
- Udemy Beginner XML Course
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.