Frontend Interview Handbook2 min read

HTML Fundamentals | All In One Guide For Beginners

HTML Guide For Beginners

Although this platform helps you prepare for frontend interviews, you cannot prepare for advanced questions without first brushing up on your basics. Use it to review HTML fundamentals before moving on, and keep MDN’s HTML reference handy.

This guide will walk you through the basics of HTML step by step, with simple examples you can follow along with. No fancy setup, no prior experience required. Just you, your browser, and a little curiosity.

What is HTML?

HTML stands for HyperText Markup Language. It’s how we structure content on the web. Think of it like the skeleton of a webpage. Everything you see on a site — headings, paragraphs, images, links — it all starts with HTML.

Let’s Start with a Basic Page

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

What this does:

  • <html> wraps everything on the page
  • <head> contains stuff like the title and metadata
  • <body> holds all the visible content
  • <h1> is a heading, and <p> is a paragraph

Adding Images

Images are added with the <img> tag. You need a source (src) and alternate text (alt):

<img src="https://placekitten.com/300/200" alt="A cute kitten" />

That will show a 300×200 kitten on your page.

Want to link to another website? Use the <a> tag:

<a href="https://frontendlead.com">Visit FrontendLead</a>

That creates a clickable link. You can link to other pages, documents, or even email addresses.

Using Lists

You can create two types of lists: ordered and unordered.

Unordered list (bullets):

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered list (numbers):

<ol>
  <li>Wake up</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

Divs and Spans

These are general-purpose containers.

<div> is a block-level element. Think of it like a box.

<div>
  <h2>My Section</h2>
  <p>This is inside a div.</p>
</div>

<span> Is inline. Suitable for styling small pieces of text.

<p>This is a <span style="color:red">red word</span> in a sentence.</p>

Creating a Form

Forms are how users interact with your site. Here’s a simple one:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" />
  <br />
  <button type="submit">Submit</button>
</form>

This creates a small form with text and email fields, along with a submit button.

Adding a Table

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

This gives you a simple table with a header and two rows of data.

Pro Tip: Use Semantic Tags

Instead of wrapping everything in a <div>HTML5 gives us semantic tags that help define meaning. Here are a few:

  • <header> – page or section header
  • <nav> – navigation links
  • <main> – main content
  • <footer> – bottom content or links

How to Practice HTML Fundamentals

  • Use a free tool like CodePen or JSFiddle
  • Start small — build a profile card, a contact form, or a personal homepage
  • Search for “HTML beginner projects” and pick one to recreate

Final Thoughts

HTML is the starting point for everything in web development. It’s super beginner-friendly, and with just a few tags, you can already build something that feels real.

Once you’re comfortable with HTML, the next natural step is learning CSS to style your page and JavaScript to make it interactive.

Let’s now move on to learning CSS.