Welcome, coder! This is your guide to building websites. Remember: HTML tags are like sandwiches—most need an opening <tag> and a closing </tag>.

Skeleton

Must Have

Every HTML file needs this structure.

                            <!DOCTYPE html>

                            <html>

                              <head>

                                <title>Hi</title>

                              </head>

                              <body>

                                <!-- Body -->

                              </body>

                            </html>

<!DOCTYPE>: "This is HTML".
<html>: The root tag.
<head>: Settings area.
<title>: Names the browser tab.
<body>: Visible content.

Text

Headings

                            <h1>Big</h1>

                            <h2>Med</h2>

                            <h6>Small</h6>

Big

Med

Small

Paragraph

<p>Normal text.</p>

Lists

Unordered (Bullets)

                            <ul>

                              <li>Milk</li>

                              <li>Eggs</li>

                            </ul>

Milk
Eggs

Ordered (1, 2, 3)

                            <ol>

                              <li>Wake up</li>

                              <li>Code</li>

                            </ol>

Wake up
Code

Media

Links

                            <a href="site.com">Go</a>
                        

Images

Audio

                            <audio controls>

                              <source src="s.mp3">

                            </audio>

Video

                            <video controls>

                              <source src="v.mp4">

                            </video>

Debugging Checklist

Something looks broken? Don't panic! Run through this checklist to fix it.

Did you close the tag?
Most tags need a partner.
<h1>Hello ❌ vs <h1>Hello</h1> ✅
Mismatched Pairs?
Don't mix them up.
<h1>Title</h2> ❌ vs <h1>Title</h1> ✅
Check your spelling!
Computers are strict.
scr="pic.jpg" ❌ vs src="pic.jpg" ✅
Watch your quotes
Attributes need "quotes".
href="page.html"
Nesting Order
First open, last closed.
<b><i>Text</i></b> ✅
Saved the file?
Did you save as .html?
Refresh the browser after saving.
Lower Case Tags
HTML doesn't care, but it's good habit.
<body> not <BODY>.
Start at the Top
Bugs cascade down. Fix the very first error you find, and the others might vanish!
Refresh Often
Don't wait. Refresh the browser after every small code change to catch bugs instantly.
Expect vs. Reality
Look at the screen. Is it what you expected? If not, check the code for that specific part.
Title vs. Headings
Don't confuse them! <title> names the browser tab. <h1> puts a big title on the actual page.
The Magic Slash /
Closing tags must have a forward slash. <p>...<p> ❌ vs <p>...</p> ✅

Tip: Right-click on any webpage and hit "Inspect" to see its real HTML!

HTML Thirds Reference Sheet