Full Stack Developer | AI Enthusiast | Builder 🛠️
Currently focused on building high-performance products like ShortIQ (AI content engine) and Spectr (real-time analytics). I write about Next.js, backend architecture, and the journey of scaling modern web apps.
Tech Stack: JavaScript/TypeScript, Next.js, Node.js, PostgreSQL, and AI integration (Gemini/Sarvam).
Check out my work: subhashjha.me
01. What does HTML stand for?
Difficulty: Easy
Answer:
HTML stands for HyperText Markup Language.
Think of it this way 💡
HTML is like the skeleton of a webpage. It tells the browser what things are — "this is a heading", "this is a paragraph", "this is an image".
HyperText = links that connect pages together. Markup = using special tags to label your content. Language = a set of rules the browser understands.
02. What is the difference between an HTML tag and an HTML element?
Difficulty: Easy
Answer:
Simple answer 💡
A tag is just the label part (like <p>). An element is the whole thing — the opening tag + content + closing tag.
Example 👇
The tag is <p>. The element is <p>Hello!</p> — that's the full package.
03. What does do?
Difficulty: Easy
Answer:
Simple answer 💡
It tells the browser "hey, this is an HTML5 page — please read it correctly!"
Without it, the browser might go into "quirks mode" — an old mode that can make your page look weird or broken. Always put <!DOCTYPE html> as the very first line of your HTML file.
04. What is the basic structure of an HTML page?
Difficulty: Easy
Answer:
Every HTML page has this basic shape:
Easy way to remember 💡<head> = stuff the browser needs to know (invisible to users). <body> = stuff the user actually sees on the page.
05. What is the difference between block and inline elements?
Difficulty: Easy
Answer:
Simple answer 💡Block elements take up the full width of the page and always start on a new line. Inline elements only take up as much space as their content needs and stay in the same line.
Real life example 🏠
Block = a whole shelf (takes the full row). Inline = a book on that shelf (only as wide as the book).
Think about it — an image tag shows a picture. What would you put inside it? Nothing! So it doesn't need a closing tag.
07. What is the difference between
and ?
Difficulty: Easy
Answer:
Simple answer 💡
Both are empty containers with no meaning — just boxes to group things. The only difference: <div> is a big block box. <span> is a small inline box.
Analogy 📦<div> = a cardboard box (holds a whole section). <span> = a sticky label (highlights just a few words in a sentence).
08. What is the difference between HTML attributes and properties?
Difficulty: Medium
Answer:
Simple answer 💡Attributes are written in the HTML code — they're the starting value. Properties are the live values in the browser as the user interacts with the page.
Example 👇
You write <input value="hello">. That "hello" is the attribute. The user clears it and types "world". Now the property is "world" — but the attribute in your HTML still says "hello". They can be different!
Semantic HTML
09. What is semantic HTML and why does it matter?
Difficulty: Easy
Answer:
Simple answer 💡
Semantic HTML means using tags that describe what the content is, not just how it looks.
Bad vs Good 👇
❌ Bad: <div>My Article</div> — tells nothing about the content.
✅ Good: <article>My Article</article> — tells everyone it's an article.
It helps: screen readers for blind users, Google for search rankings, and other developers reading your code.
10. What is the difference between and ?
Difficulty: Easy
Answer:
Quick test 💡
Ask yourself: "Could I copy this content and put it on another website and it would still make sense?" If YES → use <article>. If NO → use <section>.
Example 📰
A blog post = <article> (makes sense on its own anywhere). A chapter inside a book page = <section> (only makes sense as part of the book).
11. What do , ,
Difficulty: Medium
Answer:
Think of a newspaper 📰<header> = the newspaper's name and date at the top.
<main> = the main news stories in the middle.
<aside> = the sidebar with extra stuff (ads, related links).
<footer> = the small print at the bottom (contact, copyright).
There should be only one <main> per page — it's the star of the show.
12. When do you use vs , and vs ?
Difficulty: Medium
Answer:
Simple rule 💡<strong> = This is important, pay attention! (screen readers may say it louder)
<b> = Just make it look bold, no special importance.
<em> = stress this word (changes the meaning of the sentence)
<i> = just make it look italic (book titles, foreign words).
Example 🗣️
"Do not touch that!" — the emphasis changes the meaning.
"Read Harry Potter" — just styling a book title.
13. What are and used for?
Difficulty: Medium
Answer:
Simple answer 💡<figure> is a container for an image (or chart or code) that goes with the text but could be moved without breaking the page. <figcaption> is the caption label under it.
It's like a photo in a magazine — the picture and its caption belong together.
14. What is the
Difficulty: Easy
Answer:
Simple answer 💡<nav> wraps your main navigation menu — the links people use to move around your website.
It tells blind users (using screen readers) "here's the navigation, you can jump to it or skip it." Only use it for major navigation, not every group of links on the page.
Forms & Input
15. What is the difference between GET and POST in a form?
Difficulty: Easy
Answer:
Simple answer 💡GET = puts the data in the website address (URL). You can see it, bookmark it, share it.
POST = sends data secretly, hidden from the URL. Better for passwords and private info.
Real life 🛒
GET is like writing your shopping list on a postcard — anyone can read it.
POST is like putting it in a sealed envelope — more private.
16. What does the element do?
Difficulty: Easy
Answer:
Simple answer 💡
A label tells the user what an input field is for. It also makes the input easier to click — clicking the label text focuses the input!
The for attribute connects the label to the input via the input's id. Screen readers will say "Your Email" when the user focuses on that input — very important for accessibility.
17. What new input types did HTML5 add?
Difficulty: Medium
Answer:
HTML5 gave us many new input types so we don't always need JavaScript:
New input types 🆕email — checks for @ sign
number — only allows numbers
date — shows a date picker
color — shows a color picker
range — shows a slider
tel — phone number keyboard on mobile
url — checks for valid web address
The browser handles the validation for you — no extra code needed!
18. What is the difference between and ?
Difficulty: Medium
Answer:
Simple answer 💡
Both can submit a form. But <button> is more powerful — you can put HTML inside it (like an icon + text). <input type="submit"> can only show plain text.
Example 👇
❌ <input type="submit" value="Send"> — plain text only.
✅ <button>🚀 Send Message</button> — can include emojis, icons, formatted text!
Important: a <button> inside a form submits by default. If you don't want that, use type="button".
19. What do name, id, and placeholder do on an input?
Difficulty: Medium
Answer:
Each one does something different 💡name = the label for the data when you submit the form (the server uses this).
id = a unique name for CSS/JavaScript to target, and to link with a <label>.
placeholder = hint text inside the box that disappears when you start typing.
Analogy 📬
name = the address label on a package (tells the server what data it is).
id = a unique tracking number (so JS/CSS can find it exactly).
placeholder = the "write your message here" hint inside a text box.
20. What are and ?
Difficulty: Medium
Answer:
Simple answer 💡<fieldset> draws a box around a group of related form fields. <legend> is the title of that group, shown at the top of the box.
It helps users (especially screen reader users) understand that these fields belong together.
21. How does HTML5 form validation work?
Difficulty: Hard
Answer:
Simple answer 💡
HTML5 can check if a form is filled correctly before it's sent — no JavaScript needed!
You add special attributes to your inputs:
Common validation attributes 👇required — field can't be empty
minlength="5" — must be at least 5 characters
max="100" — number can't be more than 100
pattern="[A-Z]+" — must match this pattern
type="email" — must look like an email address
When the user clicks Submit, the browser checks everything and shows error messages automatically. Add novalidate to the form if you want to turn this off and do it yourself with JavaScript.
22. What is enctype="multipart/form-data" and when do you need it?
Difficulty: Hard
Answer:
Simple answer 💡
Whenever your form lets users upload a file, you must add enctype="multipart/form-data" to your form tag. Without it, the file won't actually be sent!
The default encoding only handles text. "multipart/form-data" packages the file as a proper upload that servers can read.
Media & Links
23. What is the alt attribute on images and why is it important?
Difficulty: Easy
Answer:
Simple answer 💡alt is a text description of the image. It's shown when the image can't load, and read out loud by screen readers to blind users.
Rules 👇
✅ Useful image: alt="A golden retriever playing in the park"
✅ Decorative image (ignore it): alt="" (empty is correct!)
❌ Never: alt="image" or alt="photo123.jpg" — that's useless.
Google also reads alt text to understand your images — it helps with SEO too!
24. What is the difference between absolute and relative URLs?
Difficulty: Easy
Answer:
Simple answer 💡Absolute URL = the full address, like a full home address including country.
Relative URL = a shortcut address, like "the room next door".
Example 🗺️
Absolute: https://mysite.com/images/logo.png — works from anywhere.
Relative: images/logo.png — works only from pages on the same site.
Use relative URLs for your own site's files (easier to move the site later). Use absolute URLs when linking to other websites.
25. What does target="_blank" do and what danger does it create?
Difficulty: Medium
Answer:
Simple answer 💡target="_blank" opens the link in a new browser tab. The danger is that the new page can control your original page unless you stop it!
This blocks the new page from accessing your page. Without this, a sneaky site could redirect your original tab to a fake login page.
26. How do you add video and audio to a page in HTML5?
Difficulty: Medium
Answer:
Simple answer 💡
HTML5 has built-in <video> and <audio> tags — no Flash plugin needed anymore!
<video controls width="500">
<source src="myvideo.mp4" type="video/mp4">
Your browser can't play this video.
</video>
Useful attributes 🎬controls — show play/pause buttons
autoplay — start playing automatically
muted — start without sound
loop — keep repeating
27. What is the srcset attribute on images?
Difficulty: Medium
Answer:
Simple answer 💡srcset lets you provide multiple versions of an image. The browser picks the right one based on screen size — so phones don't download a huge desktop image!
Analogy 📱
Like a restaurant offering small, medium, and large coffees. The browser orders just the right size it needs — no waste!
28. What is the element and when do you use it?
Difficulty: Hard
Answer:
Simple answer 💡<picture> lets you show a completely different image on small screens vs big screens — not just a smaller version, but a different photo altogether (different crop, different scene).
When to use it 📸
Imagine a team photo. On desktop: wide group shot. On mobile: just the faces, cropped close-up. That's when <picture> shines — srcset alone can't do this.
Tables
29. What is the correct way to build an HTML table?
Parts of a table 💡<caption> = title of the table
<thead> = header row
<tbody> = data rows
<th> = header cell (bold by default)
<td> = regular data cell
<tr> = one row
30. What is the difference between colspan and rowspan?
Difficulty: Medium
Answer:
Simple answer 💡colspan = stretch a cell across multiple columns (sideways).
rowspan = stretch a cell across multiple rows (downward).
Analogy 🏠
colspan = knocking down the wall between two rooms side by side (one big wide room).
rowspan = knocking down the floor/ceiling between two rooms above each other (a tall double-height room).
31. Why should you NOT use tables for page layout?
Difficulty: Medium
Answer:
Simple answer 💡
Tables are for data (like spreadsheets), not for placing things on a page. Using tables for layout is like using a fork to eat soup — technically possible but the wrong tool!
Problems with using tables for layout:
Why it's bad 🚫
🔇 Screen readers get confused — they read table cells as if they're data.
📱 Tables don't work well on small screens — they're rigid.
🐌 Tables are slow — the browser waits to download the whole table before drawing it.
✅ Use CSS Flexbox or CSS Grid for layout instead!
Metadata & The
32. What does the viewport meta tag do?
Difficulty: Easy
Answer:
Simple answer 💡
It tells phones and tablets "fit this page to my screen — don't zoom out so everything looks tiny!"
Without this tag 😱
Mobile browsers will pretend the screen is 980px wide and zoom way out, making your text super tiny. With this tag, the page fits the actual screen. That's why every responsive website needs it.
