Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 1 · 3 / 8Common HTML elements
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1Common HTML elements
01 / 08Overview

Common HTML elements

You'll learn the HTML elements you will see on almost every page, and why the right one matters.

Why it mattersPicking the right element makes your page work for screen readers, search and phones, with no extra work.
about 90 min·needs: Reading HTML structure
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Video
HTML & CSS for absolute beginners: Semantic HTMLKevin Powell · YouTube · 9 min · English
MMamun's noteWatch all of it. Notice how he picks a tag by asking what the content is, not how it should look.
Article
Semantic HTMLweb.dev Learn HTML · 20 min · English
MMamun's noteRead it once, slowly. The part where the page is first built only from div elements shows exactly the mistake to avoid.
ArticleOptional
Structuring documentsMDN Web Docs · 20 min · English
MMamun's noteGood for headings and the layout elements like header, nav, main and footer. Skim the code samples, do not copy them all.
03 / 08

Explanation

You know HTML is boxes inside boxes. Now you need to know which box to pick. There are about a dozen you will use every day.

Think of a class notice board. A big title at the top. Short notices under it. A list of exam dates. A phone number to call. Each piece has a job. HTML elements are the same: each element says what its content is, not how it looks.

The everyday ones:

  • <h1> to <h6>: headings, biggest to smallest. One <h1> per page.
  • <p>: a paragraph of text.
  • <a href="...">: a link to another page.
  • <img src="..." alt="...">: an image. alt describes it in words.
  • <ul> with <li> items: a list. Use <ol> when order matters, like steps.
  • <button>: something you press.
  • <form>, <label> and <input>: a place to type, like a sign-up box.
<h2>Exam dates</h2>
<ul>
  <li>Math: 12 May</li>
  <li>Physics: 15 May</li>
</ul>
<img src="campus.jpg" alt="Students outside the library">

Elements that say what something means are called semantic elements. <nav> for the menu, <main> for the main content, <footer> for the bottom. A blind user's screen reader reads these out, so the user can jump straight to the menu. Google reads them too.

People often build everything from <div>, a box with no meaning. A <div> that looks like a button cannot be reached with the Tab key, and a screen reader does not call it a button. Use <button>. Another common one: an image with no alt. If the image fails to load, or the user cannot see, there is nothing left.

When you read HTML, ask of each element: what is this content? Then check the tag says the same thing.

Words to recognise
headingparagraphlinkimagealtlistbuttonforminputlabelsemantic
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

index.html5 notes
<main>
Mentor note · line 1
main marks the main content of the page. Screen reader users can jump straight here.
2 <h1>Rafi Ahmed</h1>
<img src="rafi.jpg" alt="Rafi smiling in a blue shirt">
4 <p>CSE student in Sylhet. I like cricket and small apps.</p>
5 <h2>Skills</h2>
<ul>
7 <li>HTML and CSS</li>
8 </ul>
9 <form>
<label for="email">Your email</label>
11 <input id="email" type="email">
<button>Say hello</button>
13 </form>
14</main>
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is the alt text on an image for?
  2. 2 / 3You need something the user clicks to send a form. Which is best?
  3. 3 / 3You want the steps of a recipe, in order. Which list?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with Common HTML elements?

08 / 08

Done

You can now
Read a page's HTML and name what each element is for, and spot a missing alt or a div that should be a button.
Next: CSS selectors and colours Back to Phase 1
On this page
  1. 01Common HTML elements
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1Common HTML elements
01 / 08Overview

Common HTML elements

You'll learn the HTML elements you will see on almost every page, and why the right one matters.

Why it mattersPicking the right element makes your page work for screen readers, search and phones, with no extra work.
about 90 min·needs: Reading HTML structure
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Video
HTML & CSS for absolute beginners: Semantic HTMLKevin Powell · YouTube · 9 min · English
MMamun's noteWatch all of it. Notice how he picks a tag by asking what the content is, not how it should look.
Article
Semantic HTMLweb.dev Learn HTML · 20 min · English
MMamun's noteRead it once, slowly. The part where the page is first built only from div elements shows exactly the mistake to avoid.
ArticleOptional
Structuring documentsMDN Web Docs · 20 min · English
MMamun's noteGood for headings and the layout elements like header, nav, main and footer. Skim the code samples, do not copy them all.
03 / 08

Explanation

You know HTML is boxes inside boxes. Now you need to know which box to pick. There are about a dozen you will use every day.

Think of a class notice board. A big title at the top. Short notices under it. A list of exam dates. A phone number to call. Each piece has a job. HTML elements are the same: each element says what its content is, not how it looks.

The everyday ones:

  • <h1> to <h6>: headings, biggest to smallest. One <h1> per page.
  • <p>: a paragraph of text.
  • <a href="...">: a link to another page.
  • <img src="..." alt="...">: an image. alt describes it in words.
  • <ul> with <li> items: a list. Use <ol> when order matters, like steps.
  • <button>: something you press.
  • <form>, <label> and <input>: a place to type, like a sign-up box.
<h2>Exam dates</h2>
<ul>
  <li>Math: 12 May</li>
  <li>Physics: 15 May</li>
</ul>
<img src="campus.jpg" alt="Students outside the library">

Elements that say what something means are called semantic elements. <nav> for the menu, <main> for the main content, <footer> for the bottom. A blind user's screen reader reads these out, so the user can jump straight to the menu. Google reads them too.

People often build everything from <div>, a box with no meaning. A <div> that looks like a button cannot be reached with the Tab key, and a screen reader does not call it a button. Use <button>. Another common one: an image with no alt. If the image fails to load, or the user cannot see, there is nothing left.

When you read HTML, ask of each element: what is this content? Then check the tag says the same thing.

Words to recognise
headingparagraphlinkimagealtlistbuttonforminputlabelsemantic
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

index.html5 notes
<main>
Mentor note · line 1
main marks the main content of the page. Screen reader users can jump straight here.
2 <h1>Rafi Ahmed</h1>
<img src="rafi.jpg" alt="Rafi smiling in a blue shirt">
4 <p>CSE student in Sylhet. I like cricket and small apps.</p>
5 <h2>Skills</h2>
<ul>
7 <li>HTML and CSS</li>
8 </ul>
9 <form>
<label for="email">Your email</label>
11 <input id="email" type="email">
<button>Say hello</button>
13 </form>
14</main>
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is the alt text on an image for?
  2. 2 / 3You need something the user clicks to send a form. Which is best?
  3. 3 / 3You want the steps of a recipe, in order. Which list?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with Common HTML elements?

08 / 08

Done

You can now
Read a page's HTML and name what each element is for, and spot a missing alt or a div that should be a button.
Next: CSS selectors and colours Back to Phase 1
On this page
  1. 01Common HTML elements
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read

You know HTML is boxes inside boxes. Now you need to know which box to pick. There are about a dozen you will use every day.

Think of a class notice board. A big title at the top. Short notices under it. A list of exam dates. A phone number to call. Each piece has a job. HTML elements are the same: each element says what its content is, not how it looks.

The everyday ones:

  • <h1> to <h6>: headings, biggest to smallest. One <h1> per page.
  • <p>: a paragraph of text.
  • <a href="...">: a link to another page.
  • <img src="..." alt="...">: an image. alt describes it in words.
  • <ul> with <li> items: a list. Use <ol> when order matters, like steps.
  • <button>: something you press.
  • <form>, <label> and <input>: a place to type, like a sign-up box.
<h2>Exam dates</h2>
<ul>
  <li>Math: 12 May</li>
  <li>Physics: 15 May</li>
</ul>
<img src="campus.jpg" alt="Students outside the library">

Elements that say what something means are called semantic elements. <nav> for the menu, <main> for the main content, <footer> for the bottom. A blind user's screen reader reads these out, so the user can jump straight to the menu. Google reads them too.

People often build everything from <div>, a box with no meaning. A <div> that looks like a button cannot be reached with the Tab key, and a screen reader does not call it a button. Use <button>. Another common one: an image with no alt. If the image fails to load, or the user cannot see, there is nothing left.

When you read HTML, ask of each element: what is this content? Then check the tag says the same thing.

Words to recognise
headingparagraphlinkimagealtlistbuttonforminputlabelsemantic

You know HTML is boxes inside boxes. Now you need to know which box to pick. There are about a dozen you will use every day.

Think of a class notice board. A big title at the top. Short notices under it. A list of exam dates. A phone number to call. Each piece has a job. HTML elements are the same: each element says what its content is, not how it looks.

The everyday ones:

  • <h1> to <h6>: headings, biggest to smallest. One <h1> per page.
  • <p>: a paragraph of text.
  • <a href="...">: a link to another page.
  • <img src="..." alt="...">: an image. alt describes it in words.
  • <ul> with <li> items: a list. Use <ol> when order matters, like steps.
  • <button>: something you press.
  • <form>, <label> and <input>: a place to type, like a sign-up box.
<h2>Exam dates</h2>
<ul>
  <li>Math: 12 May</li>
  <li>Physics: 15 May</li>
</ul>
<img src="campus.jpg" alt="Students outside the library">

Elements that say what something means are called semantic elements. <nav> for the menu, <main> for the main content, <footer> for the bottom. A blind user's screen reader reads these out, so the user can jump straight to the menu. Google reads them too.

People often build everything from <div>, a box with no meaning. A <div> that looks like a button cannot be reached with the Tab key, and a screen reader does not call it a button. Use <button>. Another common one: an image with no alt. If the image fails to load, or the user cannot see, there is nothing left.

When you read HTML, ask of each element: what is this content? Then check the tag says the same thing.

Words to recognise
headingparagraphlinkimagealtlistbuttonforminputlabelsemantic