Day 1 of my HTML Learning Series
When I started learning HTML, I initially practiced individual tags and small examples. But after learning different concepts, I wanted to understand one important thing:
Can I bring everything I learned together into one complete website?
So I created an HTML-only multi-page website.
No CSS.
No JavaScript.
Just HTML. 💻
This project helped me understand how HTML works when building something closer to a real website.
🏗️ Project Structure
My website contains different pages for different sections:
- Home
- Introduction
- About Me
- Education
- Skills
- Projects
- Media
- HTML Concepts
- Contact
I connected all these pages using HTML links.
For example:
<nav aria-label="Main navigation">
<a href="index.html">Home</a>
<a href="intro.html">Introduction</a>
<a href="about.html">About Me</a>
<a href="education.html">Education</a>
<a href="skills.html">Skills</a>
<a href="projects.html">Projects</a>
<a href="media.html">Media</a>
<a href="contact.html">Contact</a>
</nav>
This taught me that a website doesn't have to be a single HTML file. Multiple pages can be connected through hyperlinks.
🧱 Using Semantic HTML
One of the important things I practiced was semantic HTML.
Instead of putting everything inside <div> elements, I used elements that describe the meaning of the content:
<header>
<h1>Welcome to My HTML Website</h1>
<nav>
...
</nav>
</header>
<main>
<section>
<h2>Hello!</h2>
<p>My content goes here.</p>
</section>
<section>
<h2>My Projects</h2>
...
</section>
</main>
<footer>
...
</footer>
Some semantic elements I used are:
<header><nav><main><section><article><footer><figure><figcaption><address>
These elements make the structure of a webpage easier to understand.
📝 <section> vs <article>
I also practiced the difference between <section> and <article>.
For example, on my projects page:
<article>
<h2>Expense Tracker</h2>
<p>A project idea for recording expenses and spending totals.</p>
</article>
<article>
<h2>Library Management</h2>
<p>A project focused on managing books and library records.</p>
</article>
Each project is treated as an individual piece of content, so <article> makes sense here.
🖼️ Images with Alternative Text
I added images using the <img> element:
<img src="assets/img.jpeg"
alt="Durga Devi"
width="220">
The alt attribute is important because it provides alternative text when an image cannot be displayed and also helps accessibility.
I also practiced <figure> and <figcaption>:
<figure>
<img src="assets/img.jpeg"
alt="Durga Devi"
width="220">
<figcaption>My learning journey with HTML</figcaption>
</figure>
🔗 Different Types of Links
My project also contains different kinds of links.
External link
<a href="https://www.google.com/" target="_blank">
Google
</a>
Email link
<a href="mailto:abc@gmail.com">
Email me
</a>
Internal page link
<a href="about.html">
About Me
</a>
This helped me understand the difference between navigating inside a website and linking to another website.
📱 Basic Mobile-Friendly Setup
I included the viewport meta tag in my pages:
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
This is important for making the page's layout behave properly on different screen sizes.
🔍 Description Meta Tag
On my home page, I also used:
<meta name="description"
content="Durga Devi's HTML-only personal website and HTML learning portfolio.">
This was my introduction to the idea that HTML isn't only about visible content. The <head> section also contains important information about a webpage.
🧠 What I Learned
Building this project helped me understand HTML more practically.
I learned:
- How multiple HTML pages work together
- How internal navigation works
- Why semantic elements are useful
- How images and links are added
- How to structure a webpage using meaningful elements
- The purpose of metadata
- The importance of
alttext - How HTML can create a complete website even without CSS or JavaScript
🚀 What's Next?
This project gave me a strong HTML foundation.
But the website currently looks very basic because I intentionally built it using HTML only.
My next step is to learn CSS and use it to improve:
- Layout
- Colors
- Typography
- Spacing
- Flexbox
- Grid
- Responsive design
This project was not just about writing HTML tags.
It was about understanding how those tags work together to create a website.
Day 1 complete. ✅
