HTML Cheatsheet

1. Basic Structure

Every HTML page needs this structure. Without it, nothing works.

html

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    Salaam, World!
  </body>
</html>

<!DOCTYPE html> — tells the browser this is HTML5
<html> — root of the page. Everything lives inside this
<head> — metadata (not visible on screen)
<title> — browser tab title
<body> — visible content goes here

2. Headings

Headings give your page structure and hierarchy. Big title at the top, smaller ones below.

<h1> — Most important heading. One per page.

html

<h1>Bashi Academy</h1>

<h2> — Section title.

html

<h2>Our Courses</h2>

<h3> — Sub-section.

html

<h3>HTML & CSS</h3>

<h4> — Deeper detail.

html

<h4>What You Will Learn</h4>

<h5> — Rarely used.

html

<h5>Minor detail</h5>

<h6> — Smallest heading.

html

<h6>Footnote</h6>

Think of it like a book: <h1> is the book title, <h2> is a chapter, <h3> is a section inside that chapter.

3. Text

Text elements control how content appears on the page.

<p> — Paragraph. The browser adds space above and below.

html

<p>Learn to build real websites from scratch.</p>

<span> — Wraps a small piece of text inside a line. Used for styling.

html

<p>Welcome to <span>Bashi Academy</span></p>

<strong> — Strong importance. Shows as bold.

html

<strong>Registration closes Friday</strong>

<em> — Emphasis. Shows as italic.

html

<em>No experience needed.</em>

<br> — Line break. Text after it moves to the next line.

html

Mogadishu<br>Somalia

<hr> — Horizontal divider line. Separates content.

html

<hr>

4. Links

Links let users click and go somewhere else.

Basic link

html

<a href="https://example.com">Visit our website</a>

href = destination URL

Open in new tab

html

<a href="https://example.com" target="_blank">Open in new tab</a>

target="_blank" opens a new tab so the user doesn't leave your site

Internal link

html

<a href="/about.html">About Us</a>

Links to another page in your own site
Uses relative paths, not full URLs

5. Images

Images can come from your project folder or from the internet.

From your folder

html

<img src="images/photo.jpg" alt="Office in Mogadishu">

src = file path
Path must be correct or the image breaks

From the internet

html

<img src="https://example.com/photo.jpg" alt="Nairobi skyline">

Uses the full URL

What is alt?

html

<img src="team.jpg" alt="Three developers working at a desk">

Describes the image in words
Shows if the image fails to load
Screen readers read this to blind users
Important for accessibility

6. Containers

<div> is a container. It groups elements together. It does nothing visual by itself — but with CSS, it becomes powerful.

html

<div>
  <h2>Contact Us</h2>
  <p>Email: hello@example.com</p>
</div>

Groups elements into one block
Used everywhere for layout
Block-level element

7. Lists

Lists group related items.

Unordered list — Bullets. Order does not matter.

html

<ul>
  <li>HTML & CSS</li>
  <li>JavaScript</li>
  <li>React</li>
</ul>

Ordered list — Numbers. Order matters.

html

<ol>
  <li>Create a folder</li>
  <li>Open VS Code</li>
  <li>Write your first HTML file</li>
</ol>

<li> — One item. Always goes inside <ul> or <ol>, never alone.

html

<li>Next.js</li>

8. Forms

Forms collect data from the user.

Real example first

html

<form>
  <label for="name">Magaca</label>
  <input id="name" type="text">

  <label for="email">Email</label>
  <input id="email" type="email">

  <label for="password">Password</label>
  <input id="password" type="password">

  <label for="city">Magaalada</label>
  <select id="city">
    <option value="mogadishu">Mogadishu</option>
    <option value="hargeisa">Hargeisa</option>
    <option value="nairobi">Nairobi</option>
    <option value="oslo">Oslo</option>
  </select>

  <textarea placeholder="Fariintaada..."></textarea>

  <button type="submit">Dir</button>
</form>

User types their name, email, password, picks a city, writes a message, and clicks send.

Breakdown

<form> — Wraps all inputs. Collects and sends data.

html

<form></form>

<input type="text"> — Single-line text input. For names, usernames, etc.

html

<input type="text">

<input type="email"> — Email input. Validates email format.

html

<input type="email">

<input type="password"> — Hides what the user types. Shows dots.

html

<input type="password">

<textarea> — Multi-line text box. For messages or long text.

html

<textarea></textarea>

<select> + <option> — Dropdown. User picks one.

html

<select>
  <option value="mogadishu">Mogadishu</option>
  <option value="hargeisa">Hargeisa</option>
</select>

<button> — Submit button. Sends the form.

html

<button type="submit">Dir</button>

<label> — Tells the user what the input is for.

html

<label for="name">Magaca</label>

for connects the label to an input's id

Mental model

<form> = the container (wraps everything)
<input> = one small field
<textarea> = one big field
<select> = dropdown (pick one)
<button> = the send button
<label> = the name tag on each field

9. Tables

Tables show data in rows and columns.

Real example first

html

<table>
  <tr>
    <th>Magaca</th>
    <th>Doorka</th>
    <th>Magaalada</th>
  </tr>
  <tr>
    <td>Faarax</td>
    <td>Engineer</td>
    <td>Oslo</td>
  </tr>
  <tr>
    <td>Hodan</td>
    <td>Designer</td>
    <td>Nairobi</td>
  </tr>
</table>

Breakdown

<table> — Wraps the entire table.

html

<table></table>

<tr> — One row (left to right).

html

<tr></tr>

<th> — Header cell. Bold by default. Used in the first row.

html

<th>Magaca</th>

<td> — Data cell. The actual content.

html

<td>Faarax</td>

Mental model

<table> = the grid
<tr> = one row
<th> = column title (bold)
<td> = regular cell

10. Block vs Inline

Every HTML element is one of two types: block or inline.

Block elements

Start on a new line
Take the full width of the page
Used for structure and layout

html

<div>I take the full line</div>
<p>So do I</p>

Common block elements: <div>, <p>, <h1>–<h6>, <section>, <header>, <footer>, <main>, <nav>, <ul>, <ol>, <li>, <form>, <table>

Inline elements

Stay on the same line as other elements
Only take the space they need
Used inside text

html

<p>Contact <a href="/contact.html">our team</a> today.</p>

The <a> sits inside the <p>. It does not break to a new line.

Common inline elements: <span>, <a>, <strong>, <em>, <img>, <input>, <button>, <label>

11. Semantic HTML

Semantic tags describe the meaning of each section, not just layout.

<header> — Top of the page. Logo, title, navigation.

html

<header>
  <h1>My Website</h1>
  <nav>...</nav>
</header>

<nav> — Navigation links.

html

<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
  <a href="/contact.html">Contact</a>
</nav>

<main> — Main content of the page. Only one per page.

html

<main>
  <h2>Welcome</h2>
  <p>Start learning today.</p>
</main>

<section> — Groups related content.

html

<section>
  <h2>Courses</h2>
  <p>HTML, CSS, JavaScript, React.</p>
</section>

<footer> — Bottom of the page. Copyright, links.

html

<footer>
  <p>© 2025 My Website</p>
</footer>

Why not just use <div> for everything?

<div> means nothing. It is just a box.
<header> tells the browser "this is the top section."
<nav> tells the browser "these are navigation links."
Search engines and screen readers use semantic tags to understand your page.

Summary

Category	Tags
Structure	html, head, body
Headings	h1, h2, h3, h4, h5, h6
Text	p, span, strong, em, br, hr
Links	a
Images	img
Containers	div
Lists	ul, ol, li
Forms	form, input, textarea, select, button, label
Tables	table, tr, th, td
Semantic	header, nav, main, section, footer

HTML Cheatsheet

1. Basic Structure

Every HTML page needs this structure. Without it, nothing works.

html

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    Salaam, World!
  </body>
</html>

<!DOCTYPE html> — tells the browser this is HTML5
<html> — root of the page. Everything lives inside this
<head> — metadata (not visible on screen)
<title> — browser tab title
<body> — visible content goes here

2. Headings

Headings give your page structure and hierarchy. Big title at the top, smaller ones below.

<h1> — Most important heading. One per page.

html

<h1>Bashi Academy</h1>

<h2> — Section title.

html

<h2>Our Courses</h2>

<h3> — Sub-section.

html

<h3>HTML & CSS</h3>

<h4> — Deeper detail.

html

<h4>What You Will Learn</h4>

<h5> — Rarely used.

html

<h5>Minor detail</h5>

<h6> — Smallest heading.

html

<h6>Footnote</h6>

Think of it like a book: <h1> is the book title, <h2> is a chapter, <h3> is a section inside that chapter.

3. Text

Text elements control how content appears on the page.

<p> — Paragraph. The browser adds space above and below.

html

<p>Learn to build real websites from scratch.</p>

<span> — Wraps a small piece of text inside a line. Used for styling.

html

<p>Welcome to <span>Bashi Academy</span></p>

<strong> — Strong importance. Shows as bold.

html

<strong>Registration closes Friday</strong>

<em> — Emphasis. Shows as italic.

html

<em>No experience needed.</em>

<br> — Line break. Text after it moves to the next line.

html

Mogadishu<br>Somalia

<hr> — Horizontal divider line. Separates content.

html

<hr>

4. Links

Links let users click and go somewhere else.

Basic link

html

<a href="https://example.com">Visit our website</a>

href = destination URL

Open in new tab

html

<a href="https://example.com" target="_blank">Open in new tab</a>

target="_blank" opens a new tab so the user doesn't leave your site

Internal link

html

<a href="/about.html">About Us</a>

Links to another page in your own site
Uses relative paths, not full URLs

5. Images

Images can come from your project folder or from the internet.

From your folder

html

<img src="images/photo.jpg" alt="Office in Mogadishu">

src = file path
Path must be correct or the image breaks

From the internet

html

<img src="https://example.com/photo.jpg" alt="Nairobi skyline">

Uses the full URL

What is alt?

html

<img src="team.jpg" alt="Three developers working at a desk">

Describes the image in words
Shows if the image fails to load
Screen readers read this to blind users
Important for accessibility

6. Containers

<div> is a container. It groups elements together. It does nothing visual by itself — but with CSS, it becomes powerful.

html

<div>
  <h2>Contact Us</h2>
  <p>Email: hello@example.com</p>
</div>

Groups elements into one block
Used everywhere for layout
Block-level element

7. Lists

Lists group related items.

Unordered list — Bullets. Order does not matter.

html

<ul>
  <li>HTML & CSS</li>
  <li>JavaScript</li>
  <li>React</li>
</ul>

Ordered list — Numbers. Order matters.

html

<ol>
  <li>Create a folder</li>
  <li>Open VS Code</li>
  <li>Write your first HTML file</li>
</ol>

<li> — One item. Always goes inside <ul> or <ol>, never alone.

html

<li>Next.js</li>

8. Forms

Forms collect data from the user.

Real example first

html

<form>
  <label for="name">Magaca</label>
  <input id="name" type="text">

  <label for="email">Email</label>
  <input id="email" type="email">

  <label for="password">Password</label>
  <input id="password" type="password">

  <label for="city">Magaalada</label>
  <select id="city">
    <option value="mogadishu">Mogadishu</option>
    <option value="hargeisa">Hargeisa</option>
    <option value="nairobi">Nairobi</option>
    <option value="oslo">Oslo</option>
  </select>

  <textarea placeholder="Fariintaada..."></textarea>

  <button type="submit">Dir</button>
</form>

User types their name, email, password, picks a city, writes a message, and clicks send.

Breakdown

<form> — Wraps all inputs. Collects and sends data.

html

<form></form>

<input type="text"> — Single-line text input. For names, usernames, etc.

html

<input type="text">

<input type="email"> — Email input. Validates email format.

html

<input type="email">

<input type="password"> — Hides what the user types. Shows dots.

html

<input type="password">

<textarea> — Multi-line text box. For messages or long text.

html

<textarea></textarea>

<select> + <option> — Dropdown. User picks one.

html

<select>
  <option value="mogadishu">Mogadishu</option>
  <option value="hargeisa">Hargeisa</option>
</select>

<button> — Submit button. Sends the form.

html

<button type="submit">Dir</button>

<label> — Tells the user what the input is for.

html

<label for="name">Magaca</label>

for connects the label to an input's id

Mental model

<form> = the container (wraps everything)
<input> = one small field
<textarea> = one big field
<select> = dropdown (pick one)
<button> = the send button
<label> = the name tag on each field

9. Tables

Tables show data in rows and columns.

Real example first

html

<table>
  <tr>
    <th>Magaca</th>
    <th>Doorka</th>
    <th>Magaalada</th>
  </tr>
  <tr>
    <td>Faarax</td>
    <td>Engineer</td>
    <td>Oslo</td>
  </tr>
  <tr>
    <td>Hodan</td>
    <td>Designer</td>
    <td>Nairobi</td>
  </tr>
</table>

Breakdown

<table> — Wraps the entire table.

html

<table></table>

<tr> — One row (left to right).

html

<tr></tr>

<th> — Header cell. Bold by default. Used in the first row.

html

<th>Magaca</th>

<td> — Data cell. The actual content.

html

<td>Faarax</td>

Mental model

<table> = the grid
<tr> = one row
<th> = column title (bold)
<td> = regular cell

10. Block vs Inline

Every HTML element is one of two types: block or inline.

Block elements

Start on a new line
Take the full width of the page
Used for structure and layout

html

<div>I take the full line</div>
<p>So do I</p>

Common block elements: <div>, <p>, <h1>–<h6>, <section>, <header>, <footer>, <main>, <nav>, <ul>, <ol>, <li>, <form>, <table>

Inline elements

Stay on the same line as other elements
Only take the space they need
Used inside text

html

<p>Contact <a href="/contact.html">our team</a> today.</p>

The <a> sits inside the <p>. It does not break to a new line.

Common inline elements: <span>, <a>, <strong>, <em>, <img>, <input>, <button>, <label>

11. Semantic HTML

Semantic tags describe the meaning of each section, not just layout.

<header> — Top of the page. Logo, title, navigation.

html

<header>
  <h1>My Website</h1>
  <nav>...</nav>
</header>

<nav> — Navigation links.

html

<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
  <a href="/contact.html">Contact</a>
</nav>

<main> — Main content of the page. Only one per page.

html

<main>
  <h2>Welcome</h2>
  <p>Start learning today.</p>
</main>

<section> — Groups related content.

html

<section>
  <h2>Courses</h2>
  <p>HTML, CSS, JavaScript, React.</p>
</section>

<footer> — Bottom of the page. Copyright, links.

html

<footer>
  <p>© 2025 My Website</p>
</footer>

Why not just use <div> for everything?

<div> means nothing. It is just a box.
<header> tells the browser "this is the top section."
<nav> tells the browser "these are navigation links."
Search engines and screen readers use semantic tags to understand your page.

Summary

Category	Tags
Structure	html, head, body
Headings	h1, h2, h3, h4, h5, h6
Text	p, span, strong, em, br, hr
Links	a
Images	img
Containers	div
Lists	ul, ol, li
Forms	form, input, textarea, select, button, label
Tables	table, tr, th, td
Semantic	header, nav, main, section, footer