The Document, Revisited
Yesterday you wrote your first HTML file and saw four tags appear in every page: <!DOCTYPE html>, <html>, <head>, and <body>. Today you'll go one level deeper — into how elements nest inside one another, and the small set of tags that hold everything else together.
Think of an HTML document like a set of nested boxes. The <html> box contains the <head> and <body> boxes, and the <body> box contains every visible box after that. Nothing overlaps — a box either sits fully inside another box, or fully beside it.
- ✓HTML elements can contain other elements — this is called nesting.
- ✓Indentation doesn't affect how a browser renders a page, but it makes nesting readable to humans.
- ✓Elements must close in the reverse order they opened — this is called proper nesting.
Six Tags You'll Use Constantly
Before working with headings, links, and images in the coming lessons, get comfortable with a handful of generic tags that show up in almost every document.
A generic block-level container. Used to group related content together for layout or styling purposes.
A generic inline container. Used to wrap a small piece of text inside a line without breaking the flow.
Inserts a single line break. It has no closing tag — it's a "self-closing" or void element.
Draws a horizontal rule — a thin line used to separate sections of content. Also self-closing.
A comment. Anything between these markers is ignored by the browser — useful for notes to yourself.
<div> always starts on a new line and takes up the full width available — that's what "block-level" means. <span> stays inline with surrounding text and only takes up as much width as its content needs.
Putting It Together
Here's a small page that uses nesting, a comment, a <div>, a <span>, and a <hr> together. Create a new file called day2.html in your course folder and type this out:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document Structure</title> </head> <body> <!-- this div groups my intro together --> <div> <h1>About Me</h1> <p> My name is Riya, and I live in <span>Delhi</span>.<br> I'm learning HTML one day at a time. </p> </div> <hr> <div> <p>Thanks for stopping by!</p> </div> </body> </html>
Save and open it in your browser — notice the <hr> line and how "Delhi" sits inline with the rest of the sentence.
Breaking Down What You Just Wrote
Here's what each new piece in that file is actually doing.
<!-- this div groups... -->A comment. It's there purely for whoever reads the code later — the browser skips it entirely.
<div>...</div>Groups the heading and paragraph together as one block-level section, separate from the second <div> below it.
<span>Delhi</span>Wraps just the word "Delhi" without breaking the sentence onto a new line — useful later for styling a single word differently.
<br>Forces a line break right after the sentence, without starting an entirely new paragraph.
<hr>Draws a visible dividing line between the two <div> sections.
Try It Yourself
Add a third <div> below the "Thanks for stopping by!" one containing a <p> with your favorite hobby. Wrap the hobby's name itself in a <span>, and separate it from the section above with another <hr>.
Build a Sectioned Mini-Page
Three sections, properly nested
Create a new file called structure.html inside your course folder and build a page with three distinct sections.
- Start with the full DOCTYPE, html, head, and body structure.
- Wrap each of the three sections in its own <div>.
- Separate each section from the next with an <hr>.
- Inside at least one section, use a <span> to highlight a single important word.
- Use <br> at least once to break a line without starting a new paragraph.
- Add one HTML comment somewhere in the file explaining what one of the sections is for.
Recap
Elements can contain other elements, and closing tags must close in reverse order of opening.
<div> is block-level and takes a full new line; <span> is inline and flows with text.
<br> and <hr> have no closing tag — they represent a single, self-contained action.
Written as <!-- -->, comments are ignored by the browser and used to leave notes in your code.
Key Takeaways
- HTML documents are built from elements nested inside other elements, like boxes inside boxes.
- <div> and <span> are generic containers — block-level and inline, respectively.
- <br> and <hr> are self-closing tags with no separate closing tag.
- Comments (<!-- -->) let you leave notes in your code that browsers ignore.
- Consistent indentation makes deeply nested documents far easier to read and debug.