Markdown
Using Markdown to format content on GOV.UK.
When you edit a document in Whitehall publisher you’ll also see a quick guide to Markdown under ‘Formatting’ on the right of the screen.
You can convert text from digital documents into basic Govspeak Markdown (which is used on GOV.UK) in Whitehall publisher or use the Govspeak converter.
Adding acronym Markdown to a document means that when a user hovers over the acronym they see the full name as ‘alt text’.
You should:
- add the acronym Markdown at the end of the body copy, leaving one empty line space above it
- type an asterisk, square brackets around the acronym and a colon, then the full name, for example *[DWP]: Department for Work and Pensions
- make sure there is no space between the asterisk and the square bracket
When you have more than one acronym, list:
- each one on a new line
- both plurals and singulars, but not possessives, for example DFT’s
- plurals ahead of singulars, for example HGVs before HGV
See the style guide for how to use acronyms.
For addresses use the Markdown $A above and below the address text.
Addresses look like this.
Example:
$A
Put the
address in
here
$A
Do not use bold for the address title. This is not accessible because it looks like a heading and can be confusing for users of assistive technology.
There are 2 ways of using Markdown to add attachments to content You can add them as an inline link or embed the attachment (a ‘publication box’).
First you need to upload your attachments. This will automatically generate the Markdown for your attachment.
Link to an inline attachment
This will add the attachment title to a sentence or bullet point as a link to download the attachment. The file type and size is shown in brackets after the title.
See an example of a link to an attachment (in the ‘Services we provide in Jerusalem’ section).
Under the attachments tab, select the ‘Copy Markdown’ button under ‘Link to this attachment’.
Select the document tab and paste the Markdown code into the text when you are ready to add your inline attachment link. This will generate the link text. Select the ‘Preview’ button to check if your inline attachment link is showing correctly.
If you add an inline attachment to a ‘publication’ format, it will also show the attachment under a ‘documents’ heading above the body text.
Embed an attachment (a publication box)
This is a more prominent link than a link to an inline attachment. It shows the cover of the attached document, and adds the file type and size under the title.
See an example of an embedded attachment (in the ‘Information notes’ section).
Under the attachments tab, select the ‘Copy Markdown’ button under ‘Embed this attachment’.
Select the document tab and in the text, paste the Markdown in the position you want the attachment. As this shows the cover of the document, it is best to add it to a new line or under a header rather than the middle of a sentence.
For more information about attachments see the creating and editing content section.
Blockquote Markdown should only be used in news stories and case studies, for quotes longer than a few sentences. Do not use blockquotes in speeches.
In news and case studies:
- introduce the blockquote with a colon
- leave one empty line space above and below your blockquote
- add ‘>’ in any line spaces in the quote - if you leave it out you’ll get separate quotes on separate lines, not one running quote
To create a bulleted list:
- use asterisks (*) to make bullets (hyphens also work)
- make sure there is one space after the asterisk
- leave 1 empty line space before the bullets start, and one after
See the style guide to check how to punctuate bullets.
Call to action Markdown should be used for short links to actions, like applying for a licence. It creates a tinted box which highlights the task.
To create the call to action box use the Markdown $CTA above and below the link.
$CTA
It looks like this.
$CTA
It looks like this.
Charts Markdown allows you to create ‘simple’, ‘stacked’ and ‘compact’ bar charts that can also display negative values. You can combine these different types of chart within one chart.
Markdown lets the user switch between a bar chart and a table view on the webpage.
To create a chart, use the same Markdown as for a table, with an additional piece of charts Markdown on a line below the table.
See the section on Tables in this chapter for how to make tables in Markdown.
Simple bar chart
Add {barchart} at the end of a numeric table to display a simple bar chart. Multiple columns will display as grouped bars.
Stacked bar chart
Use {barchart stacked} for stacked bars.
The first column must include the name of each category. The final column must include the total.
Compact bar chart
Use {barchart compact} to save space by shrinking the chart.
Negative bar chart
If you have negative data values you must use {barchart negative}
Combining different bar chart styles
Combine the different styles of bar chart by using more than one tag on separate lines. For example, to create a compact negative chart add:
{barchart negative}{barchart compact}
Chart examples
See examples of different bar charts on GOV.UK
Colours in charts
You can use up to 6 colours to represent different categories when you create a bar chart on GOV.UK. The colours and the order they appear cannot be changed.
This is so they’re accessible for users who are colour blind or have low vision.
Find out about using colours for data visualisation on the Government Analysis Function website.
Read colour contrast requirements under the WCAG2.1 guidelines.
In the document body, use 2 hashtags (##) for a section heading and 3 or 4 hashtags for sub-headings. These are called H2s, H3s and H4s.
Make sure you use heading level Markdown (the hashtags) rather than bold text - assistive technology lets users navigate to heading levels.
Use the headings in sequence. An H3 needs to be preceded by an H2 and an H4 needs an H3.
Do not use one hashtag, or you will get a title heading in the middle of your document.
There’s no need to use Markdown in the title and summary boxes. They are styled automatically.
There’s more guidance on headings in the content design manual.
To add images to a page using Markdown:
-
first upload your image
-
copy the Markdown code shown next to the image including the square brackets
-
paste the text at the point where you want the image to show in the body copy of your document
-
leave an empty line space above and below the Markdown
Read more about how to use images accessibly.
To add internal links to GOV.UK pages, use square brackets [] around the link text and round brackets () around the link URL. Make sure there are no spaces between the brackets or the link will not work.
When linking to any Whitehall content, use the Whitehall publisher link and not the website URL.
You should delete the first part of the URL (https://whitehall-admin.publishing.service.gov.uk/) and use the relative path, for example: /government/admin/publications/123456.
Email links
Use ‘less than’ (<) and ‘greater than’ (>) arrows around email addresses to make them a link.
<example@example.com>
Linking to sections on a page
You can use Markdown to link to particular section headings on a page - also known as an ‘anchor’ link - but it creates accessibility issues so you should avoid it if possible.
Read the guidance on using links in content before you use an anchor link.
If you cannot avoid using an anchor link, format the link by adding # and the heading name, with all words separated by hyphens, to the page url. For example, to link to the section ‘Capacity management’, use https://www.gov.uk/government/publications/public-services-network-psn-service-management-good-practice/service-management-good-practice#capacity-management.
-
Use numbers followed by a full stop, for example ‘1.’.
-
Make sure there is one space after the full stop.
-
You need 1 empty line space before the numbers start, and 1 at the end.
-
Sub-items need an indent of 2 spaces.
See the style guide to check how to punctuate numbered lists.
For subscript, put <sub> before the word you want to appear in subscript, and </sub> afterwards.
This is an example of what subscript looks like.
For superscript, put <sup> before the word you want to appear in superscript (without a space), and </sup> afterwards (also without a space).
This is an example of what superscript looks like.
You should use subscript and superscript for scientific notation and measurements, for example chemical names, metres squared.
To make a table you need to:
- leave one empty line space before the table starts and one at the end
- use the Markdown for ‘dividers’ (sometimes called ‘pipes’) to split the content into cells, for example:
item 1 | item 2 | item 3 - make sure every row has the same number of dividers
- make a bold header row by using hyphens between the dividers in the second row, for example:
----|----|---- - add a hash (‘#’) character after the pipe if the cell is the title of a row, for example
|# Row 1 | item 1 | item 2 | item 3
You can also use a table generator to convert an Excel document, Google sheet or web-page table to Markdown. If the first column cells contain headings, add the hash (‘#’) character to make sure the table is accessible.
You can use Markdown to add links in a table cell, for example: |[This is a link in a cell](https://www.example.com)|.
Find out more information about when to use tables and how to make them accessible.
You can either:
- embed a video, if it’s hosted on YouTube – users will only see the embed if they’ve accepted the ‘communications and marketing’ GOV.UK cookie
- add a link to a video
Embed a YouTube video
Replace the text in the brackets in this template:
[Title of video](URL of video - not the embed code or the ‘Share this video’ URL)
Leave a line space above and below this Markdown. If you do not leave line spaces, the content either side of the Markdown will be hidden behind the embedded video.
Do not put the Markdown in a bullet point.
If a user has not accepted the ‘communications and marketing’ cookie, they will only see a link to the video with the ‘title of video’ as the link text.
Add a link to a video
If it’s a YouTube video, use the following template and only replace the text in the square and round brackets:
[Link text](URL of video){:data-youtube-player="off"}
If it’s not a YouTube video, replace the text in this template instead:
[Link text](URL of video)
There is some Markdown which is only to be used for the manual format.
Legislative list
This Markdown is for lists where you want to specify the numbering and have multiple indent levels:
- 1. Item 1
- 2. Item 2
- a) Item 2a
- b) Item 2b
- i. Item 2 b i
- ii. Item 2 b ii
- 3. Item 3
(to indent, add 2 spaces)
Footnotes
To add a footnote, put [^n] into the sentence where you want to create the footnote, where ‘n’ is the number for the footnote.
On a new line break, or at the bottom of the page, put [^n]: followed by the content for your footnote.
If your footnote text needs to be more than 1 paragraph long, indent the footnote content by 4 spaces.