HTML Tutorial
HTML Project: Event Invite
An invitation page with the event name, when, where, a short schedule, and RSVP details.
What you will build
An invitation to an autumn reading night. The page states the event title, the time, the address, an ordered schedule, a list of what to bring, and a short RSVP note. Guests should know the facts without a poster image.
Dates and times belong in time with a datetime value. The place belongs inaddress. A schedule that has a sequence belongs in ol. Items to pack belong in ul.
Open the invite in /html/try with Try it in HTML. Check that the date still makes sense if CSS is ignored.
Tags you will use
| Tag | Job on this page |
|---|---|
header | Event title and a one-line pitch |
time | Start (and optional end) with datetime |
address | Where to arrive |
ol | The evening schedule in order |
ul | What to bring |
Build in slices
Title, time, and address first. That is the invitation even if the rest is missing.
Example
<header>
<h1>Autumn reading night</h1>
<p>
<time datetime="2026-10-17T18:30">Saturday 17 October, 18:30</time>
</p>
<address>
West Stack Library, Quiet Floor<br>
Elm Street 9
</address>
</header>Then the schedule and the packing list. Order matters for the evening. Order does not matter for the bag.
Example
<h2>Schedule</h2>
<ol>
<li>Doors and tea at 18:30</li>
<li>Open readings at 19:00</li>
<li>Guest chapter at 19:40</li>
<li>Close at 21:00</li>
</ol>
<h2>What to bring</h2>
<ul>
<li>A book you can read from for three minutes</li>
<li>A mug if you want a second tea</li>
<li>A coat you can leave on a chair</li>
</ul>address is for contact for this event, not a generic footer of every page you ever wrote. Keep it local. Preview the block at /html/try.
Complete document
A complete invite with RSVP instructions. No host photos. A colored band at the top is enough atmosphere.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Autumn reading night</title>
<style>
body {
margin: 0;
background: #efe8dc;
color: #1c1917;
font-family: Georgia, serif;
}
.invite {
max-width: 32rem;
margin: 1.5rem auto 2rem;
background: #fffaf3;
border: 1px solid #c4b7a2;
}
.band {
height: 0.7rem;
background: #7c2d12;
}
header, section, footer { padding: 0 1.3rem; }
header { padding-top: 1.2rem; }
address { font-style: normal; margin: 0.4rem 0 1rem; }
ol, ul { line-height: 1.5; }
footer {
padding-bottom: 1.3rem;
color: #57534e;
font-size: 0.95rem;
}
</style>
</head>
<body>
<article class="invite">
<div class="band" aria-hidden="true"></div>
<header>
<h1>Autumn reading night</h1>
<p>
<time datetime="2026-10-17T18:30">Saturday 17 October, 18:30</time>
until
<time datetime="2026-10-17T21:00">21:00</time>
</p>
<address>
West Stack Library, Quiet Floor<br>
Elm Street 9
</address>
</header>
<section>
<h2>Schedule</h2>
<ol>
<li>Doors and tea at 18:30</li>
<li>Open readings at 19:00</li>
<li>Guest chapter at 19:40</li>
<li>Close at 21:00</li>
</ol>
</section>
<section>
<h2>What to bring</h2>
<ul>
<li>A book you can read from for three minutes</li>
<li>A mug if you want a second tea</li>
<li>A coat you can leave on a chair</li>
</ul>
</section>
<footer>
<h2>RSVP</h2>
<p>
Write to
<a href="mailto:readings@example.com">readings@example.com</a>
by 10 October. Twenty chairs. We will confirm your seat.
</p>
</footer>
</article>
</body>
</html>A second complete invite
Same facts in a different tone: a Saturday map-folding workshop. Time, address, schedule, packing list, RSVP.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Map folding morning</title>
<style>
body { margin: 0; background: #042f2e; color: #ecfdf5; font-family: "Segoe UI", sans-serif; }
article { max-width: 30rem; margin: 1.4rem auto; padding: 1.2rem; background: #134e4a; }
address { font-style: normal; }
a { color: #fde68a; }
</style>
</head>
<body>
<article>
<header>
<h1>Map folding morning</h1>
<p><time datetime="2026-11-07T10:00">Saturday 7 November, 10:00</time></p>
<address>Chart Room, Pier 2<br>Harbour Walk</address>
</header>
<section>
<h2>Schedule</h2>
<ol>
<li>Paper and bone folders at 10:00</li>
<li>Accordions and pockets at 10:20</li>
<li>Your own map at 11:00</li>
</ol>
</section>
<section>
<h2>What to bring</h2>
<ul>
<li>A map you do not mind creasing</li>
<li>Clean hands</li>
<li>A pencil</li>
</ul>
</section>
<footer>
<p>RSVP to <a href="mailto:charts@example.com">charts@example.com</a> by 1 November.</p>
</footer>
</article>
</body>
</html>Common mistakes
- A date only in a pretty heading, with no
datetime. Machines cannot parse “next Saturday”. - Using
addressfor the whole site footer. Here it is the venue. - A schedule as a paragraph of times. Guests scan a list.
- What to bring as a numbered list. Unless the bag has a required order, use bullets.
- RSVP as a button that posts nowhere and gives no address. Include an email or a clear instruction.
Practice tasks
- Change the event to one you would host. Update title,
datetime, and address together. - Add a fifth schedule item. Keep the list ordered.
- Add one more packing item and a closing time on a second
timeelement. Preview at /html/try.