Goswami Digital WorldBlog & Insights
All PostsMain SiteContact Us
← All Posts·Web Development

HTML for Beginners — A Complete Guide from Zero to Hero

Learn HTML from scratch. A complete beginner's guide covering structure, tags, forms, tables, semantic HTML, and best practices.

A
Ankur Goswami
20 January 2026 · 13 min read
👁views|
❤️likes|
🔗shares
#html#web#beginners#frontend

What is HTML?

HTML stands for HyperText Markup Language. It is the skeleton of every webpage you have ever visited. HTML tells the browser what is on the page — a heading, a paragraph, an image, a link, a form. It does not control how things look (that's CSS) or how things behave (that's JavaScript). It purely defines structure and content.

Every browser — Chrome, Firefox, Safari, Edge — knows how to read HTML and render it as a visual page. When you open a website, your browser downloads an HTML file and draws the page based on the tags inside it.

How HTML Works — The Big Picture

HTML is made of elements. An element usually has:

  1. An opening tag — <tagname>
  2. Content — the actual text or nested elements
  3. A closing tag — </tagname>
<p>This is a paragraph.</p>

Here <p> is the opening tag, This is a paragraph. is the content, and </p> is the closing tag. Together they form a paragraph element.

Some elements are self-closing — they have no content and no closing tag:

<img src="photo.jpg" alt="A photo" />
<br />
<input type="text" />
<hr />

Your First HTML Page

Every HTML document follows the same basic structure:

<!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>Hello, World!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

Let's break down every line:

Line What it does
<!DOCTYPE html> Tells the browser this is an HTML5 document
<html lang="en"> Root element — wraps everything. lang helps screen readers and search engines
<head> Contains metadata — not visible on the page
<meta charset="UTF-8"> Supports all characters including emojis and non-English text
<meta name="viewport" ...> Makes the page mobile-responsive
<title> Text shown in the browser tab
<body> Everything visible on the page goes here

Text Elements — Headings and Paragraphs

Headings

HTML has six levels of headings — <h1> to <h6>. <h1> is the most important (largest), <h6> is the least important (smallest).

<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Sub-subsection</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

Important rule: Use only one <h1> per page. It represents the main topic of the page — important for SEO. Use <h2> to <h6> for the hierarchy of sections beneath it.

Paragraphs

<p>This is a paragraph. Browsers automatically add space above and below paragraphs.</p>
<p>This is a second paragraph. Each paragraph starts on a new line.</p>

Line break and horizontal rule

<p>Line one.<br />Line two — same paragraph, new line.</p>

<hr />  <!-- A horizontal divider line -->

Text Formatting Tags

<strong>Bold text</strong>             <!-- Semantic: important -->
<b>Bold text</b>                       <!-- Visual: just bold styling -->

<em>Italic text</em>                   <!-- Semantic: emphasis -->
<i>Italic text</i>                     <!-- Visual: just italic styling -->

<u>Underlined text</u>
<s>Strikethrough text</s>
<mark>Highlighted text</mark>

<small>Small fine print</small>
<sup>x<sup>2</sup></sup>              <!-- Superscript: x² -->
<sub>H<sub>2</sub>O</sub>             <!-- Subscript: H₂O -->

<code>console.log("inline code")</code>

<pre>
  Preformatted text
  preserves spaces and line breaks
  exactly as written
</pre>

<blockquote cite="https://example.com">
  This is a blockquote — used for long quotations from external sources.
</blockquote>

<abbr title="HyperText Markup Language">HTML</abbr>

Use <strong> and <em> over <b> and <i> — they carry semantic meaning (importance, emphasis) which helps screen readers and SEO. <b> and <i> are purely visual.

Links — The <a> Tag

Links are how the web connects. The <a> (anchor) tag creates a hyperlink.

<!-- Link to another website -->
<a href="https://google.com">Go to Google</a>

<!-- Open in a new tab -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">Open in new tab</a>

<!-- Link to another page on your site -->
<a href="/about">About Us</a>
<a href="/blog/my-post">Read My Post</a>

<!-- Link to a section on the same page (anchor link) -->
<a href="#contact">Jump to Contact</a>

<!-- The target section needs a matching id -->
<section id="contact">
  <h2>Contact Us</h2>
</section>

<!-- Email link -->
<a href="mailto:hello@example.com">Send Email</a>

<!-- Phone link (useful on mobile) -->
<a href="tel:+919876543210">Call Us</a>

<!-- Download link -->
<a href="/files/resume.pdf" download>Download Resume</a>

Always add rel="noopener noreferrer" when using target="_blank" — it prevents a security vulnerability where the opened page could access your page via window.opener.

Images — The <img> Tag

<!-- Basic image -->
<img src="photo.jpg" alt="A description of the photo" />

<!-- Image from the web -->
<img src="https://example.com/image.png" alt="Example image" />

<!-- Always set width and height to prevent layout shift -->
<img src="logo.png" alt="Company Logo" width="200" height="80" />

<!-- Lazy load images below the fold -->
<img src="footer-banner.jpg" alt="Banner" loading="lazy" />

<!-- Wrapping an image in a link -->
<a href="/about">
  <img src="team.jpg" alt="Our team" width="600" height="400" />
</a>

The alt attribute is not optional. It is read by screen readers for visually impaired users, displayed when the image fails to load, and used by search engines to understand the image. If an image is purely decorative, use alt="" — don't omit it.

Lists

Unordered list — bullet points

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

Ordered list — numbered

<ol>
  <li>Download VS Code</li>
  <li>Create a new file</li>
  <li>Save as index.html</li>
  <li>Open in browser</li>
</ol>

Ordered list with custom start

<ol start="5">
  <li>Step five</li>
  <li>Step six</li>
</ol>

Description list — term + definition

<dl>
  <dt>HTML</dt>
  <dd>The structure of a webpage</dd>

  <dt>CSS</dt>
  <dd>The styling of a webpage</dd>

  <dt>JavaScript</dt>
  <dd>The behavior of a webpage</dd>
</dl>

Nested lists

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Tables

Tables are for tabular data — not for layout (that's what CSS Grid and Flexbox are for).

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ankur Goswami</td>
      <td>Frontend Developer</td>
      <td>Engineering</td>
    </tr>
    <tr>
      <td>Priya Sharma</td>
      <td>Designer</td>
      <td>Design</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total employees: 2</td>
    </tr>
  </tfoot>
</table>

Key table elements:

Tag Purpose
<table> The table container
<thead> Header section of the table
<tbody> Body — the main data rows
<tfoot> Footer row(s)
<tr> Table row
<th> Table header cell — bold and centered by default
<td> Table data cell
colspan="N" Cell spans N columns
rowspan="N" Cell spans N rows

Forms — Collecting User Input

Forms are how users send data to a server — login, signup, search, contact, checkout.

<form action="/submit" method="POST">

  <!-- Text input -->
  <label for="name">Full Name</label>
  <input type="text" id="name" name="name" placeholder="Ankur Goswami" required />

  <!-- Email input -->
  <label for="email">Email Address</label>
  <input type="email" id="email" name="email" placeholder="hello@example.com" required />

  <!-- Password input -->
  <label for="password">Password</label>
  <input type="password" id="password" name="password" minlength="8" required />

  <!-- Number input -->
  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="1" max="120" />

  <!-- Textarea — multiline text -->
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" cols="40" placeholder="Write your message..."></textarea>

  <!-- Dropdown select -->
  <label for="country">Country</label>
  <select id="country" name="country">
    <option value="">-- Select a country --</option>
    <option value="in">India</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
  </select>

  <!-- Radio buttons — pick one -->
  <fieldset>
    <legend>Gender</legend>
    <label><input type="radio" name="gender" value="male" /> Male</label>
    <label><input type="radio" name="gender" value="female" /> Female</label>
    <label><input type="radio" name="gender" value="other" /> Other</label>
  </fieldset>

  <!-- Checkboxes — pick multiple -->
  <fieldset>
    <legend>Skills</legend>
    <label><input type="checkbox" name="skills" value="html" /> HTML</label>
    <label><input type="checkbox" name="skills" value="css" /> CSS</label>
    <label><input type="checkbox" name="skills" value="js" /> JavaScript</label>
  </fieldset>

  <!-- File upload -->
  <label for="photo">Upload Photo</label>
  <input type="file" id="photo" name="photo" accept="image/*" />

  <!-- Hidden input — sends data silently -->
  <input type="hidden" name="form_id" value="contact_form" />

  <!-- Submit button -->
  <button type="submit">Submit Form</button>
  <button type="reset">Clear Form</button>

</form>

Important form attributes:

Attribute What it does
action URL where the form data is sent
method GET (data in URL) or POST (data in body)
name Identifies the field when data is sent to server
id Links <label for="..."> to the input
required Field must be filled before submit
placeholder Hint text shown inside empty input
disabled Input cannot be interacted with
readonly Input visible but not editable

Semantic HTML — Write HTML That Means Something

Semantic elements clearly describe their purpose — both to humans reading the code and to browsers, screen readers, and search engines.

Non-semantic vs Semantic

<!-- ❌ Non-semantic — tells us nothing -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">
  <div class="article">...</div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<!-- ✅ Semantic — self-documenting -->
<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Complete semantic page structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Blog</title>
</head>
<body>

  <header>
    <a href="/" class="logo">My Blog</a>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Understanding Semantic HTML</h1>
        <time datetime="2026-01-20">January 20, 2026</time>
        <address>By <a href="/author/ankur">Ankur Goswami</a></address>
      </header>

      <section>
        <h2>Why Semantics Matter</h2>
        <p>Semantic HTML improves accessibility, SEO, and code readability.</p>
        <figure>
          <img src="semantic-diagram.png" alt="Diagram of semantic HTML structure" />
          <figcaption>The semantic structure of a modern webpage.</figcaption>
        </figure>
      </section>

      <section>
        <h2>Key Semantic Elements</h2>
        <p>Let us look at the most important ones...</p>
      </section>

      <footer>
        <p>Tags: <a href="/tag/html">HTML</a>, <a href="/tag/semantics">Semantics</a></p>
      </footer>
    </article>

    <aside>
      <h2>Related Posts</h2>
      <ul>
        <li><a href="/css-basics">CSS Basics</a></li>
        <li><a href="/js-intro">JavaScript Intro</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Blog. All rights reserved.</p>
  </footer>

</body>
</html>

Semantic element reference

Element Purpose
<header> Introductory content — page header or section header
<nav> Navigation links
<main> Primary content — only one per page
<article> Self-contained content — blog post, news article
<section> Thematic grouping of content with a heading
<aside> Content tangentially related — sidebar, callout
<footer> Footer for page or section
<figure> Self-contained media (image, diagram, code)
<figcaption> Caption for a <figure>
<time> A date/time value
<address> Contact information
<details> Collapsible content
<summary> Visible heading for <details>

HTML Attributes You Must Know

<!-- id — unique identifier for one element -->
<div id="hero-section">...</div>

<!-- class — reusable identifier for multiple elements -->
<p class="text-gray intro-text">...</p>

<!-- style — inline CSS (avoid in production, use for quick tests) -->
<p style="color: red; font-size: 18px;">Red text</p>

<!-- data-* — store custom data on elements, read with JavaScript -->
<button data-user-id="42" data-action="delete">Delete</button>

<!-- title — tooltip on hover -->
<abbr title="Cascading Style Sheets">CSS</abbr>

<!-- tabindex — control keyboard tab order -->
<div tabindex="0">Focusable div</div>

<!-- hidden — hides element from page and screen readers -->
<div hidden>This won't be visible</div>

<!-- contenteditable — makes element editable -->
<p contenteditable="true">Click to edit this text.</p>

<!-- spellcheck -->
<textarea spellcheck="true"></textarea>

<!-- draggable -->
<div draggable="true">Drag me</div>

HTML Entities — Special Characters

Some characters have special meaning in HTML and need to be escaped:

Character Entity Use when
< &lt; Displaying code or less-than sign
> &gt; Displaying code or greater-than sign
& &amp; Literal ampersand
" &quot; Quote inside attribute value
© &copy; Copyright symbol
® &reg; Registered trademark
™ &trade; Trademark
&nbsp; Non-breaking space
→ &rarr; Right arrow
← &larr; Left arrow 
<p>5 &lt; 10 and 10 &gt; 5</p>
<p>&copy; 2026 Ankur Goswami</p>
<p>First&nbsp;Last</p>  <!-- Keeps "First Last" on same line -->

The <head> — Everything That Happens Behind the Scenes

<head>
  <!-- Character encoding — always first -->
  <meta charset="UTF-8" />

  <!-- Viewport for mobile responsiveness -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Page title — shown in tab and search results -->
  <title>Page Title | Site Name</title>

  <!-- Meta description — shown in Google search results -->
  <meta name="description" content="A 150-160 character description of this page." />

  <!-- Author -->
  <meta name="author" content="Ankur Goswami" />

  <!-- Open Graph — for social media sharing -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Description for social cards" />
  <meta property="og:image" content="https://example.com/og-image.png" />
  <meta property="og:url" content="https://example.com/this-page" />

  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

  <!-- Link external CSS -->
  <link rel="stylesheet" href="styles.css" />

  <!-- Canonical URL — tells Google the "official" URL for this page -->
  <link rel="canonical" href="https://example.com/this-page" />

  <!-- No-index — prevent search engines from indexing this page -->
  <meta name="robots" content="noindex, nofollow" />
</head>

Common Mistakes Beginners Make

1. Not closing tags

<!-- ❌ Wrong -->
<p>Paragraph one
<p>Paragraph two

<!-- ✅ Correct -->
<p>Paragraph one</p>
<p>Paragraph two</p>

2. Using <br> for spacing instead of CSS

<!-- ❌ Bad practice -->
<p>Section one</p>
<br /><br /><br />
<p>Section two</p>

<!-- ✅ Add margin/padding with CSS -->
<p style="margin-bottom: 2rem;">Section one</p>
<p>Section two</p>

3. Using <table> for page layout

<!-- ❌ Never do this -->
<table>
  <tr>
    <td>Sidebar</td>
    <td>Main content</td>
  </tr>
</table>

<!-- ✅ Use CSS Flexbox or Grid for layout -->
<div style="display: flex; gap: 2rem;">
  <aside>Sidebar</aside>
  <main>Main content</main>
</div>

4. Missing alt on images

<!-- ❌ Wrong -->
<img src="photo.jpg" />

<!-- ✅ Correct -->
<img src="photo.jpg" alt="Description of the photo" />

5. Using <b> and <i> instead of <strong> and <em>

<!-- ❌ Avoid for meaningful emphasis -->
<b>Important warning</b>
<i>Emphasized word</i>

<!-- ✅ Semantic and accessible -->
<strong>Important warning</strong>
<em>Emphasized word</em>

6. Nesting block elements inside inline elements

<!-- ❌ Invalid HTML — <p> inside <a> -->
<a href="/page">
  <p>Click here</p>
</a>

<!-- ✅ Correct — block inside block is fine -->
<div>
  <a href="/page">Click here</a>
</div>

Conclusion

HTML is the foundation of everything on the web. Every framework — React, Vue, Angular, Next.js — ultimately compiles down to HTML that the browser renders. Understanding HTML deeply makes you a better developer regardless of what you build with later.

The core ideas to remember:

  • HTML defines structure, not style or behavior
  • Use semantic elements — <header>, <nav>, <main>, <article>, <footer> — instead of generic <div> and <span> everywhere
  • Every <img> needs an alt attribute
  • Use <label> paired with every form <input>
  • The <head> is where SEO and metadata live
  • Validate your HTML at validator.w3.org

Once you're comfortable with HTML, the natural next step is CSS for styling and JavaScript for interactivity. But don't rush — a solid HTML foundation will pay dividends for your entire frontend career.

Enjoyed this post?
...
Share this post
💬𝕏inF
← Back to BlogWork With Us →