Search for a command to run...
Master the building blocks of web development. Learn how to wrap your content in meaning and structure your pages from scratch.
No comments yet. Be the first to comment.
These are the assignments or knowledge dumps I decide to write for the "Chai aur Code's web Dev Cohort 2026"
Modems, routers, switches, and load balancers. A developer’s guide to the physical network devices that make the internet possible.
RAG helps LLMs answer questions using your own data, but it doesn't guarantee correct answers. Here's how the pipeline works and where it commonly breaks down.
Imagine asking an AI, "Write a blog," versus "Act as an SEO expert and write a 1,000-word blog on AI safety formatted in markdown." The difference in the resulting output is night and day. A prompt is
Spotify and Apple Music make it incredibly easy to showcase your live listening habits on your website. YouTube Music? Not so much. After doing some setup you can do an API call and fetch your account
Arthur C. Clarke's famous third law: "Any sufficiently advanced technology is indistinguishable from magic" perfectly captures how the pace of human innovation works. From carrying supercomputers in o
Why HTTP is amnesiac, the difference between transport and state, and how to choose the right auth strategy for your Node.js app.
If you strip away the colors, the animations, and the interactive buttons from any website, what you are left with is a plain, top-to-bottom document of text and images.
This underlying structure is HTML (HyperText Markup Language).
HTML is not a programming language. It doesn't calculate math, and it doesn't execute logic. It is a markup language. Its only job is to take raw content and give it meaning. It tells the web browser: "This piece of text is a heading," "This piece of text is a paragraph," or "This link goes to another page."
If building a website is like building a house, HTML is the framing and the drywall. It is the skeleton. And to build that skeleton, you only need to understand two core concepts: tags and elements.
Beginners (and even experienced developers) often use the words "tag" and "element" interchangeably. While people will understand what you mean, they are technically two different things.
A tag is a label enclosed in angle brackets. You use tags to wrap around your content. An element is the entire package: the opening tag, the content inside, and the closing tag.
Think of it like moving into a new apartment. You have a cardboard box. You put a book inside the box, tape it shut, and write "BOOKS" on the outside with a marker.
The marker writing is the tag (it labels what is inside).
The book is the content.
The fully packed, taped, and labeled box is the element.
Here is what that looks like in code:
[ Breakdown of an HTML Element ]
<p> Hello, World! </p>
--- ------------- ----
| | |
Opening Content Closing
Tag Tag
|__________________________|
|
The whole thing is
the HTML Element
Opening Tag: <p> tells the browser, "A paragraph is starting right here."
Content: Hello, World! is what the user actually sees on the screen.
Closing Tag: </p> tells the browser, "The paragraph ends here." Notice the forward slash (/). That is what makes it a closing tag.
Most HTML elements wrap around text, which is why they need an opening and a closing tag. But what if you want to display an image? An image isn't wrapping text; it is just embedding a file directly onto the page.
Because there is no text content to wrap, there is no need for a closing tag. These are called self-closing or void elements.
<!-- An image element -->
<img src="profile.jpg" alt="A photo of me">
<!-- A line break element -->
<br>
You just open the tag, provide any necessary information (like the image source), and you're done. No </img> required.
Even without writing a single line of CSS for styling, HTML has rules about how elements should physically sit on the page. Every HTML element defaults to one of two display behaviors: block-level or inline.
Understanding this difference early will save you hours of CSS frustration later.
Block elements are greedy. They take up the entire width of whatever container they are in, regardless of how much text is inside them. They always start on a new line, pushing everything else down.
Common block elements: <h1> through <h6> (headings), <p> (paragraphs), and <div> (generic dividers).
Inline elements are polite. They only take up exactly as much width as their content needs. They do not force a new line; they sit comfortably side-by-side with other inline elements, like words in a sentence.
Common inline elements: <a> (links), <strong> (bold text), and <span> (generic text wrappers).
[ Browser Layout Behavior ][ Block Element (<h1>) ========================= ]
[ Block Element (<p>) ========================== ]
[ Inline (<a>) ][ Inline (<span>) ]
[ Block Element (<div>) ======================== ]
If you put a block element inside a paragraph of text, it will shatter the sentence, forcing the text before it up, and the text after it down.
There are over 100 HTML tags available, but you will build 90% of your websites using the same handful of tags. Here are the daily drivers:
<h1> to <h6>: Headings. <h1> is the most important (the main title), and <h6> is the least.
<p>: Paragraphs. Used for standard blocks of text.
<a>: The anchor tag. This is what creates hyperlinks to other pages.
<ul>, <ol>, and <li>: Lists. <ul> creates an unordered (bulleted) list. <ol> creates an ordered (numbered) list. <li> is used for the actual list items inside them.
<div>: The Swiss Army knife of HTML. It is a block-level container with no inherent meaning. You use it to group other elements together so you can style them as a unit later.
<span>: The inline equivalent of a div. Used to wrap a specific piece of text (like a single word) inside a paragraph so you can change its color or font.
You don’t need to memorize every tag. HTML is a vocabulary, and like any vocabulary, you will learn the words by using them.
The best way to solidify this mental model is to look under the hood of the web. Open a new tab, go to any website, right-click anywhere on the page, and select Inspect (or Inspect Element).
A panel will open showing the raw HTML of the website. As you hover over the tags, your browser will highlight the corresponding elements on the screen. You will see the <div> blocks stacking on top of each other, and the <span> and <a> elements sitting nicely inline.
Every complex web application in the world—from Netflix to Gmail—is built out of these same basic boxes. Once you know how to stack the boxes, you can build anything.