Forem: Suraj Kumar

HTML is Not Just You Think...

Suraj Kumar — Thu, 07 May 2026 14:43:02 +0000

1. Introduction

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It helps browsers display content such as text, images, links, tables, forms, audio, and video.

HTML is not a programming language. It is a markup language that defines the structure of web content. HTML works together with CSS for styling and JavaScript for interactivity.

Why HTML is Important

HTML is the foundation of every website and web application. It helps developers organize content properly and allows browsers to display webpages correctly.

Modern HTML also supports multimedia, semantic elements, accessibility, and responsive web design.

Uses of HTML

HTML is used for:

Creating websites
Building forms
Embedding multimedia
Creating tables and lists
Designing web interfaces
Linking webpages

2. History of HTML

HTML was created by Tim Berners-Lee in 1991 while working at CERN. The first version of HTML contained simple tags for headings, paragraphs, and links.

Over time, HTML evolved from HTML 1.0 to HTML5 with support for multimedia, semantic elements, APIs, and responsive design.

Evolution of HTML

HTML 1.0

<h1>Hello World</h1>
<p>Basic HTML page.</p>

HTML 2.0

<form>
  <input type="text" placeholder="Enter Name">
</form>

HTML 3.2

<table border="1">
  <tr>
    <td>HTML</td>
    <td>CSS</td>
  </tr>
</table>

HTML 4.01

<div>
  <h2>Welcome</h2>
</div>

XHTML

<img src="image.jpg" alt="Image" />

HTML5

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

3. Features of HTML

Easy to Learn

HTML uses simple tags and beginner-friendly syntax.

<h1>Hello</h1>
<p>This is HTML.</p>

Platform Independent

HTML works on all operating systems and browsers such as Chrome, Firefox, Edge, and Safari.

Supports Multimedia

<img src="image.jpg" alt="Image">

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

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

Semantic Structure

HTML5 introduced semantic tags that improve readability, SEO, and accessibility.

<header>
  <h1>My Website</h1>
</header>

<section>
  <p>Welcome</p>
</section>

<footer>
  <p>Footer</p>
</footer>

Works with CSS and JavaScript

HTML provides structure, CSS handles styling, and JavaScript adds functionality.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

<body>

  <h1 id="title">Hello</h1>

  <script>
    document.getElementById("title").innerHTML = "Welcome";
  </script>

</body>
</html>

4. Structure of an HTML Document

A basic HTML document contains the following structure:

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
</head>

<body>

  <h1>Hello World</h1>
  <p>This is a webpage.</p>

</body>
</html>

Main Elements

<!DOCTYPE html> → Defines HTML5 document
<html> → Root element
<head> → Contains metadata
<title> → Defines webpage title
<body> → Contains visible webpage content

5. Basic HTML Tags

Headings

<h1>Main Heading</h1>
<h2>Sub Heading</h2>

Paragraph

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

Links

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

Images

<img src="image.jpg" alt="Sample Image">

Lists

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

Div and Span

<div>
  <span>Hello World</span>
</div>

6. Semantic HTML

Semantic tags describe the meaning of content clearly.

Common Semantic Tags

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

Example

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

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

<main>
  <section>
    <article>
      <h2>Article Title</h2>
    </article>
  </section>
</main>

<footer>
  Copyright 2026
</footer>

Semantic HTML improves readability, SEO, and accessibility.

7. HTML Forms

Forms are used to collect user input.

<form>

  <label>Name:</label>
  <input type="text" required>

  <br><br>

  <label>Message:</label>
  <textarea></textarea>

  <br><br>

  <label>City:</label>
  <select>
    <option>Delhi</option>
    <option>Mumbai</option>
  </select>

  <br><br>

  <button type="submit">Submit</button>

</form>

8. HTML Tables

Tables display data in rows and columns.

<table border="1">

  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Suraj</td>
    <td>21</td>
  </tr>

</table>

Important Tags

<table>
<tr>
<th>
<td>
colspan
rowspan

9. Multimedia in HTML

HTML supports multimedia elements such as audio, video, iframe, and pictures.

Audio

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

Video

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

Iframe

<iframe src="https://example.com"></iframe>

Picture

<picture>
  <img src="image.jpg" alt="Image">
</picture>

10. HTML APIs

Geolocation API

navigator.geolocation.getCurrentPosition();

Drag and Drop API

<div draggable="true">Drag Me</div>

Local Storage

localStorage.setItem("name", "Suraj");

11. Accessibility in HTML

Accessibility makes websites usable for all users.

Important Practices

Use alt text for images
Use proper labels
Use semantic tags
Use ARIA roles

Example

<img src="logo.png" alt="Website Logo">

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

12. SEO Best Practices

SEO helps webpages rank better in search engines.

Best Practices

Use meta tags
Maintain heading hierarchy
Use semantic HTML
Optimize images

Example

<meta name="description" content="HTML Documentation">

13. Advantages and Limitations

Advantages

Easy to learn
Lightweight
Supported by all browsers
Free to use

Limitations

Cannot create logic alone
Requires CSS for styling
Requires JavaScript for interactivity

14. Best Practices

Use semantic tags
Write clean indentation
Keep code organized
Optimize images
Avoid inline CSS
Use meaningful names

15. Real-World Applications

HTML is used in:

Websites
Portfolios
Blogs
Dashboards
E-commerce websites
Web applications

16. Conclusion

HTML is the foundation of web development and is used to create and structure webpages. It provides the basic framework for displaying content on the internet.

With HTML5, web development became more powerful through support for multimedia, APIs, semantic elements, and accessibility. HTML continues to be one of the most important technologies in modern web development.

17. References

MDN Web Docs
W3Schools
WHATWG HTML Standard
freeCodeCamp
Banner image used in this article is referenced from web.dev.

I Called Myself a Tech Guy Without Building Anything!

Suraj Kumar — Fri, 09 Jan 2026 17:32:38 +0000

Ever happened to you? You know things, but you can’t code on your own.

Do you know why this happens to you? The real reason is that you never try to code things by yourself. That is the main difference between you and your friends, or whoever you are comparing yourself with.

Most of the time, you spend your time watching tutorials rather than building something. Even if you follow the exact tutorial, you are most likely to learn nothing unless you try to build that thing by yourself.

For example, on the internet you can find a lot of tutorials on HTML, CSS, JavaScript, or React. You watch them, and you start thinking that now you know the language. But the reality is, when you actually start building something, you realize there is still a lot to learn.

And this feeling is true — because nobody can be perfect at one thing. We learn things as we go.

A real developer is always able to break and make things. Even if they don’t know anything about a topic, they will research it and make sure they reach a level where they can build something with it.

I experienced this myself when I was learning Git from YouTube. I watched a lot of tutorials, but with time I realized that most of them were not effective for me. They mostly teach the basics, but advanced things like cherrypicking, merging branches, and managing conflicts are things you learn only when you work on real projects with other people.

That’s when you start researching on your own and come across concepts like cherrypicking and new commands that nobody teaches in tutorials.

In the tech space, most things are learned by reading documentation, because every tool keeps evolving. Every tutorial becomes outdated one day.

So the best option is to try to learn by yourself and read documentation. That is how you transform from a “techy guy” into a real developer.

I Dreamed of Being a Software Engineer at 8 — Still Figuring It Out at 21

Suraj Kumar — Thu, 08 Jan 2026 18:29:34 +0000

When I was very young, around 8 years old, I already knew what I wanted to become. At that age, when most people don’t know what they want to do in life, I was thinking about becoming a software engineer.

I remember one day telling my grandma that I wanted to be a software developer and earn millions like Bill Gates.

But even after knowing from the start what I wanted to become, now at the age of 21 and a half, I’m just a normal guy studying BCA and working as a lawyer’s clerk. I’m not even close to the goal I once dreamed of.

I feel like I have most of the things required to become a developer, but till now I never seriously looked into HTML, CSS, JavaScript, or even some C++ concepts. The main problem is that I procrastinate a lot, and till date, I have never been consistent.

Now I want to change things and take control of my life.

In my friend circle, I’m known as the techy guy, but they don’t know the reality. I’m good at finding things, modifying applications or software, but that doesn’t mean I’m an expert, I’m not.

Till now, I haven’t even made a single calculator application by myself. So how can I call myself a developer?

But today, on 8th January 2026, I decided to change things and take matters into my own hands. I know it might be too late, but after all this, I now want to become a top developer, someone who first becomes a proper engineer and later a tech founder.

I hope you guys will join me on this journey, and one day, you and I together will prove to the world who we are and what we are going to be.