HTML

   January 1, 2026

Every website you have ever visited—Google, Amazon, LinkedIn, Wikipedia—starts with HTML.

HTML stands for HyperText Markup Language.
It is not a programming language. Instead, it is a markup language used to structure content on the web.

Think of HTML as the skeleton of a website:

  • It defines headings, paragraphs, images, links, forms, tables, and layouts
  • It tells the browser what content exists and how it is organized
  • CSS handles design, JavaScript handles behavior—but HTML is the foundation

Without HTML, there is no web.

How the Web Understands HTML

When you open a website:

  1. Your browser requests an HTML file from a server
  2. The browser reads the HTML top to bottom
  3. It converts HTML tags into visual elements
  4. CSS styles them
  5. JavaScript adds interactivity

HTML is always the first layer.

Tools You Need to Start (Very Minimal)

You only need two things:

  1. A text editor
    • Notepad (Windows)
    • VS Code (recommended)
    • Sublime Text
  2. A web browser
    • Chrome
    • Firefox
    • Edge

That’s it. No installations required.

Your First HTML Page

Create a file named:

index.html

Write this code:

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

Open the file in a browser.

🎉 Congratulations—you just created a website.

Understanding HTML Structure

<!DOCTYPE html>

  • Tells the browser this is an HTML5 document

<html>

  • Root element of the page

<head>

  • Contains metadata (title, SEO info, styles)

<body>

  • Contains visible content

HTML works using tags:

<tagname>Content</tagname>

HTML Elements and Tags

Headings

HTML provides six levels of headings:

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

Rule:
Use only one <h1> per page for SEO.

Paragraphs

<p>This is a paragraph.</p>

Browsers automatically add spacing before and after paragraphs.

Line Breaks and Horizontal Rules

<br>   <!-- Line break -->
<hr>   <!-- Horizontal line -->

These are self-closing tags.

Text Formatting Tags

<b>Bold</b>
<strong>Important</strong>

<i>Italic</i>
<em>Emphasized</em>

<u>Underline</u>
<mark>Highlighted</mark>

<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>

Use semantic tags (strong, em) instead of visual tags (b, i) whenever possible.

HTML Attributes

Attributes provide extra information to elements.

<tag attribute="value">Content</tag>

Example:

<p align="center">Centered text</p>

Links (Anchor Tags)

Links connect the web.

<a href="https://example.com">Visit Example</a>

Open Link in New Tab

<a href="https://example.com" target="_blank">Open in New Tab</a>

Images in HTML

<img src="image.jpg" alt="Description of image">

Important Attributes

  • src → image path
  • alt → accessibility + SEO
  • width / height → size control

Example:

<img src="logo.png" alt="Company Logo" width="200">

Lists in HTML

Unordered List

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

Ordered List

<ol>
    <li>Step One</li>
    <li>Step Two</li>
    <li>Step Three</li>
</ol>

Description List

<dl>
    <dt>HTML</dt>
    <dd>Markup language</dd>
</dl>

Tables in HTML

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Ankush</td>
        <td>28</td>
    </tr>
</table>

Table Tags Explained

  • <table> → table container
  • <tr> → table row
  • <th> → header cell
  • <td> → data cell

Forms in HTML (Very Important)

Forms collect user data.

<form>
    <label>Name:</label>
    <input type="text"><br>

    <label>Email:</label>
    <input type="email"><br>

    <input type="submit">
</form>

Common Input Types

<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="radio">
<input type="checkbox">
<input type="date">
<input type="file">
<input type="submit">

Select Dropdown

<select>
    <option>India</option>
    <option>USA</option>
</select>

Textarea

<textarea rows="5" cols="30"></textarea>

Semantic HTML (Very Important for Modern Web)

Semantic tags describe meaning, not appearance.

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Example:

<header>
    <h1>Website Title</h1>
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
</nav>

<main>
    <section>
        <article>
            <h2>Blog Post</h2>
            <p>Content here</p>
        </article>
    </section>
</main>

<footer>
    © 2026
</footer>

HTML Comments

<!-- This is a comment -->

Comments are not visible in the browser.

HTML Entities (Special Characters)

&lt;   <!-- < -->
&gt;   <!-- > -->
&amp;  <!-- & -->
&nbsp; <!-- Space -->

HTML Audio and Video

Audio

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>

Video

<video width="400" controls>
    <source src="video.mp4" type="video/mp4">
</video>

HTML Iframes

Embed another webpage:

<iframe src="https://example.com" width="600" height="400"></iframe>

Used for maps, videos, dashboards.

HTML Accessibility Basics

Good HTML helps everyone.

  • Always use alt on images
  • Use proper heading order
  • Label form inputs
  • Use semantic tags

Example:

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

HTML SEO Best Practices

  • One <h1> per page
  • Meaningful <title>
  • Proper heading hierarchy
  • Clean semantic structure
  • Alt text for images

Common HTML Mistakes Beginners Make

❌ Skipping closing tags
❌ Using <br> instead of paragraphs
❌ Overusing <div>
❌ Ignoring semantic HTML
❌ Inline styling everywhere

HTML + CSS + JavaScript Relationship

  • HTML → Structure
  • CSS → Design
  • JavaScript → Behavior

HTML alone is powerful, but real websites combine all three.

What You Should Build After Learning HTML

Beginner Projects:

  • Personal portfolio
  • Resume website
  • Blog layout
  • Registration form
  • Landing page

Intermediate:

  • Multi-page website
  • Admin dashboard layout
  • Email templates

How Long Does HTML Take to Learn?

  • Basics: 2–3 days
  • Comfortable usage: 1–2 weeks
  • Mastery: 1 month (with practice)

HTML is easy to learn—but best learned by building.

Final Thoughts

HTML is not flashy.
It is not complex.
But it is foundational.

If you master HTML:

  • CSS becomes easier
  • JavaScript becomes clearer
  • Frameworks make sense
  • Web development stops feeling “magical”

Every great developer started with HTML.

Start simple. Build often. Stay consistent.