The internet is made up of languages, from the ones you use to communicate to the ones you use to build web pages and transfer data. Of these, you may have heard of programming languages like C, Java, and Python, but it’s also worth getting to know markup languages, the most well-known and widely used of which is HTML.
These helpful languages are quite different from programming languages, requiring little advanced knowledge to read and understand, and serving valuable functions to anyone building or maintaining a website. Among other things, markup languages tell computers how to read a web page, and when used well they can lead to a better user experience (UX) and better search engine optimization (SEO).
What are markup languages?
Markup languages are systems that use tags to format and annotate text or data, providing instructions on how it should be displayed or processed. They’re most often used in web development to define the structure and presentation of web pages.
For example, the HTML tag <b> signifies that the text after it should be displayed in bold font. All text following that tag will display as bold until the corresponding markup tag </b> tells the browser to stop displaying bold text.
Markup language can also tell the computer the structure of the content—for example, the phrase “What are markup languages?” at the top of this section is an H2, or Header 2. Markup language can delineate between sections like navigation bars, footers, titles, and body copy.
Markup languages vs. programming languages
Markup languages differ from programming languages like C or Java in many ways. Programming languages are logical, telling the computer how to display dynamic web applications. Markup languages simply modify the way browsers understand blocks of copy and data. Programming languages are dynamic, changing based on user input and running in real time on the computer, whereas markup languages are static, modifying pre-written copy.
Benefits of using markup language
Proper utilization of markup language can help your website in a few key ways:
Better SEO
Using markup language can make your content more readable to search engines, helping them better understand your content’s structure and meaning. Search engines prioritize websites that are readable and cleanly laid out—features enforced by proper markup.
Improved user experience
Markup language ensures that a website renders uniformly across different devices, browsers, and operating systems. For example, a markup language helps the browser reconfigure a webpage if you make the browser window very narrow or switch the orientation on your phone.
Consistent formatting
Markup language ensures similar sections render similarly on the same page. For example, the H2 above (“What are markup languages?”) renders similar to the H2 below (“Benefits of using markup language”). Consistent formatting makes pages easier to scan and understand for users.
Accessibility
Markup languagetags content to make it more useful for screen readers and other assistive technologies. For example, alt text on images makes them more accessible to users with visual impairments.
Ease of use
Unlike programming languages, which can be impenetrable to non-coders, markup language is typically decipherable by the layperson. Copywriters and non-designers can use markup language to communicate how a page should look online.
How markup language works
While there are a few different markup languages to get to know, they all function through some shared basic characteristics. The big rules about markup language to know are:
Start with content
Markup language modifies documents or data. Markup language needs something to mark up, either a document or a type of data, like images, links, or other media elements.
Use tags to modify content
Markup language uses tags. Generally enclosed in brackets like <this>, the tag signifies the beginning of the content that is being marked up. Think of it as the start of a highlighted section. Tags come in pairs, meaning there must be a closing tag that often looks like </this> and corresponds to when the highlighter lifts from the page.
Tags can signify elements, like paragraphs (written like this: <p>) or images (written like this: <img>). They can also signify attributes, such as hyperlinks (written like this: <a href>) or copy styling (as in the example of bold text, written like this: <b>).
Nest tags
Tags can be nested. An individual block of copy can be marked up as bold (<b>), but that may be held within a larger block of copy signified as a paragraph (<p>), which itself may be part of a section (<div>). As long as each tag is closed out with its corresponding pair (</b>, </p>, and </div>, respectively), everything will render correctly.
Browsers read markup language
Once all of the content is marked up by these tags, the content is parsed by a web browser or document viewer, which can interpret the tags and their meanings and display all of the content accordingly.
Types of markup languages
While one type of markup language is by far the most popular—HTML—it’s worth getting to know some of the alternatives out there, as it helps better explain the purpose of markup language more broadly. Each language has its own syntax, which is the set of rules governing how tags, elements, and attributes should be written. These differences in syntax explain, at least in part, the utility of each markup language.
HTML
HTML, or hypertext markup language, is a foundational language used for structuring and presenting content online. All of the examples in this article so far use HTML conventions because they’re so widely known.
First developed in the 1990s, HTML is still regularly updated, with its latest iteration, HTML5, released in 2014. HTML tags allow web developers to define the structure of web pages, incorporating text, images, links, forms, and multimedia elements, as well as semantic markup, which defines sections like headers, navigation bars, and paragraphs.
Although unmodified HTML renders in a browser as a fairly straightforward text document, it is often modified with CSS (cascading style sheets) and JavaScript to feature more elaborate stylings and interactive elements.
XML
XML, or extensible markup language, is the most popular markup language after HTML. It is used for structuring and storing data in a hierarchical format. Think of XML like a spreadsheet in text form.
For example, if you wanted to create a system to manage client information, you might use XML to create a structure (called a document type definition, or DTD) that defines first and last names as a subset of a category called “Client.” You could add additional fields for contact information, all of which would be written as tags.
You could add new client records to this database using XML as the storage format and share the XMLdata between different systems, displayed in HTML, integrated with other systems, and validated using the defined schema. In web development, XML documents are often used in configuration files and as a transporting data interchange between applications.
Markdown
Markdown is a lightweight markup language used to format text. It is designed to be used by nontechnical users, turning simple textual elements like underscores and asterisks into markup denotations for copy styling. You can easily convert markdown to HTML, PDFs, and other formats. Markdown is most often used to create documents, blog posts, README files, and other text documents.
LaTeX
LaTeX is one of the older markup languages, with development dating back to the 1980s. However, it remains used in contexts with complex formatting requirements.
LaTeX is particularly useful in academic works, where typography, complex mathematical notation, cross-referencing, and bibliographic management are paramount. While it lacks the user-friendliness of more modern markup languages, its strict rules and rich feature set make LaTeX a useful way to adapt these complex texts to the needs of modern displays.
Other markup languages
You may also come across SGML (standard generalized markup language) and XHTML (extensible hypertext markup language). Very briefly, SGML can be thought of as a precursor to HTML and XML—a language that attempted to do what both of those did, only requiring more manual configuration in the process. SGML has largely been abandoned in favor of its more modern successors.
XHTML was an attempt to combine HTML and XML that gained some popularity in the 2000s. However, its feature set was largely built into HTML5 upon its release, making XHTML less relevant.
Markup language FAQ
What is an example of markup language?
An example of a markup language is HTML (hypertext markup language), which is widely used for structuring and formatting content online.
What language is closest to HTML?
The language closest to HTML is XML (extensible markup language) in terms of structure, but they each serve different purposes. HTML is used for web content, while XML is used for data representation.
Is a markup language the same as a programming language?
No, a markup language is not the same as a programming language. Markup languages are used for structuring and formatting content, while programming languages are used for creating software and defining algorithms.
What tools do you need for writing markup language?
For writing markup language, you typically need a plain text editor like Notepad (for HTML and XML), or integrated development environments (IDEs) such as Visual Studio Code or Adobe Dreamweaver.
