Write your content
You can write your content in Markdown or HTML when using the Tech Doc Template.
Insert a table
You can insert a table using either Markdown or HTML.
Use Markdown when there are no specific formatting requirements.
Use HTML when there are specific formatting requirements, for example to ensure that text in cells does not wrap.
Create table using Markdown
Use Markdown when there are no specific formatting requirements.
This example is a left-aligned table.
| Column header | Column header |
|---------------|---------------|
| content | content |
| content | content |
Add more columns and rows as needed.
You can change the alignment of the text in each column:
- Centre:
|:---:| - Right:
|---:|
If a table has 3 or more columns, you might need to set row headers as well as column headers to improve accessibility. Using row headers reduces the amount of information screen reader users need to remember whilst using the table.
The following example has the first cell in each row marked up as the row header using the # character:
| City name | Population | Average age |
|-------------------|------------|-------------|
| # Some city | 38000 | 48 |
| # Some other city | 41000 | 37 |
See the Web Accessibility Initiative tutoral on table concepts for more information.
Create table using HTML
You should create tables using HTML when there are specific formatting requirements.
The following code is an example of a 2 column 2 row table with no text wrapping.
<div style = "overflow-x:auto;">
<table style="width:100%">
<tr>
<th nowrap>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td nowrap><code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et enim quis arcu pharetra aliquet. Maecenas posuere tellus arcu, a suscipit dui posuere eu. Nunc vestibulum ligula sit amet eros euismod accumsan. </code></td>
<td nowrap>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et enim quis arcu pharetra aliquet. Maecenas posuere tellus arcu, a suscipit dui posuere eu. Nunc vestibulum ligula sit amet eros euismod accumsan. </td>
</tr>
</table>
</div>
Create a link
You can create links using either Markdown or HTML.
To create a link in Markdown, use the following:
[link text](link address)
For example:
[The Google home page](http://www.google.co.uk)
To create a link in HTML, use the following:
<a href="link address">link text</a>
You can write the link in HTML with a target="blank" element to make the link open in a new internet browser tab by default:
<a href="link address" target="blank">link text</a>
Insert an image
To insert an image into your content, use the following:
<img src="../../images/imagefile" alt="image alt text" />
You must include alt text for an image if the image has not been explained in surrounding content, due to accessibility requirements.
Insert a warning
Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.
This warning text format is consistent with the GOV.UK Design System warning text.
To insert a warning, use the following:
<%= warning_text('insert warning text here') %>
Use the GOV.UK Design System
Use GOV.UK Design System elements in your documentation to ensure your content complies with accessibility regulations.