Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 1 · 2 / 8Reading HTML structure
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 1Reading HTML structure
01 / 08Overview

Reading HTML structure

You'll learn to read the shape of an HTML file, tags inside tags.

Why it mattersReact code looks a lot like HTML, so reading this shape now makes React much easier later.
about 90 min·needs: What happens when you open a URL
02 / 08

Watch & read

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

Video
HTML & CSS for absolute beginners: What is HTML?Kevin Powell · YouTube · 8 min · English
MMamun's noteWatch all of it. Kevin is calm and clear, and this whole series is a good friend for this phase.
Article
Basic HTML syntaxMDN Web Docs · 25 min · English
MMamun's noteRead "Anatomy of an HTML element", nesting, attributes and "Anatomy of an HTML document". Skip whitespace and character references for now.
VideoOptional
HTML এর সাধারণ গঠন (basic structure)Anisul Islam · YouTube · 4 min · Bangla
MMamun's noteA short Bangla walk through html, head and body. Good if you want the same idea in your own language.
03 / 08

Explanation

You want to make a page. The browser needs to know which text is a heading, which is a paragraph, and where a picture goes. HTML is how you tell it.

Think of a tiffin carrier. The big carrier holds boxes. Each box holds food. Nothing hangs half outside. HTML works the same way: boxes inside boxes, and every box is closed before its outer box closes.

Each box is an element. You open it with a tag like <p> and close it with </p>. The closing tag has a /. The text between them is what the element holds.

<body>
  <h1>Nusrat's notes</h1>
  <p>I study <strong>CSE</strong> at DU.</p>
</body>

Here body holds an h1 and a p. The p holds some text and a strong. Putting one element inside another is called nesting.

Some tags carry extra information, called attributes. They go inside the opening tag: <a href="https://github.com">. Here href is the attribute name and the address is its value.

Every page has two main parts inside <html>:

  • <head> holds facts about the page: its title in the tab, links to CSS. You do not see it on the page.
  • <body> holds everything you see.

People often close tags in the wrong order, like <p><strong>CSE</p></strong>. That is a box closed from outside its outer box. The browser tries to guess what you meant, and often guesses badly. Close the inner one first: </strong></p>.

When you read HTML, use the indentation. Each step to the right means "inside the line above". To find where an element ends, look straight down for the closing tag at the same indent.

Words to recognise
HTMLtagelementopening tagclosing tagnestingattributeheadbody
04 / 08

Code tour

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

index.html5 notes
<!DOCTYPE html>
Mentor note · line 1
This first line tells the browser "this is a modern HTML page". Every page starts with it.
<html lang="en">
3 <head>
4 <meta charset="utf-8">
<title>Nusrat's notes</title>
6 </head>
7 <body>
8 <h1>Nusrat's notes</h1>
<p>I study <strong>CSE</strong> at DU.</p>
<a href="https://github.com">My GitHub</a>
11 </body>
12</html>
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which line is nested correctly?
  2. 2 / 3Where does text you want people to see on the page go?
  3. 3 / 3In <img src="cat.jpg" alt="A sleeping cat">, what is src?
06 / 08

Explain it back

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

How confident are you with Reading HTML structure?

08 / 08

Done

You can now
Look at an HTML file and say which tag is inside which, and what goes in the head and the body.
Next: Common HTML elements Back to Phase 1
On this page
  1. 01Reading HTML structure
  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 1Reading HTML structure
01 / 08Overview

Reading HTML structure

You'll learn to read the shape of an HTML file, tags inside tags.

Why it mattersReact code looks a lot like HTML, so reading this shape now makes React much easier later.
about 90 min·needs: What happens when you open a URL
02 / 08

Watch & read

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

Video
HTML & CSS for absolute beginners: What is HTML?Kevin Powell · YouTube · 8 min · English
MMamun's noteWatch all of it. Kevin is calm and clear, and this whole series is a good friend for this phase.
Article
Basic HTML syntaxMDN Web Docs · 25 min · English
MMamun's noteRead "Anatomy of an HTML element", nesting, attributes and "Anatomy of an HTML document". Skip whitespace and character references for now.
VideoOptional
HTML এর সাধারণ গঠন (basic structure)Anisul Islam · YouTube · 4 min · Bangla
MMamun's noteA short Bangla walk through html, head and body. Good if you want the same idea in your own language.
03 / 08

Explanation

You want to make a page. The browser needs to know which text is a heading, which is a paragraph, and where a picture goes. HTML is how you tell it.

Think of a tiffin carrier. The big carrier holds boxes. Each box holds food. Nothing hangs half outside. HTML works the same way: boxes inside boxes, and every box is closed before its outer box closes.

Each box is an element. You open it with a tag like <p> and close it with </p>. The closing tag has a /. The text between them is what the element holds.

<body>
  <h1>Nusrat's notes</h1>
  <p>I study <strong>CSE</strong> at DU.</p>
</body>

Here body holds an h1 and a p. The p holds some text and a strong. Putting one element inside another is called nesting.

Some tags carry extra information, called attributes. They go inside the opening tag: <a href="https://github.com">. Here href is the attribute name and the address is its value.

Every page has two main parts inside <html>:

  • <head> holds facts about the page: its title in the tab, links to CSS. You do not see it on the page.
  • <body> holds everything you see.

People often close tags in the wrong order, like <p><strong>CSE</p></strong>. That is a box closed from outside its outer box. The browser tries to guess what you meant, and often guesses badly. Close the inner one first: </strong></p>.

When you read HTML, use the indentation. Each step to the right means "inside the line above". To find where an element ends, look straight down for the closing tag at the same indent.

Words to recognise
HTMLtagelementopening tagclosing tagnestingattributeheadbody
04 / 08

Code tour

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

index.html5 notes
<!DOCTYPE html>
Mentor note · line 1
This first line tells the browser "this is a modern HTML page". Every page starts with it.
<html lang="en">
3 <head>
4 <meta charset="utf-8">
<title>Nusrat's notes</title>
6 </head>
7 <body>
8 <h1>Nusrat's notes</h1>
<p>I study <strong>CSE</strong> at DU.</p>
<a href="https://github.com">My GitHub</a>
11 </body>
12</html>
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which line is nested correctly?
  2. 2 / 3Where does text you want people to see on the page go?
  3. 3 / 3In <img src="cat.jpg" alt="A sleeping cat">, what is src?
06 / 08

Explain it back

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

How confident are you with Reading HTML structure?

08 / 08

Done

You can now
Look at an HTML file and say which tag is inside which, and what goes in the head and the body.
Next: Common HTML elements Back to Phase 1
On this page
  1. 01Reading HTML structure
  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 want to make a page. The browser needs to know which text is a heading, which is a paragraph, and where a picture goes. HTML is how you tell it.

Think of a tiffin carrier. The big carrier holds boxes. Each box holds food. Nothing hangs half outside. HTML works the same way: boxes inside boxes, and every box is closed before its outer box closes.

Each box is an element. You open it with a tag like <p> and close it with </p>. The closing tag has a /. The text between them is what the element holds.

<body>
  <h1>Nusrat's notes</h1>
  <p>I study <strong>CSE</strong> at DU.</p>
</body>

Here body holds an h1 and a p. The p holds some text and a strong. Putting one element inside another is called nesting.

Some tags carry extra information, called attributes. They go inside the opening tag: <a href="https://github.com">. Here href is the attribute name and the address is its value.

Every page has two main parts inside <html>:

  • <head> holds facts about the page: its title in the tab, links to CSS. You do not see it on the page.
  • <body> holds everything you see.

People often close tags in the wrong order, like <p><strong>CSE</p></strong>. That is a box closed from outside its outer box. The browser tries to guess what you meant, and often guesses badly. Close the inner one first: </strong></p>.

When you read HTML, use the indentation. Each step to the right means "inside the line above". To find where an element ends, look straight down for the closing tag at the same indent.

Words to recognise
HTMLtagelementopening tagclosing tagnestingattributeheadbody

You want to make a page. The browser needs to know which text is a heading, which is a paragraph, and where a picture goes. HTML is how you tell it.

Think of a tiffin carrier. The big carrier holds boxes. Each box holds food. Nothing hangs half outside. HTML works the same way: boxes inside boxes, and every box is closed before its outer box closes.

Each box is an element. You open it with a tag like <p> and close it with </p>. The closing tag has a /. The text between them is what the element holds.

<body>
  <h1>Nusrat's notes</h1>
  <p>I study <strong>CSE</strong> at DU.</p>
</body>

Here body holds an h1 and a p. The p holds some text and a strong. Putting one element inside another is called nesting.

Some tags carry extra information, called attributes. They go inside the opening tag: <a href="https://github.com">. Here href is the attribute name and the address is its value.

Every page has two main parts inside <html>:

  • <head> holds facts about the page: its title in the tab, links to CSS. You do not see it on the page.
  • <body> holds everything you see.

People often close tags in the wrong order, like <p><strong>CSE</p></strong>. That is a box closed from outside its outer box. The browser tries to guess what you meant, and often guesses badly. Close the inner one first: </strong></p>.

When you read HTML, use the indentation. Each step to the right means "inside the line above". To find where an element ends, look straight down for the closing tag at the same indent.

Words to recognise
HTMLtagelementopening tagclosing tagnestingattributeheadbody