Chapter 3
HTML Page Layout & Tags
Semantic Tags • SEO • Div & Span • Block vs Inline
1. Semantic HTML Tags
Semantic tags are HTML elements that have a clear meaning to both the browser and the
developer. They tell the browser what role a piece of content plays on the page.
Simple Analogy
Think of a book. It has a Cover (header), Main Story (main), and a Back Page (footer).
Semantic tags do the same thing for a web page — they label each section clearly.
1.1 <header> Tag
The <header> tag sits at the top of your page or section. It typically holds the website logo,
navigation bar, or page title.
<header>
<h1>My Website</h1>
<nav>
<a href='/'>Home</a>
<a href='/about'>About</a>
</nav>
</header>
• Position: Always at the top of a page or section.
• Common content: Logo, site title, navigation links.
• Can be used multiple times: Each <article> or <section> can have its own <header>.
1.2 <main> Tag
The <main> tag wraps the primary content of your page — the part that is unique to that page.
There should only be ONE <main> per page.
<main>
<h2>Welcome to My Blog</h2>
<p>This is the main content area.</p>
</main>
• Only one per page: Do not use multiple <main> tags.
• Skip navigation: Screen readers jump to <main> when users press "skip to content".
• Does not affect visual layout: It is purely semantic.
1.3 <footer> Tag
The <footer> tag appears at the bottom of the page or section. It typically holds copyright
information, social media links, and contact details.
<footer>
<p>© 2025 My Website. All Rights Reserved.</p>
<a href='/privacy'>Privacy Policy</a>
</footer>
• Multiple footers allowed: Like <header>, each <article> can have its own <footer>.
• Common content: Copyright, links, contact info, site map.
1.4 Full Page Layout Example
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<h2>Hello World!</h2>
<p>This is the main content.</p>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
2. Semantic Tags & SEO
SEO (Search Engine Optimization) means making your website easy for Google to find and
rank. When you use semantic tags, you help Google understand your page structure.
What Happens Without Semantic Tags?
If you use only <div> and <span> everywhere, Google sees a "wall of content" with no
structure. It cannot tell what is a heading, what is important, or what is the main topic. Your
ranking drops.
With Semantic Tags Without Semantic Tags
Google understands page structure Google sees a "wall of content"
Better search ranking Lower search ranking
Accessible to screen readers Poor accessibility
Easier for developers to read Confusing and messy code
Faster indexing by search engines Slower or incorrect indexing
Key Rule
Always use semantic tags (<header>, <main>, <footer>, <nav>, <article>, <section>)
instead of generic <div> for major page sections. This alone improves your SEO
significantly.
3. Link Attributes (<a> tag)
The <a> (anchor) tag is used to create hyperlinks. It connects pages together — both inside
your site and to other websites.
<a href="[Link] target="_blank" rel="noopener
noreferrer">
Visit Google
</a>
Important Attributes of <a>
Attribute What It Does
href The URL or path the link goes to. Example:
href='[Link]
target='_blank' Opens the link in a NEW tab instead of the
current one.
target='_self' Opens in the SAME tab (this is the default
behaviour).
rel='noopener noreferrer' Security setting — always use with
target='_blank' to prevent attacks.
title Shows a tooltip when the user hovers over
the link.
download Makes the browser download the file instead
of opening it.
Internal vs External Links
<!-- External link (to another website) -->
<a href="[Link] target="_blank" rel="noopener
noreferrer">YouTube</a>
<!-- Internal link (to another page in YOUR website) -->
<a href="/[Link]">About Us</a>
<!-- Link to a section on the SAME page -->
<a href="#contact">Go to Contact Section</a>
<!-- Download link -->
<a href="/[Link]" download>Download My Resume</a>
4. <div> and <span> Tags
Both <div> and <span> are generic container tags. They have NO semantic meaning — they
are just boxes to group content for styling or scripting.
4.1 <div> — Block Container
<div> is a block-level element. It takes up the full width of its parent and always starts on a new
line.
<!-- div groups a card -->
<div class='card'>
<h2>Product Name</h2>
<p>Product description goes here.</p>
<button>Buy Now</button>
</div>
• Use <div> when: You want to group block-level elements (paragraphs, headings,
images) together.
• Real use: Cards, sections, containers, grid layouts.
4.2 <span> — Inline Container
<span> is an inline element. It does NOT start on a new line — it wraps around text or
elements within a line.
<p>
My name is <span style="color: blue; font-weight: bold;">Ali</span>
and I love coding.
</p>
• Use <span> when: You want to style a small piece of text inside a paragraph.
• Real use: Highlighting a word, changing color of a number, adding an icon inline.
<div> <span>
Block-level element Inline element
Takes full width Only takes as much width as its content
Starts on a new line Does NOT start on a new line
Groups large sections Groups small pieces of text or content
Example: <div class="card"> Example: <span class="highlight">
5. Block-Level vs Inline Elements
This is one of the most important concepts in HTML. Every HTML element is either BLOCK or
INLINE. Understanding this will fix 80% of your layout confusion.
5.1 Block-Level Elements
Definition:
A block element always starts on a NEW LINE and takes up the FULL WIDTH of its parent
container.
• Analogy: Think of a block element like a brick. Each brick stacks vertically.
Common Block Elements
<div> — General container (most common)
<p> — Paragraph
<h1> to <h6> — Headings
<ul>, <ol>, <li> — Lists
<table> — Table
<header>, <main>, <footer>, <section>, <article> — Semantic blocks
<form> — Form
<hr> — Horizontal rule (divider line)
<!-- Each block starts on a new line -->
<div>I am block one</div>
<div>I am block two</div>
<p>I am a paragraph</p>
<!-- RESULT: each element is on its own line -->
I am block one
I am block two
I am a paragraph
5.2 Inline Elements
Definition:
An inline element does NOT start on a new line. It sits inside a line of text and only takes up
as much space as its content needs.
• Analogy: Think of inline elements like words in a sentence. They flow left to right without
breaking the line.
Common Inline Elements
<span> — Generic inline container
<a> — Link
<strong> — Bold text (also semantic: 'this is important')
<em> — Italic text (emphasis)
<img> — Image
<button> — Button
<input> — Input field
<label> — Label for input
<br> — Line break
<code> — Inline code text
<!-- Inline elements sit side by side on the same line -->
<p>
I love <strong>HTML</strong> and <em>CSS</em>.
Visit <a href="#">my website</a> today.
</p>
<!-- RESULT (all on one line): -->
I love HTML and CSS. Visit my website today.
Block Elements Inline Elements
Start on a new line Stay on the same line
Take full width by default Take only as much width as needed
Can contain block & inline elements Should only contain inline elements or text
Can set width, height, margin, padding Cannot set width or height directly (use
display:inline-block)
Examples: <div> <p> <h1> <ul> Examples: <span> <a> <strong> <img>
Key Rule for Nesting
You CAN put inline elements inside block elements (e.g. <p><span>text</span></p>). But
you should NOT put block elements inside inline elements (e.g. WRONG:
<span><div>text</div></span>).
6. Quick Reference Summary
Concept Key Point
<header> Top of page — logo, nav bar, title
<main> Main content — only ONE per page
<footer> Bottom of page — copyright, links
Semantic Tags & SEO Google ranks pages with semantic structure
higher
<a href='...'> Creates a hyperlink
target='_blank' Opens link in a new tab
rel='noopener noreferrer' Security attribute — always pair with _blank
<div> Block container — groups sections
<span> Inline container — wraps text for styling
Block element Starts on new line, takes full width
Inline element Stays on same line, takes only content width
7. Practice Set
Beginner
• Task 1: Create a basic HTML page with <header>, <main>, and <footer>. Put your
name in the header, a short paragraph about yourself in main, and a copyright line in the
footer.
• Task 2: Add 3 links to the page: one external (opens in a new tab), one internal (goes to
another page), and one that jumps to a section on the same page.
• Task 3: Write a paragraph that uses <span> to make one word red and another word
bold.
Intermediate
• Task 4: Build a navigation bar using <header> + <nav> + multiple <a> links. Style it so
links are side by side (hint: they are already inline).
• Task 5: Create 3 cards using <div> tags. Each card should have a title, a description,
and a 'Read More' link.
• Task 6: Explain in your own words: why does placing <div> inside <span> break the
layout? Test it in the browser.
Advanced / Challenge
• Task 7: Build a full page layout: header (with nav), main (with article + aside sidebar),
and footer. Use only semantic tags — no divs for major sections.
• Task 8 (Interview Level): A junior developer's site is not appearing on Google. You
check the code and find they used only <div> tags for all sections. Write a short
explanation (as if explaining to them) about WHY this hurts SEO, and refactor their
<div>-heavy code to use semantic tags.
Consistency > Perfection
Build logic before frameworks. Learn by doing.