Learn HTML from the basics to semantic HTML, forms, accessibility, SEO and practical web development with examples and projects.
Document structure, elements, attributes, and how HTML connects to CSS and JavaScript.
Headings, paragraphs, and the inline tags for meaning, not just style.
Anchor tags, URL types, and link accessibility & SEO considerations.
The img tag, alt text, responsive images and layout-stable sizing.
Ordered, unordered and description lists, including nesting.
Rows, cells, headers, spanning cells and accessible table markup.
Every input type, validation, labels and accessible form patterns.
header, nav, main, section, article and footer — used correctly.
HTML5 markup for audio, video, canvas, SVG and storage — where JS takes over.
Embedding audio, video and third-party content with iframe.
Title tags, meta description, Open Graph, favicons and resource hints.
ARIA, accessible forms/buttons/links and keyboard navigation.
Heading structure, canonical tags, structured data and on-page SEO.
Clean, organized, secure and performant HTML habits.
Topic-wise HTML interview questions with explained answers.
Task-oriented HTML exercises — build real markup, not quizzes.
Complete page builds — portfolio, resume, landing page and more.
No notes found. Try a different search term, or browse all HTML notes.
What HTML actually does, and how it fits with CSS and JavaScript.
How HTML evolved from a simple proposal to the modern living standard.
Why structure and presentation are kept separate, and how they connect.
The stricter XML-based syntax rules XHTML enforced, and why HTML5 moved away from them.
The standard skeleton every HTML page is built from.
Tags, attributes, nesting rules, and void elements explained.
How to write HTML comments, and why they're still visible in page source.
What an element actually is, and how it differs from a tag.
The three kinds of HTML tags, and which ones to avoid in new code.
Name-value pairs that configure elements, including the boolean-attribute trap.
Attributes like id, class and data-* that work on almost any element.
Elements that start on a new line and take full width by default.
Elements that flow within text instead of stacking — with a block vs inline comparison.
What belongs inside the head, and why order matters slightly.
Where all visible page content lives, and where scripts commonly go.
Why the doctype matters — quirks mode vs standards mode.
A small attribute with real accessibility and SEO impact.
The h1–h6 elements, heading hierarchy, and why it matters for accessibility and SEO.
The p element for blocks of text, and how whitespace collapsing actually works.
The br element for forced line breaks, and the br vs p comparison.
The hr element as a semantic thematic break, not just a decorative line.
The b element for stylistic bold text with no implied importance, and b vs strong.
The i element for an alternate voice or tone in text, and i vs em.
The u element for non-textual annotation underlines, and why it risks link confusion.
The strong element for genuinely important text, with a full strong vs b comparison.
The em element for stress emphasis that changes meaning, with a full em vs i comparison.
The mark element for highlighting text relevant to the reader's current context.
The small element for fine print and side comments — not just smaller font size.
The del element for marking removed content, with cite and datetime attributes.
The ins element for marking added content, usually paired with del for tracked changes.
The sup element for exponents, ordinal suffixes, and footnote references.
The sub element for chemical formulas and mathematical index notation.
The blockquote element for long quotations, with proper attribution and the cite attribute.
The q element for short inline quotations, and a full blockquote vs q comparison.
The pre element for preserving whitespace and line breaks exactly as written.
The code element for inline code snippets, and how it pairs with pre for full code blocks.
What hyperlinks are, the a vs button distinction, and the main link types at a glance.
The anchor tag in depth — href, target, rel, download, and how it actually works.
Full web addresses that work anywhere, and when they're required over relative paths.
Root-relative, same-directory and parent-relative paths, and when each one is correct.
Linking within your own site, orphan pages, and why internal linking matters for SEO.
Linking to other sites safely, and the real security reason behind rel="noopener".
mailto: links with pre-filled subject and body, and spam-safe contact practices.
tel: links for one-tap calling, and correct international phone number formatting.
The target attribute — _self, _blank and when opening a new tab is actually the right call.
Every important rel value on a tags — noopener, nofollow, sponsored and ugc explained.
The history and modern SEO nuance of rel="nofollow", sponsored, and ugc links.
Forcing a file download instead of navigation, and its same-origin limitation.
What the img tag does and a map of every responsive/accessible image technique.
Every important img attribute — src, alt, width/height, loading and srcset.
Writing alt text that actually helps screen reader users and search engines.
Reserving layout space with width/height to prevent layout shift as images load.
Grouping a self-contained image with its caption using the figure element.
Adding a real caption to a figure that adds context beyond the alt text.
Serving the right image size per device using srcset and sizes.
The srcset attribute in depth — width descriptors and how the browser picks a file.
Art direction and modern image format fallback with source and img together.
Deferring offscreen images with loading="lazy" to speed up initial page load.
The three HTML list types, and how to choose the right one for your content.
The ol element for numbered, sequential content, with a full ol vs ul comparison.
The ul element for bulleted, order-independent content like navigation and features.
The dl, dt and dd elements for term-definition and label-value pairs.
Placing a list inside a list item correctly, for sub-items and multi-level content.
The still-valid ol attributes, and why ul styling has moved entirely to CSS.
What tables are for, and every building block that makes one up.
The outer table container, and why old presentational attributes are obsolete.
The tr element for defining a single row, and keeping cell counts consistent.
The td element for regular data cells, and when a cell should be th instead.
The th element and the scope attribute — the most important accessible-table detail.
Grouping a table's header rows into their own explicit section.
Grouping a table's main data rows, and using multiple tbody sections.
Marking a table's summary row — totals, averages, and closing notes.
Spanning a table cell across multiple columns correctly.
Spanning a table cell down across multiple rows, with a full colspan vs rowspan table.
The caption element for a real, semantically-linked table title.
The complete checklist for building tables real screen reader users can navigate.
Keeping wide tables usable on mobile without breaking the real table structure.
What the form element does and a map of every field type and validation technique.
The form element in depth — action, method, enctype and novalidate.
The input element — how name and type drive everything about a form field.
The complete reference of every HTML5 input type and what each one is for.
The default type="text" field, and when a more specific input type is actually better.
type="email" and its built-in format validation, including the multiple attribute.
type="password", what masking actually protects, and correct autocomplete values.
type="number", min/max/step, and why it's the wrong choice for phone numbers.
type="date" and its native calendar picker, with the required YYYY-MM-DD format.
type="time" and its native time picker, with the required 24-hour HH:MM format.
type="file", the accept attribute, and the required multipart/form-data enctype.
type="checkbox" for independent choices, and what an unchecked box actually submits.
type="radio", mutually exclusive groups, with a full checkbox vs radio comparison.
The select dropdown element, including multiple selection and placeholder options.
The option element, and the key difference between displayed text and submitted value.
The textarea element for multi-line text, with a full input vs textarea comparison.
The button element and its critical default-type-submit gotcha inside forms.
The label element — the single most important form accessibility detail.
Grouping related fields together, and disabling a whole group at once.
Captioning a fieldset so screen readers announce the group's purpose.
Attaching autocomplete suggestions to a text input, with a full select vs datalist table.
Displaying a calculated result tied to other form fields with the output element.
HTML5's built-in, JavaScript-free validation system, and why server-side checks still matter.
Marking a field mandatory, across text inputs, select, checkboxes and radio groups.
Regex-based validation for text fields, with a full required vs pattern comparison.
Setting valid bounds on number, date, time and range inputs.
Hint text that disappears on typing, and why it's never a substitute for a real label.
Standard autocomplete tokens, and why correct values are a real accessibility requirement.
The method attribute on form — get vs post at the attribute level.
The action attribute — where a form's submitted data actually goes.
The complete comparison — data visibility, security, and when to use each method.
Why semantic elements matter more than divs, with a full reference layout.
Introductory content for a page or section — not just for the top of the page.
Wrapping major navigation blocks correctly, including multiple-nav labeling.
Marking a page's primary content, and the skip-to-content accessibility pattern.
Grouping thematic content, and the heading-based rule for using it correctly.
Marking self-contained content, and the standalone/syndication test.
Tangential content — sidebars, pull-quotes, and related content blocks.
Closing content for a page or section, and its accessibility landmark role.
Marking author contact information specifically — not any physical address.
A native, JavaScript-free collapsible widget for FAQs and expandable content.
Marking dates and durations in a machine-readable format.
The real difference, and why both have a legitimate place in real pages.
The heading/theme test for deciding which generic container to use.
The standalone-content test that separates these two commonly confused elements.
Two similarly-named, completely unrelated elements — and how to avoid mixing them up.
Accessible, SEO-friendly navigation habits — labeling, lists, and current-page marking.
Join Coding Hubs School of AI's Full Stack / Web Development course — live mentorship, hands-on projects, and 100% placement support in Delhi NCR.
Enroll Now — Free Demo Available
Insights on AI, Data Science, Full Stack & Career
Growth feels great—until your systems start to groan under the weight of it. New customers, bigger…
Read More →
Every business today collects data. Very few actually use it. The difference between having data and…
Read More →
Every full stack developer knows how to build a beautiful frontend and a functional backend. But the…
Read More →