FREE LEARNING RESOURCE

HTML Fundamentals: Build Your First Web Page

Learn the language that gives every webpage its structure. Follow short lessons, study working examples and finish with a personal profile project.

Start Learning View Mini Project
  • No experience required
  • Practical examples
  • Mobile friendly
index.html
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello!</h1>
    <p>My first page.</p>
  </body>
</html>

YOUR LEARNING PATH

From an empty file to a structured webpage

Complete the lessons in order. Each concept prepares you for the next one.

01

Understand

Learn what HTML does and how browsers read it.

02

Structure

Use elements, attributes and semantic sections.

03

Practice

Create text, links, images, lists, tables and forms.

04

Build

Combine everything in a personal profile page.

12 BEGINNER LESSONS

Learn one concept at a time

Open a lesson, read the explanation, copy the example and complete the practice task.

01

What is HTML?

The structure of a webpage

HTML means HyperText Markup Language. It uses elements to describe headings, paragraphs, images, links and other parts of a webpage. HTML creates structure; CSS controls appearance; JavaScript adds behaviour.

HTMLStructure
CSSPresentation
JavaScriptBehaviour
Try it yourself

Create a folder named my-first-page and add a file named index.html.

02

HTML Document Structure

The essential starting template

Every page begins with a document type and contains an html element. Information for the browser belongs in head; visible page content belongs in body.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is my first HTML page.</p>
</body>
</html>
Common mistake

Saving the file as index.html.txt. Make sure its extension is exactly .html.

03

Elements, Tags and Attributes

How HTML instructions are written

An element normally contains an opening tag, content and a closing tag. Attributes add information to an element.

<p title="About me">I am learning HTML.</p>
<a href="https://example.com">Visit Example</a>
Try it yourself

Identify the element, content and attribute in both examples.

04

Text and Headings

Organise readable content

Use headings in a meaningful hierarchy. Use paragraphs for normal text and strong or em when the meaning requires importance or emphasis.

<h1>My Portfolio</h1>
<h2>About Me</h2>
<p>I am learning <strong>web development</strong>.</p>
<hr>
<p><em>Practice every day.</em></p>
<!-- This comment is not visible on the page -->
Common mistake

Choosing headings because of their size. Use headings for structure; use CSS later for size.

05

Links and Images

Connect pages and add meaningful visuals

The a element creates a link. The img element displays an image; its alt text explains the image when it cannot be seen.

<a href="https://example.com" target="_blank" rel="noopener">
  Visit my portfolio
</a>

<img src="images/profile.jpg"
     alt="Portrait of Ashish Kumar Patel"
     width="300" height="300">
Try it yourself

Add one local image and one external link to your page.

06

Lists

Present related information clearly

Use an unordered list when sequence does not matter and an ordered list for steps or rankings.

<h2>Skills</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

<h2>Learning Path</h2>
<ol>
  <li>Learn HTML</li>
  <li>Practice CSS</li>
  <li>Build with JavaScript</li>
</ol>
07

Tables

Display genuinely tabular data

A table contains rows, header cells and data cells. Use tables for data—not for arranging the page layout.

<table>
  <caption>Weekly Learning Schedule</caption>
  <tr>
    <th>Day</th>
    <th>Topic</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>HTML</td>
  </tr>
</table>
Try it yourself

Add two more learning days to the table.

08

Forms

Collect information from a visitor

Labels describe fields and make forms easier to use. The example below shows structure only; processing submitted data requires a server or form service.

<form>
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send</button>
</form>
09

Semantic HTML

Give each part a meaningful role

Semantic elements describe their purpose to browsers, developers and assistive technologies.

<header>Logo and page heading</header>
<nav>Main navigation links</nav>
<main>
  <section>
    <h2>My Projects</h2>
    <article>Project details</article>
  </section>
</main>
<footer>Copyright information</footer>
10

Block and Inline Elements

Understand normal page flow

Block elements normally begin on a new line, while inline elements flow within surrounding text.

Block

div, p, section, h2

Inline

a, span, strong, em

11

Entities and Special Characters

Display reserved characters safely

Some characters have special meaning in HTML. Entities let you display them as text.

&lt; displays <
&gt; displays >
&amp; displays &
&copy; displays ©
12

Check and Improve Your HTML

Build reliable habits
  • Use one clear main heading.
  • Nest elements correctly.
  • Add meaningful alternative text.
  • Connect every label to its form field.
  • Use semantic elements where appropriate.
  • Indent code consistently.
  • Test links and file paths.
  • Validate HTML before publishing.

MINI PROJECT

Build a personal profile page

Combine headings, images, links, lists, tables, forms and semantic HTML in one practical page.

PROJECT 01

Your page should include

  1. A meaningful page title
  2. Header with your name
  3. Profile image and introduction
  4. Skills list
  5. Learning schedule table
  6. Contact form
  7. Footer and copyright
Challenge

Replace every sample value with your own information and add one new section without copying the example.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Profile</title>
</head>
<body>
  <header>
    <h1>Your Name</h1>
    <p>Aspiring Full Stack Developer</p>
  </header>

  <main>
    <section>
      <h2>About Me</h2>
      <img src="profile.jpg" alt="Portrait of Your Name" width="200">
      <p>I enjoy learning how websites are built.</p>
    </section>

    <section>
      <h2>Skills</h2>
      <ul>
        <li>HTML</li>
        <li>Problem solving</li>
      </ul>
    </section>

    <section>
      <h2>Contact</h2>
      <form>
        <label for="visitor-name">Name</label>
        <input id="visitor-name" type="text" required>
        <button type="submit">Send</button>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Your Name</p>
  </footer>
</body>
</html>

KNOWLEDGE CHECK

Test your HTML fundamentals

Choose one answer for every question, then check your score.

1. What is the primary purpose of HTML?
2. Which element creates a link?
3. Which attribute describes an image?
4. Where does visible page content belong?
5. Which is a semantic element?

WHAT COMES NEXT?

HTML gives structure. CSS makes it presentable.

HTML→CSS→JavaScript→React→MERN

LEARN WITH PERSONAL GUIDANCE

Want to build real projects—not just read tutorials?

Join the Full Stack Development program in Nagpur. Five months • Three days weekly • Evening batch.

Contact on WhatsApp

Ashish Kumar Patel · Technology Professional and Educator

© 2026 Ashish Kumar Patel. All Rights Reserved.

This material is intended for educational purposes. Technology standards and browser behaviour may change; learners should also consult current official documentation.