There are many people who want and need to learn HTML. A quick Google search will yield tons of excellent resources for budding coders to teach themselves, but this approach doesn’t work for everyone. Plenty of people still prefer to have someone there in person to guide them through their first baby steps into web design.
Unfortunately, there’s not much out there in terms of advice and resources for us teachers. This is a real shame as a person’s first encounter with HTML is crucial. It might even be the first time they have attempted anything remotely to do with coding, so it’s important to not scare them off and make the most of this great opportunity to get more people passionate about creating web pages.
Maybe it’s fallen on you to improve your organization’s technical knowledge or like me, you just want to help people grow their ideas. Whatever your reason for teaching HTML — if you’re wondering where to start, this guide is for you.
I’ve been introducing students to HTML for years and know what works and what doesn’t. My record is 12 seconds to prove to someone that it’s actually easy. It just takes real life examples and a few little tricks.
I’m sharing with you a lesson plan introducing HTML to complete beginners that’s been finely tuned through years of experience. It’s structured around the “What is HTML?” presentation, which lays out all the basics and has a short, simple coding exercise at the end. I’ve added all the resources you need below, plus some extra tips and explanatory notes to hopefully make your life easier.
What You’ll Need:
Lesson plan
If you’d like a paper version, you can download and print a copy by clicking the image below.
“What is HTML?” presentation
Use the embedded version below.
Happy Cafe resources folder
Each student will need access to the image files for the coding exercise at the end.
Click on the image below to download the folder as a zip file.
Design Stages sorting cards
Printed and cut-up, enough for groups of 3-4 students.
Click the image below to download the PDF.
Browser and code editor
Students will need a web browser and Sublime (free), or a code editor of your choice.
What Is HTML?
[Slides 1-4]
Start by showing an example of a simple website and ask them what they see. If you’re struggling to find one, feel free to use the Learning Portfolio website I created.
Ask what code they think is used to make all the elements on the page.
Split the class into groups of 3-4 and give them a set of Design Stages cards each. Tell them to first put the stages in the right order i.e. Planning -> Design -> Development -> Going Live, and then add the cards they think go in each category.
This will help students understand how HTML fits into the bigger scheme of designing and building a website, so take a moment to answer questions they might have.
Getting the design stages sorted
I now explain that behind every site is a mix of special languages that your web browser understands, a web browser being the program you use to view the internet. The main way of describing any website is HTML, which stands for Hyper Text Markup Language.
Insert a joke here about how geeks give things weird names and you are now ready to explain where to find this Meta Language.
Straight From The Source
[Slides 5-6]
Direct your trainees to https://webcoursesshowcase.com/example/ (or the simple site example you chose earlier) on their browser and ask them to right click “View page source”.
Now that we have some HTML in front of us, it is time to look at things in detail. Tell your students not to look at the whole picture but for the letters in-between the <>. Take an easy one first like an <img>, explain these are called tags and each tag is equivalent to a word to describe something e.g. <img> means image, <p> means paragraph and so on.
Then take an example of an bullet point list. Look at the frontend so that the students see the bullet points. Now look at the code and tell them to look for something that they think means unordered list. Assuming they find that quite easily, ask them to guess what the <li> means. They will say things like “line” and eventually get closer with “list” so you then explain that it actually means list item.
There’s no need to dwell too long on explaining each individual tag as you’ll be covering them again later in the lesson.
Expert tip: because they get so far themselves and realize they need to learn more, they will solidify the lessons better if you let them take the last leap to understanding.
It’s time to let your students know what they’ll actually be coding today. Show them the HTML for the Happy Cafe page and draw their attention to the tags you’ve just covered and their meaning.
There Is A Story In Learning HTML
[Slides 7-9]
It’s important to explain the need for <start>middle</end> and then make a comparison between block tags like <img />, <br /> and even <hr />.
Explain that all HTML has a beginning, middle and end. Compare it to a story to help them understand it must be complete. If it’s missing just one of these things, it doesn’t work.
Forgetting to end a tag affects the whole story. Point to a heading and tell them,
“We know this is a heading, but we must also know when it finishes so we can move on and describe the rest of our content. If you forget to end a tag, then everything that follows will think it is the same tag.”
For another fun way to explain this concept, check out this video, which uses a hamburger lunch to demonstrate the importance of closing tags.
When explaining block tags, do this by pointing out they are just one thing e.g. an image, where as a paragraph is a bunch of words, a heading is a few words and a <ul> has a whole list of things between it. Images, break returns, horizontal rules and form fields are all single items and thus use a self-terminating tag.
HTML Hierarchy
[Slides 10-19]
Teaching the importance of getting your <h1> and <h2>’s in the right order is important not only for their semantic value but for SEO (Search Engine Optimization), so explain that getting this correct helps your ranking in Google.
Start by showing them a simple example — <strong> has more semantic value than <b>, which is why it is used more often.
Run through the difference between <ul> and <ol>, using the example of an ingredients list and the cooking process to reinforce the idea it is important to pick the tags most meaningful for the content being presented.
Now is a good time to go through the most commonly used tags and what they mean (Slide 18), checking to see if your trainees remember the ones covered earlier.
Next demonstrate the right order for tags by inviting the group to a metaphorical restaurant. They are given the menu which looks like this (Slide 19):
Afterwards, add the relevant headings to the menu as this helps the trainees understand and visualize the hierarchy of headings in HTML.
Some Tags Need More
[Slides 20-26]
Tags like images, links and form fields need attributes to work, so explain that an attribute sits in the opening of a tag and not in the middle or end.
An attribute adds information to a tag and looks=”like this” e.g. width=”200” or alt=”A beautiful Sunset in Thailand”. Time for a real example…
First, remind them of the <img /> tag and ask “what information do we need to know about an image?”. Hopefully you will get “where the image is”, “how big it is” and maybe “what the image is of”. Then show them:
<img src=”product1234.jpg” width=”200” height=”400” alt=”Size 12 blue sequin dress” />
Remember to stress the importance of alt for search engines and accessibility, especially for blind users.
Once they’re happy with <img> attributes, move onto adding hrefs to <a> tags. Demonstrate how to turn text into a link by first using a simple local, relative link, then an absolute URL, highlighting the usefulness of target=”_blank”.
Ask if anybody can guess how to do the same with an image before showing them the solution. Then see if they can recall target=”_blank” by asking them how to make it open in a new page.
Writing Clean, Readable Code
[Slides 27-34]
Your students are now almost ready to start writing their own code, so it’s important to get them into good habits right from the start.
Run through the basics of best practice for writing HTML clearly: nesting, closing tags before adding content, and using the tab button for spacing. The monstrous block of code on Slide 28 will help drive home the importance of doing this correctly.
Definitely not like this
Next, demonstrate how to name HTML files, warning them of the dangers of not getting this right.
Getting them to repeat, “NO SPACES, NO SMILEY FACES and NO CAPITAL LETTERS” out loud is one way of driving this message home.
They might feel they’ve joined some strange new cult, but at least they’ll remember.
Finish by telling them they can save themselves a lot of future pain by taking the time to name folders in a way that is meaningful and easy to refer to when coding later.
Let’s Get Coding
[Happy Cafe — index.html & about.html]
Practical examples of HTML are always the way trainees learn best. We have done a good job of explaining how and why things work, now we need to take care of those who only learn by doing. To that end, I’ve created a simple website for them to code. Take a look at the picture below to get a taste of the homepage in all its glory.
Plain, but perfect for beginners
“At this point I explain the need to learn HTML using basic tools with a little short story of how I was on the beach with my Mum here in Thailand, a client called demanding I come back to Bangkok and fix his site immediately. I ask what the issue was, went to the small internet café, logged in, downloaded his files, opening them in Notepad, fixed the issue and went back to the beach. The moral of the story is that you don’t need fancy tools like Dreamweaver to make and fix HTML.”
– Carl Heaton 2010
What you ask them to make in HTML is up to you, but make it relevant to them. If you want to use the Happy Cafe example I’ve provided, now is the time to make sure they have access to all the resources they need to build the site.
To get everybody warmed up, start by opening Sublime (or your preferred code editor) and inviting students to do <> as fast as possible, then move on to practicing </>. The point here is to start building up a muscle memory of opening and immediately closing tags when writing HTML.
Now slowly code up the Homepage for Happy Cafe and have the class follow you, copying what you do. The page contains a mixture of different types of tags, so make sure to explain what you’re using and why as you move down the page.
This is also a good time to point out any useful features your code editor might have, like colour coding and predictive text.
When you’re finished, do the same with the About page. You can ask questions referencing the material already covered like, “How could I make this link open in a new page?” or “What attribute could I add to this image tag?”.
Doing It For Themselves
[Happy Cafe — contact.html]
At this stage, you’ve given your students a solid introductory foundation to the basics of HTML and let them have a go at writing it. They’re now ready to take off their water wings by pulling together what they’ve learned and writing their first page of HTML code.
Show them the complete frontend version of the Contact page for Happy Cafe (not the HTML). Tell them to work in pairs to write the code for this page. You can soothe any beginner’s nerves by advising them to look at the two pages they’ve just coded with you if they get stuck and telling them you’ll be around to offer help and support.
While they are working on this, you’ll need to make sure you’re available to answer any of the questions they will inevitably have.
Once they’re ready, check what they’ve produced. When possible, if there are mistakes, encourage them to debug their own code by offering hints rather than giving them the answer straight away. It’s important they start learning this skill straight away because they’re definitely gonna need it!
Closing The </lesson>
First of all, congratulate your students. They’ve achieved a lot this lesson and deserve to give themselves a pat on the back.
One way to finish up is to get them thinking about what needs to come next in their learning. Do this by asking what the website is missing. Try to lead them towards “navigation” as an answer but accept any reasonable suggestions.
Finally, ask them how they feel about code and how they would improve on the website you’ve made. This is a good way to get them gently thinking about the need to add extra styling in the form of CSS. It’s also a good chance to gauge how confident they feel about doing some more coding.
And that’s it! Hopefully, your students will leave your classroom smiling with joy at their new found skill and love of HTML.
A possible homework idea would be to set them the task of creating their own, simple home page, using Happy Cafe as a reference. But it’s entirely up to you.
HTML Video Tutorial For Your Trainees
Still not feeling confident enough to teach HTML? Have a look at the video below where you can see an older version of this lesson being taught to a trainee to see how it’s done.
Learning Web Design
Carl is the web design instructor here at Web Courses Bangkok, he has over 11 years of teaching and likes to keep his classes fun and productive. If you would like to know more about how he teaches HTML then please come learn web design with us anytime.
[text-blocks id=”59315″ slug=”course-ad-online-marketing-articles”]
