Markdown Reference
Content is written in Markdown, a lightweight format that's easy to read and write. Astro extends standard Markdown with additional features. This page covers what's supported and when to use HTML instead.
For information about the fonts, type scale, and layout principles used on this site, see the Typography guide.
Standard markdown
These are the core Markdown features supported everywhere.
Text formatting
| Syntax | Result |
|---|---|
**bold** | bold |
*italic* | italic |
***bold and italic*** | bold and italic |
~~strikethrough~~ | |
`inline code` | inline code |
About backticks: The backtick character ` is not an apostrophe '. On US keyboards, it's the key to the left of 1, usually shared with the tilde ~. Backticks wrap inline code and create code blocks—they're essential for technical writing.
Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
In content files, start with ## Heading 2 since the page title from frontmatter becomes
the <h1>.
Links
<!-- External link -->
[ARRL Website](https://www.arrl.org/)
<!-- Internal link (relative) -->
[Events page](/events/)
<!-- Link with title (shows on hover) -->
[FCC](https://www.fcc.gov/ "Federal Communications Commission")Images
<!-- Basic image -->
<!-- Image with title -->
Place images in the same folder as your content file (e.g., src/content/articles/my-article/image.jpg) and reference them with ./ relative paths.
Lists
<!-- Unordered list -->
- First item
- Second item
- Nested item
- Another nested item
- Third item
<!-- Ordered list -->
1. First step
2. Second step
3. Third step
<!-- Task list -->
- [x] Completed task
- [ ] Incomplete taskBlockquotes
> This is a blockquote.
>
> It can span multiple paragraphs.This is a blockquote.
It can span multiple paragraphs.
Code blocks
Use triple backticks with a language identifier for syntax highlighting.
```javascript
function greet(name) {
return `Hello, ${name}!`;
}
```
Supported languages include: javascript, typescript, python, bash, html, css, json, yaml,
and many more.
Horizontal rules
---Creates a horizontal divider. Use sparingly—headings usually provide better visual breaks.
Tables
Markdown tables work well for simple data:
| Band | Frequency | Mode |
|---------|-------------|------|
| 20m | 14.074 MHz | FT8 |
| 40m | 7.074 MHz | FT8 |
| 80m | 3.573 MHz | FT8 || Band | Frequency | Mode |
|---|---|---|
| 20m | 14.074 MHz | FT8 |
| 40m | 7.074 MHz | FT8 |
| 80m | 3.573 MHz | FT8 |
Column alignment
| Left | Center | Right |
|:-----|:------:|------:|
| L | C | R |When to use HTML tables
Use HTML tables when you need:
- Cells that span rows or columns (
colspan,rowspan) - Complex formatting within cells
- Table captions
- Custom styling
<table>
<caption>Band Plan Summary</caption>
<thead>
<tr>
<th>Band</th>
<th colspan="2">Frequencies</th>
</tr>
</thead>
<tbody>
<tr>
<td>20m</td>
<td>14.000</td>
<td>14.350</td>
</tr>
</tbody>
</table>Internal links
Link between content on this site using relative URLs starting with /. This ensures
links work in development and production.
Link patterns by content type
| Content Type | URL Pattern | Example |
|---|---|---|
| Article | /articles/{slug} | /articles/digital-modes-guide |
| Event | /events/{folder-name} | /events/2026-01-january-meeting |
| Documentation | /docs/{slug} | /docs/antenna-theory-basics |
| Tag | /tags/{tag-name} | /tags/digital-modes |
| Page | /{page-name} | /about |
Examples
From an event to an article
For background on this topic, see our
[guide to digital modes](/articles/digital-modes-guide).
From an article to documentation
Before building your antenna, review the
[antenna theory basics](/docs/antenna-theory-basics) documentation.
From documentation to an event
We covered this at our
[January 2026 meeting](/events/2026-01-january-meeting).
Linking to a tag
Browse all content about [digital modes](/tags/digital-modes)
or explore [field day](/tags/field-day) resources.
Finding the correct slug
The slug is determined by the folder or file name in src/content/:
File Location URL src/content/articles/digital-modes-guide.md/articles/digital-modes-guide src/content/events/2026-01-january-meeting/index.md/events/2026-01-january-meeting src/content/docs/antenna-theory-basics/index.md/docs/antenna-theory-basics
Tip: Use the tables on the contributing pages (articles,
events,
docs) to find the correct URLs for
existing content.
URL encoding for tags
Tags with spaces or special characters need URL encoding:
Tag URL digital-modes/tags/digital-modes rare DXCC/tags/rare%20DXCC
To avoid encoding issues, prefer lowercase tags with hyphens: rare-dxcc instead of rare DXCC.
Astro extensions
Astro adds features beyond standard Markdown.
Frontmatter
Every content file starts with YAML frontmatter between --- delimiters:
---
title: "My Article Title"
description: "A brief description for SEO and previews"
pubDate: 2025-01-15
tags: ["ft8", "digital-modes"]
---
Your content starts here...
See the Schema Reference for all available fields.
GitHub-Flavored Markdown
Astro supports GFM extensions including:
- Autolinked URLs:
https://example.com becomes a link - Strikethrough:
~~deleted~~ - Task lists:
- [x] Done - Tables (covered above)
- Footnotes (see below)
Footnotes
Here's a statement that needs a citation.[^1]
[^1]: This is the footnote content.
Footnotes are collected and rendered at the bottom of the page.
Using HTML in markdown
You can use HTML directly in Markdown files when you need more control.
When HTML is appropriate
Complex layouts
Multi-column layouts, grids, or custom spacing that Markdown can't express.
Custom attributes
Adding IDs, classes, or ARIA attributes for accessibility.
Semantic elements
Using <details>, <summary>, <abbr>,
or other semantic tags.
Embedded content
YouTube videos, iframes, or other embeds that need specific markup.
Common HTML patterns
Details/summary (collapsible sections)
<details>
<summary>Click to expand</summary>
Hidden content goes here. You can use **Markdown** inside!
</details>
Click to expand
Hidden content goes here. You can use Markdown inside!
Abbreviations
The <abbr title="Automatic Packet Reporting System">APRS</abbr> network...
The APRS network...
Figures with captions
<figure>
<img src="./antenna.jpg" alt="Dipole antenna installation">
<figcaption>A horizontal dipole mounted between two trees.</figcaption>
</figure>
Definition lists
<dl>
<dt>QSO</dt>
<dd>A contact or conversation between amateur radio stations.</dd>
<dt>QTH</dt>
<dd>Location or "where are you located?"</dd>
</dl>
Important: blank lines
When mixing HTML and Markdown, add blank lines around HTML blocks:
Some markdown text.
<div class="custom">
**Markdown works here** because of the blank lines.
</div>
More markdown text.
Without blank lines, the Markdown processor may not parse content inside HTML tags.
Emojis
Emojis are supported in Markdown and render correctly on the site. See the Editorial Guidelines for when to use them and when to avoid them.
Syntax
Type emojis directly (copy/paste) or use shortcodes if your editor supports them:
<!-- Direct emoji -->
Join us for Field Day! 📻
<!-- Note: GitHub-style shortcodes like :radio: don't work in Astro -->
Recommendation: Copy emojis from Emojipedia
or use your operating system's emoji picker (macOS: Control+Command+Space, Windows: Win+.).
Best practices
Prefer Markdown when possible
Markdown is easier to read, write, and maintain. Only use HTML when Markdown can't achieve what
you need.
One sentence per line
While optional, putting each sentence on its own line makes diffs cleaner and editing easier:
This is the first sentence.
This is the second sentence.
They render as one paragraph.
Consistent heading hierarchy
Don't skip heading levels. After ## Heading 2, use ### Heading 3, not #### Heading 4.
Meaningful link text
Link text should describe the destination, not the action. Screen readers often navigate by
links alone, so "click here" provides no context.
<!-- Good -->
See the [antenna building guide](/docs/antenna-theory-basics/).
<!-- Bad -->
For antenna building, [click here](/docs/antenna-theory-basics/).
Alt text for images
Every image needs alt text that describes what the image shows, not just what it is. Think about
what information the image conveys.
<!-- Good: describes the content -->
<!-- Bad: describes the file -->
For decorative images that don't add information, use an empty alt attribute: alt="".