DEV Community

Cover image for # Building My First Multi-Page Website Using HTML Only 🚀
DurgaDevi
DurgaDevi

Posted on

# Building My First Multi-Page Website Using HTML Only 🚀

#webdev #devchallenge #github

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

🔗 Different Types of Links

My project also contains different kinds of links.

External link 

<a href="https://www.google.com/" target="_blank">
    Google
</a>
Enter fullscreen mode Exit fullscreen mode

Email link 

<a href="mailto:abc@gmail.com">
    Email me
</a>
Enter fullscreen mode Exit fullscreen mode

Internal page link 

<a href="about.html">
    About Me
</a>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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.">
Enter fullscreen mode Exit fullscreen mode

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 alt text
  • 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. ✅

HTML #WebDevelopment #FrontendDevelopment #LearningInPublic #HTML5 #100DaysOfCode

Top comments (0)