Before you build stunning websites, let’s revisit the foundation of HTML — the tags that make up every webpage. You’ve probably seen or used them before, but now we’ll explore how to use them properly and why they matter.
Let’s break it down, and you can even code along as you go.
1. <h1> to <h6> – Headings
Headings are like titles and subtitles in your content. Use them to organize your webpage and help both users and search engines understand the structure.
<h1>Welcome to My Website</h1>
<h2>About Me</h2>
<h3>My Skills</h3>
Try This: Replace "Welcome to My Website" with your name and see how it looks in the browser.
Tip: Use only one
<h1>per page for the main title. The others should follow a clear hierarchy.
2. <p> – Paragraphs
Use this tag to add text content to your page.
<p>I’m learning how to build websites using HTML and CSS. It’s exciting!</p>
Activity: Write a short paragraph about why you want to become a web developer using the <p> tag.
3. <ul>, <ol>, <li> – Lists
Use lists to display items neatly.
<ul>= Unordered List (bullets)<ol>= Ordered List (numbers)<li>= List Item
HTML Example:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Plan your website</li>
<li>Design the layout</li>
<li>Write the code</li>
</ol>
Challenge: Create a numbered list of the 3 goals you have for this course.
4. <a> – Links
Links let users jump from one page or site to another.
<a href="https://www.ntells.com" target="_blank">Visit nTells</a>
Test: Link to your favorite website and make it open in a new tab using target="_blank".
Tip: Always include
https://in external links.
5. <img> – Images
Images bring your content to life. Use the src to set the image and alt to describe it (for accessibility and SEO).
<img src="myphoto.jpg" alt="A smiling student learning web design" width="300">
Test: Add a fun image (can be local or from the internet) to your test webpage.
Tip: Always use descriptive
alttext in case the image doesn`t load.
Quick Practice Task - Put it all together.
Challenge: Customize the content above to tell your own web story.