HTML Day: How to Join the Annual HTML Energy Event

What This Is About

Hand write, raw Hypertext Markup Language (HTML) and make a webpage during the worldwide event, held in early August each year. Read HTML Energy’s Goals page to learn more.

How to Participate

Visit HTML Energy and go to the Events page to see if your area is hosting an event (it’s free). Bring a device, write some code, meet some cool people, and build something on the web! What will you build?

But I Don’t Have a Website Yet

If you don’t have a site yet, you can still participate!

You can write HTML in a plain text editor, but it is nice to have some syntax highlighting (colour coding of the different parts of code). If you don’t want to download any software, you can use the in-browser editor provided by HTML Energy that shows a live preview of what you’re doing.

Quick Start Guide

If you are okay with downloading a code editor / integrated development environment (IDE), I recommend VSCodium. You can work on the code locally on your computer, have all the modern conveniences of code completion and syntax highlighting, and use an extension such as Live Server by Ritwick Dey.

1. Open VSCodium, and create a new folder on your computer, e.g.:

   ~/Documents/html-day-2026

2. Make a new blank HTML file with File > New File (or right click in the Explorer panel):

   ~/Documents/html-day-2026/index.html

3. Create a CSS file for custom styles if you want:

   ~/Documents/html-day-2026/styles.css

4. If your page will contain images, create a folder for it:

   ~/Documents/html-day-2026/images/logo.jpg

5. Go to View > Extensions. Search for Live Server by ritwickdeyand install it

   

6. Next, go to View > Explorer and locate the index.html created in step 2. Right-click on the HTML file and select “Open with Live Server”, it will render your HTML webpage and display it in your web browser!

7. Once you’re done with the Live Server, you can stop the server by View > Command Palette > Stop Live Server

8. To use a CSS stylesheet in your HTML page, add the following:

   <link rel="stylesheet" href="/custom.css">

9. To add assets like images, you can write:

   <img src="/logo.jpg" alt="Image of a green star.">

My Setup

I will be coding in my IDE of choice; VSCodium (an open source version of VS Code) and deploying the “special” page to my site here on BurgeonLab.

Hugo Specific Modifications

Because this site is built with Hugo, a static site generator, I had to make some changes to front matter and create a custom blank template to allow creation of plain HTML pages.

Read my guide on how to bypass Hugo’s template lookup order for making blank pages to learn more. (Guide will be published soon.)

Learning Resources

Here are some links I find useful:

• Semantic HTML | MDN
• Using semantic HTML elements to identify regions of a page | W3
• WCAG2.1 HTML Techniques | W3
• HTML Cheat Sheet | Geek For Geeks
• Getting started with HTML | W3
• HTML How To | MDN
• HTML References | MDN

Creations

HTML Day 2026

This is my first year participating in this event. See my RSVP for details and link to the virtual event. I created a page that showcases my early poetry: Two Poems From Yonder.

It was fun to use semantic HTML to display the poems as <blockquotes in <articles> and using <p> and <span> to control how the stanza and lines are displayed and spaced. To indent lines, I used   . CSS is used to add responsiveness, colours, typography, and styling. Typeface is Georgia (serif system font stack) and default sans-serif system font elsewhere.