TechTicket
HTML Fundamentals
Welcome to your final session of HTML Fundamentals! You've learned how to add text, images, links, lists, and tables. But real websites don't just stack everything in one giant column. They have headers, footers, and sidebars.
Today, you will learn how to structure a professional web page. You will learn:
<div> (the invisible box) to group content.<span> and formatting tags to style specific words.Before we dive into layouts, let's remember what we learned about organizing data:
<ul> and <ol> with <li> to create lists.<table>, <tr>, <th>, and <td> to build grids for data.<) to type special symbols without breaking our code.Think about your favorite website, like YouTube or a gaming wiki. Everything is divided into neat, organized sections.
Usually, a website is split into these main parts:
How do we build these boxes in HTML? We use a tag called div!
<div> ElementThe <div> element stands for Division. It is an invisible container used to group other HTML elements together.
Imagine a <div> as an empty cardboard box. You can put headings, paragraphs, and images inside that box to keep them all together. This makes it super easy to style sections later using CSS!
<!-- This div groups the "About Me" section together -->
<div>
<h2>About Me</h2>
<p>My name is Alex and I love coding.</p>
</div>
<!-- This div groups the "Hobbies" section -->
<div>
<h2>My Hobbies</h2>
<ul>
<li>Gaming</li>
<li>Skateboarding</li>
</ul>
</div>1. We open the first <div>. Everything after this is "inside the box".
2. We add an h2 and a p element.
3. We close the box with </div>. The "About Me" section is complete.
4. We create a second, separate <div> for the Hobbies list. Now the two sections are cleanly separated!
<span> and Formatting ElementsA <div> is a "Block" element. It stacks like blocks on top of each other. But what if you want to highlight just one specific word inside a paragraph without breaking it onto a new line?
For this, we use Inline Elements like <span>.
A <span> is a mini-container for text. By itself, it does nothing, but it allows you to target specific words. HTML also gives us built-in inline formatting tags:
<b> makes text bold.<i> makes text italic.<u> makes text underlined.<mark> makes text highlighted.<p>My favorite color is <span style="color: blue;">blue</span>.</p>
<p>Warning: Do <b>NOT</b> press the <mark>red button</mark>!</p>Using <div> for everything works, but it makes the code hard to read. Imagine opening a document and seeing 50 <div> tags. You wouldn't know which one is the header and which is the footer!
Semantic HTML solves this. "Semantic" means "having meaning." Instead of using blank <div> boxes, we use tags that describe exactly what is inside them.
<header>: Replaces the top div.
<nav>: Holds your navigation links.
<main>: Holds the primary content.
<footer>: Replaces the bottom div.
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I am a programmer!</p>
</section>
</main>
<footer>
<p>© 2026 TechTicket</p>
</footer>
</body>Using semantic tags makes your code cleaner, helps search engines (like Google) understand your site, and makes it accessible for screen readers!
Open your code editor. Let's put your new layout skills to the test!
Create a blank HTML page. Use semantic tags to create a <header> with an `h1` title, and a <footer> with a simple copyright paragraph. Leave the middle blank for now.
<header> directly below the opening <body> tag, and the <footer> right above the closing </body> tag.
In the middle of your page (between header and footer), use two <div> containers. Make the first div an "About Me" section, and the second div a "My Hobbies" section.
<div> <h2>About Me</h2> <p>...</p> </div>
Inside your "About Me" paragraph, use the <b> tag to make your name bold, and use the <mark> tag to highlight your favorite word.
<p>My name is <b>Alex</b> and I <mark>love</mark> gaming.</p>
This is it! Time to use everything you've learned in the course to build a complete, properly structured personal website.
Your page must include all of the following in this order:
<header> with your name in an <h1>.<main> container that holds everything else.<section> with a paragraph.<section> containing an Unordered List (<ul>) of your favorite things.<img> of something you like (a game, animal, sport).<footer> with a copyright symbol (©) and the current year.<body>
<header>
<h1>Welcome to Sarah's World</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I am learning <b>HTML</b> at TechTicket!</p>
</section>
<section>
<h2>My Favorites</h2>
<ul>
<li>Coding</li>
<li>Pizza</li>
</ul>
<img src="pizza.jpg" width="300">
</section>
</main>
<footer>
<p>© 2026 Sarah. All rights reserved.</p>
</footer>
</body>Take your Mini Project website and turn it into a masterpiece to show your friends and family!
Improve your website by adding:
<section> that contains a Table of your favorite movies or shows.<header> using <a> links.Let's review the final concepts you've mastered today:
<div>: A block container used to group elements together like an invisible box.<span> & Formatting: Inline tags used to style or highlight specific words without breaking the sentence (<b>, <i>, <mark>).<header>, <main>, and <footer> that act exactly like divs, but have clear meaning for search engines and screen readers!Congratulations on completing HTML Fundamentals!