HTML Grouping,
Semantics and
Navigation
What is a div?
<div> = division
A block-level element used to group other elements
Doesn’t add style by default — used for layout and structure
<div>
<h2>My Profile</h2>
<p>I love coding and drawing.</p>
</div>
2
What is a span?
<span> is an inline element
Used to group small portions of text (usually for highlighting or styling)
<p>I enjoy <span>reading</span> and <span>skating</span>.</p>
3
What is are HTML5 Semantic Tags?
Semantic tags describe the meaning of the content inside them.
They make your code easier to read and improve accessibility.
Examples:
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
4
Common HTML5 Semantic Tags?
<header>
Top of a page or section
<nav>
Contains links (navigation)
<main>
Main content
<section>
Thematic grouping
<article>
Independent content like blog post
<aside>
Sidebar or extra info
<footer> 5
Bottom of page or section
Common HTML5 Semantic Tags?
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Me</a>
</nav>
<main>
<section>
<h2>Latest Post</h2>
<article>
<h3>Learning HTML</h3>
<p>HTML is the structure of the web.</p>
</article>
</section>
</main>
<footer>
<p>© 2025 My Blog</p>
</footer> 6
Linking HTML Pages?
Use the <a> tag to link to other pages.
<a href="about.html">Go to About Page</a>
● href is the path to the page you want to link
● If the file is in the same folder, just use the filename
7
What Next?
Mini Project to build a personal website
Refer to document for instructions
Timeline: 1 week
8
Self Evaluation
● What is the internet?
● What is the web, and how is it different from the internet?
● What is a client? Give examples.
● What is a server? What does it do?
● What happens when you type a web address in your browser?
