HTML Cheese
HTML

HTML Basics

The skeleton of the web! ðŸĶī🧀 Build your first web page from scratch.

1 What is HTML?

HTML stands for HyperText Markup Language. Think of it like building a cheese house — HTML provides the blocks of cheese to build the walls, roof, and doors. Without HTML, there is no web page!

Every page you visit on the internet — Google, YouTube, your favourite games site — all starts with HTML. It tells the browser what content to show: headings, paragraphs, images, buttons, and more.

ðŸ’Ą HTML is not a programming language — it's a markup language. It describes the structure and meaning of content rather than giving instructions to execute.

Elements and Tags

HTML uses tags to wrap content. Most tags have an opening part like <p> and a closing part like </p>. Together they form an element.

index.html 
<h1>Welcome to CHEESY Education!</h1>
<p>This is a paragraph about how much we love cheese.</p>
Preview

Welcome to CHEESY Education!

This is a paragraph about how much we love cheese.

2 Document Structure

Every proper HTML document has the same basic structure. It always starts with a <!DOCTYPE html> declaration, followed by the <html> element which wraps everything.

Inside <html> there are two main sections: <head> (invisible info like the title and styles) and <body> (the visible content the user sees).

my-first-page.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Cheesy Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>My first web page 🧀</p>
</body>
</html>

3 Headings and Paragraphs

HTML has 6 levels of headings: <h1> through <h6>. Use <h1> for the main title (largest), and smaller numbers for subtitles. The <p> tag is for paragraphs of text.

headings.html 
<h1>The Biggest Heading (h1)</h1>
<h2>Second Biggest (h2)</h2>
<h3>Third Biggest (h3)</h3>
<p>A regular paragraph of text. Use it for longer descriptions.</p>
Preview

The Biggest Heading (h1)

Second Biggest (h2)

Third Biggest (h3)

A regular paragraph of text. Use it for longer descriptions.

4 Links and Images

Use the <a> tag to create hyperlinks. The href attribute tells the browser where to go. The <img> tag displays images — notice it has no closing tag! The src attribute is the image URL, and alt is a text description for accessibility.

links-and-images.html 
<!-- A link that opens in a new tab -->
<a href="https://example.com" target="_blank">
  Click here for more cheese!
</a>

<!-- An image (self-closing tag) -->
<img src="cheese.png" alt="A delicious piece of cheese" />
Preview
Click here for more cheese!

Cheese

5 Lists

Use <ul> for an unordered (bullet) list and <ol> for an ordered (numbered) list. Each item goes inside a <li> tag. Perfect for listing your favourite cheeses!

lists.html 
<h3>My Favorite Cheeses</h3>
<ul>
  <li>Cheddar</li>
  <li>Gouda</li>
  <li>Brie</li>
</ul>

<h3>Steps to Make Grilled Cheese</h3>
<ol>
  <li>Butter the bread</li>
  <li>Add cheese slices</li>
  <li>Grill until golden 🧀</li>
</ol>
Preview

My Favorite Cheeses

  • Cheddar
  • Gouda
  • Brie

Steps to Make Grilled Cheese

  1. Butter the bread
  2. Add cheese slices
  3. Grill until golden 🧀

6 Forms and Inputs

Forms let users enter data. Use the <form> tag to wrap your form, <input> for text fields, and <button> to submit. The type attribute on <input> changes what kind of field it is (text, email, password, checkbox, etc.).

form.html 
<form>
  <label for="name">Your Name:</label>
  <input type="text" id="name" placeholder="Enter your name" />

  <label for="fav-cheese">Favorite Cheese:</label>
  <select id="fav-cheese">
    <option>Cheddar</option>
    <option>Gouda</option>
    <option>Brie</option>
  </select>

  <button type="submit">Submit 🧀</button>
</form>
Preview

7 Divs and Spans

<div> is a block-level container — it takes up the full width and starts on a new line. <span> is an inline container — it wraps text within a line without breaking it. Both are super useful for styling and layout!

divs-and-spans.html 
<div style="background: #FFF3B0; padding: 1rem; border-radius: 8px;">
  <h2>I am a block element inside a div</h2>
  <p>
    I love <span style="color: orange; font-weight: bold;">cheesy</span> code!
  </p>
</div>
Preview

I am a block element inside a div

I love cheesy code!

🔖 Quick Reference Card

Here are the most important HTML tags you just learned:

Tag Purpose Example
<h1>–<h6>Headings<h1>Title</h1>
<p>Paragraph<p>Text</p>
<a>Hyperlink<a href="...">Click</a>
<img>Image<img src="..." alt="..." />
<ul> / <ol>Lists<ul><li>Item</li></ul>
<div>Block container<div class="...">...</div>
<span>Inline container<span style="...">text</span>
← Back to Home Next: CSS ðŸŽĻ →