HTML Tutorial for Beginners (2025)

Complete HTML Tutorial for Beginners

Let's start with the basics. HTML stands for HyperText Markup Language, and it is the fundamental building block of the web. When you visit a website, what you’re seeing behind the scenes is HTML. It gives structure to content—text, images, links, and more. You can think of HTML as the skeleton of a webpage. It doesn’t handle how things look (that’s CSS) or how they behave (that’s JavaScript), but it defines what content exists and how it's organized. Every webpage you’ve seen was created with HTML at its core.

1. What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It structures content such as headings, paragraphs, images, and links.

2. Basic HTML Structure

Now let’s build the foundation of a webpage. Every HTML document starts with a <!DOCTYPE html> declaration, which tells the browser to use the latest HTML standard. Inside the <html> tag, we place two main sections: <head> and <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

The <head> contains meta-information like the page title and character encoding. The <body> is where the visible content—headings, text, images—goes. Once you've written this structure, you’ve got yourself a valid HTML page.

3. Headings & Paragraphs

We use headings to define titles and subheadings in our content. HTML provides six levels of headings: <h1> is the most important, usually used once per page for the main title, and <h6> is the least important. It’s good practice to structure your headings logically—like outlining an article.

Paragraphs, written with the <p> tag, hold chunks of text. These make your content readable and organized. Think of it as writing in a document—you use paragraphs to break up thoughts, and headings to label them.

<h1>Main Heading</h1>
<p>This is a paragraph.</p>

4. Links & Images

To create navigation or reference other pages, we use the <a> (anchor) tag. It’s how hyperlinks are created. You can link to another site, or even another section on your page using href attributes.

Images, on the other hand, are embedded with the <img> tag. It’s self-closing, and you must specify the source with src and describe the image with alt text—which is important for accessibility and SEO.

<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="My Image" />

5. Lists (Ordered & Unordered)

HTML supports two types of lists: ordered and unordered. Ordered lists (<ol>) are numbered, and are perfect when sequence matters—like steps in a process. Unordered lists (<ul>) are bulleted, ideal for collections of related items without a particular order—like ingredients or tools.

Each item inside the list is wrapped in an <li> (list item) tag. Lists make information more digestible and structured.

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

6. Tables

To display data in a grid-like format, HTML tables are used. They’re made using the <table> tag. Inside it, <tr> defines a row, <th> defines a header cell, and <td> defines a data cell.

Tables can be very helpful for comparing information or organizing content like schedules or pricing charts. However, be mindful—modern layouts often avoid tables for page design, sticking to CSS for that purpose.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

7. Forms

Forms are how we gather input from users. Whether it’s logging in, signing up, or sending feedback—forms handle it all. The <form> tag wraps the inputs, and you define where the data goes using action and method attributes.

You’ll usually include <input> elements for text fields, checkboxes, radios, and a submit button. Forms are a crucial part of interactive websites.

<form action="/submit" method="post">
  <label>Name:</label>
  <input type="text" name="name" />
  <input type="submit" value="Submit" />
</form>

8. Semantic Tags

Semantic HTML helps browsers and developers understand the role of each section. Tags like <header>, <footer>, <article>, and <nav> are descriptive and meaningful.
Instead of using generic <div> tags everywhere, semantic elements improve readability, SEO, and accessibility. For example, screen readers can easily identify a <nav> section as the navigation menu.

<header>Site Header</header>
<nav>Navigation Menu</nav>
<article>Main Content</article>
<footer>Site Footer</footer>

9. Comments

Comments in HTML are written like this: . They’re not shown on the webpage but serve as notes to yourself or others who might read the code later.

It’s good practice to use comments for complex sections or to indicate which part of the code does what. Think of it as leaving helpful breadcrumbs in your code.

<!-- This is a comment -->

10. Best Practices

Use semantic HTML: It enhances meaning and accessibility.
Maintain indentation: Proper formatting makes code easier to read and debug.
Always use alt attributes for images: They help screen readers and are displayed if images don’t load.
Validate your code: Before publishing, use tools like the W3C Validator to ensure your HTML is error-free and standards-compliant.

Code copied!