Forem: Rajesh Kumar

Understanding HTML Tags and Elements: Building Blocks of the Web

Rajesh Kumar — Fri, 30 Jan 2026 17:21:56 +0000

Imagine you're looking at a human body. You can see the skin, the hair, the clothes – but underneath it all, there's a skeleton. This skeleton provides the structure, holding everything in place and defining what "this thing" actually is.

In the world of the web, HTML (HyperText Markup Language) is the skeleton of every webpage you see. It's not about the colors or the fonts (that's CSS), or the interactive buttons (that's JavaScript). HTML is purely about structure and meaning.

So, how do we build this digital skeleton? We use tags and elements.

1. What is an HTML Tag? (The Labels)

Think of an HTML tag as a label you put around content to tell the browser what that content is. These labels always come in angle brackets, like <label>.

Opening Tag: <p> (This says, "A paragraph starts here!")
Closing Tag: </p> (This says, "The paragraph ends here!")

Notice the forward slash (/) in the closing tag? That's how HTML knows you're done with that specific piece of content.

2. What is an HTML Element? (The Labeled Box)

Now, let's combine the label with the actual thing. An HTML element is made up of:

An opening tag
The content inside it
A closing tag

Analogy: If a tag is like a sticky label that says "FRAGILE," then an element is the whole box with the "FRAGILE" label on it, containing the actual fragile item.

Example:

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

Here, <p>is the opening tag, </p> is the closing tag, and "This is a paragraph of text." is the content. The entire thing, from <p> to </p> including the text, is one complete paragraph element.

3. Self-Closing (Void) Elements: The "One-Part" Tags

Not everything needs an opening and a closing. Some HTML tags are like single-item labels; they don't wrap around content, they insert something into the page. These are called self-closing or void elements.

Think of it like: You don't put a label around an image; you insert an image.

Common Examples:

<img src="image.jpg" alt="Description of image">: Used to embed an image.
<br>: Used to create a line break (like hitting Enter in a text document).
<hr>: Used to create a thematic break, often displayed as a horizontal line.

Notice these tags don't have a separate closing tag. They do their job and stand alone.

4. Block-Level vs. Inline Elements: How Content Behaves

HTML elements also behave differently on a page. Think of them as two types of building blocks:

a) Block-Level Elements:

These always start on a new line.

They take up the full available width of the page (like a block taking up an entire row).

They create "sections" or "paragraphs."

Common Block-Level Tags:

<h1> to <h6>: Headings

<p>: Paragraphs

<div>: A general-purpose container (like a big box for organizing other elements)

<section>, <article>, <footer>: Semantic layout elements

b) Inline Elements:

These do not start on a new line.

They only take up as much width as their content needs (like a single word within a sentence).

They are used for formatting small pieces of text within a block.

Common Inline Tags:

<a>: Links

<strong>: Bold text

<em>: Emphasized (italic) text

<span>: A general-purpose container for small pieces of text (like highlighting a few words)

Example:

<p>This is a <strong class="highlight">bold word</strong> in a paragraph.</p>

Here, the <p> is block-level (it takes its own line), but <strong> is inline (it just makes the word "bold word" bold, without breaking the paragraph).

5. Commonly Used HTML Tags for Beginners

As you start building, you'll find yourself using these tags constantly:

<h1> to <h6>: For main titles, subtitles, and section headings. (<h1> is the most important, <h6> the least).

<p>: For regular paragraphs of text.

<a>: For creating links to other pages or websites. (It needs an href attribute: <a href="https://example.com">Link Text</a>)

<img>: For embedding images. (It needs src for the image path and alt for accessibility: <img src="cat.jpg" alt="A cute cat">)

<div>: Your go-to "container" when you just need to group elements for styling or layout.

<span>: Your go-to "container" for small pieces of inline text you want to style differently.

<ul> and <li>: For unordered (bulleted) lists. (<ul> is the list container, <li> is each list item).

<ol> and <li>: For ordered (numbered) lists.

Your First Mission: Inspect the Web!

Now that you know what tags and elements are, open any website (like this blog post!). Right-click anywhere on the page and select "Inspect" or "Inspect Element." You'll see a panel with the HTML code. Try to identify:

Opening and closing tags
Complete elements (like a whole paragraph)
Self-closing tags (like <img>)
Block-level vs. inline elements

This hands-on exploration will solidify your understanding of the web's foundational skeleton.

Resources

Emmet for HTML: A Beginner’s Guide to Writing Faster Markup

Rajesh Kumar — Fri, 30 Jan 2026 16:46:49 +0000

Imagine you are a chef. You want to make a simple salad, but every time you pick up a tomato, you have to manually assemble your knife from scratch, sharpen it for five minutes, and then carefully put it back in a locked box before you can even touch the lettuce.

That’s what writing HTML feels like for a beginner. You want to build a simple website header, but you’re stuck typing: <header></header>, then clicking inside, then typing <div></div>, then <nav></nav>, then <ul></ul>...

By the time you’ve finished the "skeleton" of your page, your fingers are tired and you've likely missed a bracket somewhere. But what if you had a magic wand? What if you could write one tiny secret code, tap a key, and watch an entire section of your website build itself?

That magic wand is Emmet.

1. What is Emmet?(In Simple Terms)

Emmet is a shortcut engine. It isn’t a new programming language you have to learn; it is more like "text-speak" for developers.

Think of it like texting. When you type "OTW," your friend knows you mean "On The Way." Emmet does the exact same thing for your code. You type a shorthand version of HTML, and Emmet expands it into the full, formal code.

2. Why is it Useful for Beginners?

You might think, "I'm still learning HTML, shouldn't I type it all out to practice?"

Actually, Emmet is a beginner's best friend because:

It eliminates "Bracket Stress": You don't have to hunt for the < or / keys constantly.It prevents errors: Emmet always closes your tags perfectly.
No more broken layouts because you forgot a .
It builds muscle memory: You use the same symbols in Emmet that you will eventually use in CSS (like dots for classes).

3. How Emmet Works Inside Your Editor

If you are using VS Code, you already have Emmet! It’s built-in and ready to go.

To use it, you simply:
Type your abbreviation (the shortcut).
Look for the "Emmet Abbreviation" suggestion box that pops up.
Hit the Tab or Enter key.

4. Basic Emmet Syntax: The Language of Shortcuts

Emmet syntax is designed to be intuitive. Most of the time, the abbreviation is just the name of the tag you want. No brackets, no slashes.

To get this...      Type this...  Then hit...
<p></p>             p             Tab
<h1></h1>           h1            Tab
<footer></footer>   footer        Tab

5. Creating HTML Elements

You don't need to worry about the opening < or the closing >. Simply typing the element name is enough. Want a main section? Just type main and hit Tab. It turns the tedious "typing" part of coding into a simple "naming" part.

6. Adding Classes, IDs, and Attributes

This is where the magic starts. Emmet uses the exact same symbols you’ll use when styling your site with CSS.

Classes: Use a dot (.).
IDs: Use a hash (#).

Example:

Type: div.container → Result: <div class="container"></div>
Type: h1#main-title → Result: <h1 id="main-title"></h1>

7. Creating Nested Elements (Parent > Child)

HTML is all about "nesting"—putting tags inside other tags. Emmet uses the "Greater Than" sign (>) to represent this "Inside" relationship.The Abbreviation: nav > ul > li

The Result:

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

8. Repeating Elements with Multiplication

Need a list with five items? In the old days, you’d copy and paste <li></li> five times. In Emmet, you use the asterisk (*), which is the math symbol for multiplication.

The Abbreviation: ul > li * 5

The Result:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

The Ultimate Time Saver: Generating the Boilerplate

Every HTML file needs a standard "skeleton" (the head, body, and meta tags). Writing this manually is the most boring part of web development.

The Shortcut: Type ! and hit Tab.

The Result: Emmet generates the entire standard HTML5 boilerplate instantly. You are ready to start building your content in less than one second.

Resources
https://docs.emmet.io/cheatsheet/
https://code.visualstudio.com/docs/editor/emmet
https://www.freecodecamp.org/news/write-html-css-faster-with-emmet-cheat-codes/

DNS Record Types: The Internet’s Contact List Explained

Rajesh Kumar — Fri, 30 Jan 2026 14:57:10 +0000

Have you ever wondered: “How does my browser actually know where a website lives?” When you type google.com, your computer doesn't magically know which server to talk to. It needs to look up the "address" in a giant, global directory. This directory is DNS (Domain Name System), often called the "Phonebook of the Internet."

But here is the catch: a single website doesn't just have one phone number. It has an address for its house, a separate box for its mail, and maybe a few nicknames. In DNS, these different pieces of information are called Record Types.

1. Why do we even need different records?

Imagine you have a friend named "TechCorp."

To visit their office, you need their GPS coordinates.
To send them a letter, you need their Post Office Box.
To verify they are who they say they are, you need to see their ID Card.

DNS records solve this problem by categorizing information so your computer knows exactly where to go for what.

2. NS Record: The "Manager"

The NS (Name Server) Record tells the internet, "Who is in charge of this domain?"

If you ask the internet about a domain, the NS record points you to the specific "Manager" (like GoDaddy, Cloudflare, or Route53) who holds all the other records.

Real-life example: It’s like asking a receptionist who the building manager is.

3. A Record: The "Street Address" (IPv4)

The A Record is the most common. It maps a domain name to a physical IPv4 address.

Problem it solves: Computers can't "talk" in words; they talk in numbers like 142.250.190.46.
Real-life example: It’s like looking up "Pizza Hut" and getting their exact house number.

4. AAAA Record: The "New Street Address" (IPv6)

The AAAA Record (pronounced "Quad-A") does the exact same thing as an A Record, but for IPv6 addresses.

Why it exists: The world ran out of old IPv4 addresses, so we made new, longer ones (like 2001:0db8:85a3:0000:0000:8a2e:0370:7334).
Real-life example: It's like having a traditional house number AND a modern digital plus-code for the same location.

5. CNAME Record: The "Nickname"

A CNAME (Canonical Name) Record points one name to another name, rather than an IP address.

Problem it solves: If your server's IP changes, you don't want to update 10 different records. You point blog.mysite.com to mysite.com. If the main site moves, the blog follows automatically.
Real-life example: Pointing the name "Tony Stark" to "Iron Man." No matter where Iron Man goes, Tony is there too.

A vs CNAME Confusion: Use an A record to point to a number (IP). Use a CNAME to point to another name.

6. MX Record: The "Post Office"

The MX (Mail Exchanger) Record tells the internet where to send your emails.

Problem it solves: You might host your website on one server but use Google or Outlook for your emails. The MX record ensures emails don't try to "knock on the door" of your web server.
Real-life example: Your house address is where you live, but your P.O. Box is where your mail goes.

7. TXT Record: The "ID Card"

A TXT (Text) Record lets a domain owner put almost any text into the DNS.

Problem it solves: Usually used for verification. If you want to prove to Google that you own a site, they’ll say: "Add this random code to your TXT record." Since only the owner can change DNS, it proves your identity.
Real-life example: Leaving a note on your front door to prove to a delivery driver that you are indeed the resident.

8. Putting it all together

When you visit a modern website like shop.example.com, several records work at once:

NS Records find the manager who knows the records.
CNAME Records point the "shop" alias to the main domain.
A Records provide the actual IP address for the server.
MX Records ensure that if you hit "Contact Us" via email, the message goes to the right mail server.

Resources

Getting Started with cURL: Sending Messages to the Internet

Rajesh Kumar — Fri, 30 Jan 2026 14:05:30 +0000

Imagine you want to order food from a restaurant. You don't always go there yourself; sometimes you send a message or make a call to their "Service Counter." In the world of programming, that restaurant is a Server, and cURL is the phone you use to talk to it.

As a developer, you’ll spend a lot of time "talking" to servers. Let’s break down how to do that without any fancy browser, just using your terminal.

1. What is cURL (In very simple terms)

cURL stands for "Client URL." Think of it as a web browser that has no buttons, no images, and no colors. It is a command-line tool that lets you send and receive data from a server using a URL.

If a browser is like a TV where you see everything, cURL is like a Walkie-Talkie. You send a specific "request" to a server, and it sends back a "response" in plain text.

2. Why programmers need cURL

Why bother with a black-and-white terminal when you have Chrome or Safari?

Speed: It’s much faster to type a command than to open a browser and click through menus.
Automation: You can write scripts to call a server 100 times in a row.
Testing APIs: Programmers use it to check if their "Backend" (the hidden logic of an app) is working correctly before the "Frontend" (the screen) is even built.

3. Making your first request using cURL

Let's keep it simple. Open your terminal (Command Prompt or Terminal) and type this:

Bash

curl https://www.google.com

What happened? You just sent a message to Google’s server saying, "Give me your homepage." Instead of showing you the colorful logo, the server sent you the raw HTML code. That code is what your browser usually turns into a pretty webpage.

4. Understanding Request and Response

Every time you use cURL, a two-part conversation happens:

The Request: This is what you send. It includes the URL and sometimes "headers" (extra info like what language you speak).
The Response: This is what the server sends back. It usually contains:

Status Code: (e.g., 200 OK means success, 404 Not Found means you're lost).
Body: The actual data (HTML or JSON).

5. Using cURL to talk to APIs

Most modern apps talk in JSON (a simple text format). Let’s try two basic ways to talk to an API:

The GET Request (Asking for data)

This is like asking, "What's on the menu?"

Bash

curl https://jsonplaceholder.typicode.com/posts/1

The server will send back a small piece of data about a "post."

The POST Request (Sending data)

This is like saying, "I want to place an order." We use the -X POST flag and -d for "data."

Bash

curl -X POST https://jsonplaceholder.typicode.com/posts -d "title=MyNewPost"

You just "pushed" information to the server.

6. Common mistakes beginners make

Even intermediate developers trip up on these:

Forgetting the Protocol: Always include https://. If you just type google.com, cURL might get confused.
Invisible Characters: If you copy-paste a command from a blog, sometimes "smart quotes" (“ ”) replace straight quotes (" "), and the command will fail.
Ignoring Errors: If nothing happens, add -v (verbose) to your command. It’s like turning on the lights in a dark room—it shows you every detail of the conversation.

Bash

curl -v https://google.com

Resources

How DNS Resolution Works

Rajesh Kumar — Fri, 30 Jan 2026 13:09:38 +0000

Imagine you’re trying to find a famous biryani shop in Hyderabad. You don't know the exact house number; you just know the name of the shop. You ask a local elder, they point you to the right neighborhood, someone there points you to the specific lane, and finally, a shopkeeper in that lane points you to the door.

DNS (Domain Name System) is exactly that guide for the internet. Computers are great with numbers (IP addresses like 142.250.190.46), but humans are better with names like google.com. DNS exists to translate those names into numbers so our browsers can find the right server.

1. What is DNS and why name resolution exists

Computers communicate using IP Addresses. Every website lives on a server with a unique numerical ID. However, expecting a person to remember 172.217.167.142 instead of google.com is impossible.

Name Resolution is the process of mapping a human-friendly domain name to a machine-friendly IP address. DNS acts as the "Phonebook of the Internet." When you type a URL, your system initiates a "resolution" to find the target IP. Without this, the internet would be unusable for regular people.

2. What is the dig command and when it is used

If DNS is a phonebook, dig (Domain Information Groper) is your tool to look inside it. It is a powerful command-line utility used by engineers to troubleshoot and "X-ray" the DNS process.

While a browser just gives you the final webpage, dig shows you the raw data packets being exchanged. You use it when a site won't load, when you've just updated your server settings, or when you want to see exactly which "layer" of the internet is providing your information.

3. Understanding dig . NS and root name servers

The DNS system is organized like an upside-down tree. At the very top is the Root. In technical terms, the root is represented by a single dot (.).

When you run dig . NS, you are asking for the Name Server (NS) records of the entire internet's root. There are 13 primary root server clusters globally. They don't know the IP of Google, but they are the "Admins" who know exactly who is in charge of extensions like .com, .in, or .org.

4. Understanding dig com NS and TLD name servers

Once the root server sees you are looking for something ending in .com, it directs you to the Top-Level Domain (TLD) Name Servers.

By running dig com NS, you are querying the records for the .com registry. These servers are the "managers" for that specific extension. They don't have the final IP address yet, but they have a list of the specific Authoritative servers for every single registered .com website in existence.

5. Understanding dig google.com NS and authoritative name servers

Now we reach the "Source of Truth." When you run dig google.com NS, you are asking the TLD servers for the Authoritative Name Servers that Google itself manages.

The Authoritative server is the "Final Boss." This is the server where the domain owner (Google) stores their official records. When you query this level, you are getting the information directly from the source, rather than a cached copy. The NS records here point to the specific machines (like ns1.google.com) that hold the actual IP address.

6. Understanding dig google.com and the full DNS resolution flow

When you run a simple dig google.com, you are looking at the final answer of a complex relay race. In the real world, your browser doesn't do all this walking; a Recursive Resolver (provided by your ISP or Google 8.8.8.8) does it for you.

The Full Resolution Flow:

Request: Your browser asks the Resolver, "Where is google.com?"
Root: Resolver asks the Root (.). Root says, "I don't know, but ask the .com TLD."
TLD: Resolver asks the .com TLD. TLD says, "Ask Google's Authoritative servers."
Authoritative: Resolver asks Google's server. It says, "The IP is 142.250.190.46."
Result: The Resolver gives this IP to your browser, and the page loads.
This layered system ensures the internet stays fast and scalable. By using dig at each step, you can verify if a lookup is failing at the Root, the TLD, or the Authoritative level.

Resources

Understanding Network Devices

Rajesh Kumar — Fri, 30 Jan 2026 10:20:39 +0000

Have you ever clicked a button on a website and wondered how the response feels almost instantaneous? As a developer, it’s easy to think of the internet as a "cloud" or a series of invisible signals. But in reality, your code doesn't just float through the air—it travels through a massive, physical maze of cables and boxes.

Between your laptop and the website you’re building, there is a whole team of physical devices working 24/7. Some act like GPS navigators, finding the fastest path for your data, while others act like security guards, checking IDs at the door to keep hackers out.

In this article, we’re going to break down the most important "boxes" that make the internet work. Whether you're trying to figure out why a website is slow or you're just curious about what's actually happening inside a data center, we'll explain it all without the confusing jargon.

The Modem: Your Digital Translator

The internet comes into your house through a wire from your Internet Service Provider (ISP). The problem? That wire carries "analog" signals (waves), but your computer only speaks "digital" (1s and 0s).

Its Job: Translation. It turns those waves into data your devices can actually use.

The Analogy: Think of the modem as a Translator at a United Nations meeting, turning a foreign language into one you understand.

Without it: You’d have a bunch of devices in your house that could talk to each other, but they’d have no way to talk to the outside world.

The Router: The Traffic Police

The modem brings the internet to your front door, but the Router decides which device gets which piece of data. It creates your local network (Wi-Fi or Ethernet).

Its Job: Direction. It assigns a "Private IP" to your phone, laptop, and smart fridge so it knows exactly where to send that Netflix stream.

The Analogy: The Post Office. It looks at the address on a package and says, "This goes to the Laptop," or "This goes to the Printer."

The Dev View: This is where NAT (Network Address Translation) lives. It lets your whole house share one "Public" IP address while keeping everyone's private data separate.

Switch vs. Hub: Smart vs. Loud

Once the data is inside your house or office, it needs to move between devices. This is where things get interesting.

The Hub (The "Loud" One)
A Hub is an old-school, "dumb" device. When it receives a packet, it screams it at everyone connected to it.

The Problem: It’s like a room where everyone is talking at once. It’s slow and causes data "collisions."

The Switch (The "Smart" One)
A Switch is much more polite. It learns the "name" (MAC Address) of every device plugged into it. When a packet comes in, it sends it only to the device that asked for it.

The Result: A much faster, more organized network.

The Firewall: The Bouncer

Now that we're moving data, we need to make sure the "bad guys" stay out. The Firewall sits at the edge of your network, inspecting every single packet.

Its Job: Security. It follows a set of rules (e.g., "Nobody from the outside is allowed to touch our Database").

The Analogy: A Bouncer at a Club. If you aren't on the guest list, you aren't getting in.

Why Devs Care: If your backend can’t talk to your API, 90% of the time, a Firewall rule is blocking the port.

The Load Balancer: The Traffic Controller

In a small home, you don't need this. But if you’re running a website like YouTube, one server isn't enough. You need hundreds. The Load Balancer sits in front of them to distribute the work.

Its Job: Efficiency. It makes sure no single server gets overwhelmed. If Server A is busy, it sends the next user to Server B.

The Analogy: A Grocery Store Manager. When one checkout line gets too long, they open another one to keep the crowd moving.

Putting It All Together: A Real-World Setup

When you click "Buy Now" on an app, your data goes on a wild ride through all these devices:

Modem: Translates your request into digital bits.

Router: Sends those bits out to the internet.

Firewall: On the company's side, it checks if your request is "safe."

Load Balancer: Picks the least-busy server to handle your order.

Switch: Physically moves the request to that specific server.

Resources
https://www.cloudflare.com/learning/
https://www.cloudflare.com/learning/network-layer/what-is-a-router/
https://www.cloudflare.com/learning/network-layer/what-is-routing/
https://www.coursera.org/articles/hub-vs-switch
https://www.flackbox.com/cisco-switches-vs-hubs
https://www.cloudflare.com/learning/security/what-is-a-firewall/
https://www.cloudflare.com/learning/performance/what-is-load-balancing/
https://www.scribd.com/document/817357087/Networking-Resources-for-Developers
https://github.com/facyber/awesome-networking
https://www.professormesser.com/professor-messer-archives/n10-007/networking-devices/