All Subjects
Free · 197 Topics · No Signup
Free · 197 Topics · No Signup
HTML Notes
Structure, semantics, forms and accessibility for the modern web — written by Aivasu Tech Institute's mentors. Free to read, structured to actually help you learn.
HTML notes by Aivasu Tech Institute cover 197 topics — from html home to nav best practices — each explained with short definitions, syntax and runnable code examples. They are 100% free, need no signup, and work as quick revision for college exams, HTML interviews and Aivasu Tech Institute's mentor-led HTML course in Pitampura, Delhi.
HTML Tutorial
HTML Tutorial chapters
HTML Forms
HTML Forms chapters
HTML Graphics
HTML Graphics chapters
HTML Media
HTML Media chapters
HTML APIs
HTML APIs chapters
HTML Basics
Document structure, elements, attributes, and how HTML connects to CSS and JavaScript.
Text & Content
Headings, paragraphs, and the inline tags for meaning, not just style.
Links
Anchor tags, URL types, and link accessibility & SEO considerations.
Images
The img tag, alt text, responsive images and layout-stable sizing.
Lists
Ordered, unordered and description lists, including nesting.
Tables
Rows, cells, headers, spanning cells and accessible table markup.
HTML Forms
Every input type, validation, labels and accessible form patterns.
Semantic HTML
header, nav, main, section, article and footer — used correctly.
No notes found. Try a different search term, or browse all HTML notes.
HTML Tutorial
59 of 59 topics published1
HTML HOME
HTML is the skeleton of every website you have ever visited, from landing pages to dashboards. This free track walks you through structure, forms, media and modern semantics from scratch.
2
HTML Introduction
HTML — HyperText Markup Language — describes the structure of web pages using elements and tags. It is the first skill every web developer learns, and this topic covers what it is and why it matters.
3
HTML Editors
You do not need expensive software to write HTML — a simple editor and a browser are enough. Learn what to look for in an editor and how professionals set up their workspace.
4
HTML Basic
Every web page begins with the same few pieces: a document type, head, title and body. Mastering this basic skeleton means you can start any page correctly from day one.
5
HTML Elements
Elements are the building blocks of HTML — an opening tag, content and a closing tag. Understanding how they nest inside each other is the key to valid, predictable pages.
6
HTML Attributes
Attributes add extra information to elements, like the destination of a link or the source of an image. They turn plain tags into functional, accessible components.
7
HTML Headings
Headings organise content into a clear hierarchy, and search engines rely on them to understand a page. Using h1 to h6 correctly helps both readers and SEO.
8
HTML Paragraphs
The paragraph element is where most written content on the web lives. Learn how browsers handle spacing and line breaks so your text renders exactly as intended.
9
HTML Styles
Styles control how HTML looks, from colours to fonts, and they can be applied inline, in the head or from a stylesheet. See the three approaches and when to use each.
10
HTML Formatting
Formatting elements add meaning and emphasis to text — bold, italic, marked, deleted and more. Choosing semantic tags over visual ones keeps your content accessible.
11
HTML Quotations
Quotations in HTML come with dedicated elements like blockquote and q, which signal quotes to browsers and screen readers. Use them instead of styling plain text to look quoted.
12
HTML Comments
Comments let you leave notes inside HTML that browsers ignore, which is invaluable when working in teams. They document structure and temporarily disable code during debugging.
13
HTML Colors
Colour brings web pages to life, and HTML supports names, hex codes, RGB and HSL. Learn the formats so you can match any brand colour exactly.
14
RGB
RGB mixes red, green and blue light to produce over sixteen million colours, the way screens actually work. Understanding it is essential for picking and tweaking colours in code.
15
HEX
Hex codes are the most common way developers write colours, like #FF5733. They pack an RGB value into six characters and appear in every real codebase.
16
HSL
HSL describes colours by hue, saturation and lightness, which often feels more natural for humans. It makes tints, shades and accessible colour pairs much easier to design.
17
HTML CSS
HTML structures the page and CSS makes it beautiful, so learning how they connect is fundamental. See the three ways to attach CSS to your markup.
18
HTML Links
Links are what make the web a web, connecting pages across sites and sections. Learn the anchor tag, absolute versus relative URLs and how to open links safely.
19
Link Colors
Link colours signal state to users — unvisited, visited, hover and active. Styling them properly makes navigation intuitive and your site feel polished.
20
Link Bookmarks
Bookmarks let a link jump to a specific spot on a page using ID anchors. They power skip-links, tables of contents and shareable deep links.
21
HTML Images
Images carry more of the web's weight than text and can make or break page speed. Learn the img tag, src and alt attributes, and why alt text is non-negotiable.
22
Image Map
An image map turns regions of a single picture into separate clickable areas. It is a niche but useful technique for diagrams, maps and infographics.
23
Background Images
Background images sit behind page content and can be repeated, positioned and fixed. They are a classic design tool, though CSS now handles most of it.
24
The Picture Element
The picture element serves different image files for different screens and formats, saving bandwidth on mobile. It is the modern, responsive way to handle hero images.
25
HTML Project
The fastest way to lock in HTML is to build something real. This guided mini-project combines the tags you have learned into a working page.
26
HTML Favicon
The favicon is the small icon shown in the browser tab, and it is a tiny detail with a big brand impact. Learn how to add one in multiple sizes and formats.
27
HTML Page Title
The title tag defines the text on the browser tab and the clickable headline in Google results. It is the most valuable real estate on any page.
28
HTML Tables
Tables display data in rows and columns and remain essential for reports and schedules. Learn their structure — rows, cells and headers — before styling them.
29
Table Borders
Borders separate table cells visually, and modern CSS gives you full control over their width, style and colour. A clean border design makes tables instantly readable.
30
Table Sizes
Tables need the right dimensions to look deliberate — column widths, row heights and responsive behaviour. Learn the modern CSS approach to sizing tables.
31
Table Headers
Headers label what each column means, and using the right header elements makes tables accessible to screen readers. They can sit on top, on the left, or both.
32
Padding & Spacing
Padding inside table cells and spacing between them is what turns a cramped grid into a comfortable layout. These small CSS properties have a large visual effect.
33
Colspan & Rowspan
Colspan and rowspan let cells stretch across multiple columns or rows, essential for tables with merged headings. They appear constantly in real report layouts.
34
Table Styling
Plain tables look unfinished; striped rows, hover highlights and padding make them professional. Learn the styling recipes used on production dashboards.
35
Table Colgroup
The colgroup element styles an entire column at once, avoiding repeated classes on every cell. It keeps table markup lean and column styles consistent.
36
HTML Lists
Lists organise items into ordered, unordered and description layouts, and they appear everywhere — menus, steps, FAQs. They are one of HTML's most-used structures.
37
Unordered Lists
Unordered lists show bulleted items where order does not matter, like features or ingredients. Their flexible styling makes them the basis of most navigation menus.
38
Ordered Lists
Ordered lists number items automatically, perfect for instructions, rankings and processes. Learn the type and start attributes that control numbering.
39
Other Lists
Description lists pair terms with their definitions, ideal for glossaries and metadata. This less-known list type deserves a spot in your toolkit.
40
HTML Block & Inline
Every element is either block-level or inline, and this determines how it flows on the page. Grasping the difference is the foundation of CSS layout.
41
HTML Div
The div is the generic container used to group elements for layout and styling. You will use it constantly, so learn its purpose and its limits.
42
HTML Classes
Classes let you style multiple elements the same way and reuse design patterns across pages. They are the main hook between HTML and CSS.
43
HTML Id
IDs uniquely identify one element on a page, enabling targeted styling, anchors and JavaScript hooks. Learn when an ID is right — and when a class is better.
44
HTML Buttons
Buttons drive every interaction on the web — forms, popups, actions. Learn the button element, its types and how styling changes its meaning.
45
HTML Iframes
Iframes embed another page inside yours — maps, videos, dashboards. They are powerful but come with security and performance trade-offs worth understanding.
46
HTML JavaScript
HTML and JavaScript work together to make pages interactive, usually through the script tag. See where and how scripts load without blocking your page.
47
HTML File Paths
File paths tell the browser where to find images, stylesheets and pages. Mixing up absolute and relative paths is a classic beginner bug — learn it once, avoid it forever.
48
HTML Head
The head holds metadata about the page: title, styles, scripts and SEO tags. It is invisible to visitors but decides how browsers and search engines treat your page.
49
HTML Layout
Layout is how you arrange header, navigation, content and footer on a page. HTML provides semantic elements for each zone, making structure clear before CSS touches it.
50
HTML Responsive
Responsive pages adapt to phones, tablets and desktops automatically. This topic introduces the viewport, media queries and flexible layouts that make it happen.
51
HTML Computercode
Displaying code inside a page needs special elements like code, pre and samp. Learn how to show code snippets with correct formatting and styling.
52
HTML Semantics
Semantic elements describe what content is — header, article, nav — instead of just how it looks. They improve accessibility, SEO and code clarity at once.
53
HTML Style Guide
Consistent, readable HTML is a team skill, not just a personal habit. A style guide covers naming, indentation and structure so every developer's code looks the same.
54
HTML Entities
Some characters, like < and &, are reserved in HTML and need entity codes to display. Learn the common entities and when you need them.
55
HTML Symbols
Symbols like arrows, currency signs and mathematical marks can be typed as entities without images. They add polish to interfaces at zero performance cost.
56
HTML Emojis
Emojis are just unicode characters, and HTML renders them directly — though supporting them fully takes a charset and a little care. Learn to use them reliably.
57
HTML Charsets
Character sets determine how text is encoded, and UTF-8 has become the universal standard. Getting the charset right prevents garbled text across languages.
58
HTML URL Encode
URLs cannot contain spaces and certain symbols, so they must be percent-encoded. Understanding this keeps links working with special characters in them.
59
HTML vs. XHTML
XHTML is a stricter, XML-based version of HTML with tougher syntax rules. Comparing the two clarifies modern HTML5's forgiving parsing.
HTML Forms
6 of 6 topics published60
HTML Forms
Forms collect input from users — signups, search, feedback — and they are the gateway to every web application. This topic covers the structure all forms share.
61
HTML Form Attributes
Form attributes control where data is sent and how it is validated, from action and method to autocomplete. Getting these right makes forms actually work.
62
HTML Form Elements
Inputs, selects, textareas and buttons each collect a different kind of data. Knowing the full range of form elements lets you design any data-entry flow.
63
HTML Input Types
Modern input types — email, date, number, range — bring built-in keyboards and validation on mobile. Using the right type is the easiest UX win in forms.
64
HTML Input Attributes
Input attributes like placeholder, required and maxlength shape how fields behave without JavaScript. They add usability and validation in one line each.
65
Input Form Attributes
Attributes such as form, formaction and formmethod connect inputs to specific forms and override submission behaviour. They enable multi-form pages and custom actions.
HTML Graphics
2 of 2 topics published66
HTML Canvas
Canvas is a drawable area controlled by JavaScript, powering games, charts and image editing in the browser. It is where HTML stops describing and starts rendering.
67
HTML SVG
SVG describes vector graphics in markup that scale perfectly at any size. Icons, logos and illustrations on modern sites are almost always SVG.
HTML Media
5 of 5 topics published68
HTML Media
HTML natively plays audio and video through dedicated elements, no plugins required. Learn the media tags and the formats browsers support.
69
HTML Video
The video element embeds video with controls, posters and captions. Learn how to include it so it plays across browsers and devices.
70
HTML Audio
The audio element embeds sound clips with playback controls. It is used for podcasts, voice notes and background music embedded in pages.
71
HTML Plug-ins
Plug-ins like old Flash once extended the browser, but they are now obsolete and unsafe. Understand their history and why modern HTML replaced them.
72
HTML YouTube
Embedding a YouTube video is a paste-and-go task using the iframe embed code. Learn the parameters for size, autoplay and privacy-enhanced mode.
HTML APIs
6 of 6 topics published73
HTML Web APIs
The browser exposes Web APIs that give pages superpowers — location, storage, workers. This overview maps what is available beyond core HTML.
74
HTML Geolocation
The Geolocation API lets a page request the user's location for maps and local services. Learn how permission and privacy shape its use.
75
HTML Drag and Drop
Drag and drop turns ordinary elements into draggable, droppable interfaces. It is the interaction pattern behind kanban boards and file uploads.
76
HTML Web Storage
Web Storage keeps data in the browser across visits, without cookies. localStorage and sessionStorage power saved preferences and offline-ready apps.
77
HTML Web Workers
Web Workers run JavaScript in the background so heavy work never freezes the page. They are how apps stay smooth while processing big tasks.
78
HTML SSE
Server-Sent Events push live updates from the server to the page over a single connection. They suit notifications, live scores and feeds.
HTML Basics
12 of 12 topics published101
What Is HTML? A Practical Introduction
What HTML actually does, and how it fits with CSS and JavaScript.
102
HTML History — From 1991 to HTML5
How HTML evolved from a simple proposal to the modern living standard.
103
HTML vs CSS — What Each One Actually Does
Why structure and presentation are kept separate, and how they connect.
105
HTML Document Structure
The standard skeleton every HTML page is built from.
106
HTML Syntax Basics
Tags, attributes, nesting rules, and void elements explained.
109
HTML Tags — Paired, Void & Deprecated
The three kinds of HTML tags, and which ones to avoid in new code.
111
HTML Global Attributes
Attributes like id, class and data-* that work on almost any element.
112
HTML Block Elements
Elements that start on a new line and take full width by default.
113
HTML Inline Elements
Elements that flow within text instead of stacking — with a block vs inline comparison.
115
HTML Body Element
Where all visible page content lives, and where scripts commonly go.
116
HTML Doctype
Why the doctype matters — quirks mode vs standards mode.
117
HTML lang Attribute
A small attribute with real accessibility and SEO impact.
Text & Content
19 of 19 topics published201
Headings (h1–h6)
The h1–h6 elements, heading hierarchy, and why it matters for accessibility and SEO.
202
Paragraphs
The p element for blocks of text, and how whitespace collapsing actually works.
203
Line Break (br)
The br element for forced line breaks, and the br vs p comparison.
204
Horizontal Rule (hr)
The hr element as a semantic thematic break, not just a decorative line.
205
Bold Text (b)
The b element for stylistic bold text with no implied importance, and b vs strong.
206
Italic Text (i)
The i element for an alternate voice or tone in text, and i vs em.
207
Underline Text (u)
The u element for non-textual annotation underlines, and why it risks link confusion.
208
Strong
The strong element for genuinely important text, with a full strong vs b comparison.
209
Emphasis (em)
The em element for stress emphasis that changes meaning, with a full em vs i comparison.
210
Mark
The mark element for highlighting text relevant to the reader's current context.
211
Small
The small element for fine print and side comments — not just smaller font size.
212
Deleted Text (del)
The del element for marking removed content, with cite and datetime attributes.
213
Inserted Text (ins)
The ins element for marking added content, usually paired with del for tracked changes.
214
Superscript (sup)
The sup element for exponents, ordinal suffixes, and footnote references.
215
Subscript (sub)
The sub element for chemical formulas and mathematical index notation.
216
Blockquote
The blockquote element for long quotations, with proper attribution and the cite attribute.
217
Quotes (q)
The q element for short inline quotations, and a full blockquote vs q comparison.
218
Preformatted Text (pre)
The pre element for preserving whitespace and line breaks exactly as written.
219
Code Tag
The code element for inline code snippets, and how it pairs with pre for full code blocks.
Links
12 of 12 topics published301
Links (Overview)
What hyperlinks are, the a vs button distinction, and the main link types at a glance.
302
The a Element (Anchor Tag)
The anchor tag in depth — href, target, rel, download, and how it actually works.
303
Absolute URL
Full web addresses that work anywhere, and when they're required over relative paths.
304
Relative URL
Root-relative, same-directory and parent-relative paths, and when each one is correct.
305
Internal Links
Linking within your own site, orphan pages, and why internal linking matters for SEO.
306
External Links
Linking to other sites safely, and the real security reason behind rel="noopener".
307
Email Links
mailto: links with pre-filled subject and body, and spam-safe contact practices.
308
Telephone Links
tel: links for one-tap calling, and correct international phone number formatting.
309
link-target
The target attribute — _self, _blank and when opening a new tab is actually the right call.
310
rel Attribute
Every important rel value on a tags — noopener, nofollow, sponsored and ugc explained.
311
Nofollow Links
The history and modern SEO nuance of rel="nofollow", sponsored, and ugc links.
312
download Attribute
Forcing a file download instead of navigation, and its same-origin limitation.
Images
10 of 10 topics published401
Images (Overview)
What the img tag does and a map of every responsive/accessible image technique.
402
The img Tag
Every important img attribute — src, alt, width/height, loading and srcset.
403
Image alt Attribute
Writing alt text that actually helps screen reader users and search engines.
404
Image width & height
Reserving layout space with width/height to prevent layout shift as images load.
405
figure
Grouping a self-contained image with its caption using the figure element.
406
figcaption
Adding a real caption to a figure that adds context beyond the alt text.
407
Responsive Images
Serving the right image size per device using srcset and sizes.
408
srcset
The srcset attribute in depth — width descriptors and how the browser picks a file.
409
The picture Element
Art direction and modern image format fallback with source and img together.
410
Lazy Loading Images
Deferring offscreen images with loading="lazy" to speed up initial page load.
Lists
6 of 6 topics published501
Lists (Overview)
The three HTML list types, and how to choose the right one for your content.
502
Ordered List
The ol element for numbered, sequential content, with a full ol vs ul comparison.
503
Unordered List
The ul element for bulleted, order-independent content like navigation and features.
504
Description List
The dl, dt and dd elements for term-definition and label-value pairs.
505
Nested List
Placing a list inside a list item correctly, for sub-items and multi-level content.
506
List Style Attributes
The still-valid ol attributes, and why ul styling has moved entirely to CSS.
Tables
13 of 13 topics published601
Tables (Overview)
What tables are for, and every building block that makes one up.
602
The table Tag
The outer table container, and why old presentational attributes are obsolete.
603
Table Row (tr)
The tr element for defining a single row, and keeping cell counts consistent.
604
Table Cell (td)
The td element for regular data cells, and when a cell should be th instead.
605
Table Header (th)
The th element and the scope attribute — the most important accessible-table detail.
606
thead
Grouping a table's header rows into their own explicit section.
607
tbody
Grouping a table's main data rows, and using multiple tbody sections.
608
tfoot
Marking a table's summary row — totals, averages, and closing notes.
609
colspan
Spanning a table cell across multiple columns correctly.
610
rowspan
Spanning a table cell down across multiple rows, with a full colspan vs rowspan table.
611
Table Caption
The caption element for a real, semantically-linked table title.
612
Accessible Tables
The complete checklist for building tables real screen reader users can navigate.
613
Responsive Tables
Keeping wide tables usable on mobile without breaking the real table structure.
HTML Forms
31 of 31 topics published701
Forms (Overview)
What the form element does and a map of every field type and validation technique.
702
The form Tag
The form element in depth — action, method, enctype and novalidate.
703
input
The input element — how name and type drive everything about a form field.
704
Input Types
The complete reference of every HTML5 input type and what each one is for.
705
Text Input
The default type="text" field, and when a more specific input type is actually better.
706
Email Input
type="email" and its built-in format validation, including the multiple attribute.
707
Password Input
type="password", what masking actually protects, and correct autocomplete values.
708
Number Input
type="number", min/max/step, and why it's the wrong choice for phone numbers.
709
Date Input
type="date" and its native calendar picker, with the required YYYY-MM-DD format.
710
Time Input
type="time" and its native time picker, with the required 24-hour HH:MM format.
711
File Input
type="file", the accept attribute, and the required multipart/form-data enctype.
712
Checkbox
type="checkbox" for independent choices, and what an unchecked box actually submits.
713
Radio Button
type="radio", mutually exclusive groups, with a full checkbox vs radio comparison.
714
select
The select dropdown element, including multiple selection and placeholder options.
715
option
The option element, and the key difference between displayed text and submitted value.
716
textarea
The textarea element for multi-line text, with a full input vs textarea comparison.
717
button
The button element and its critical default-type-submit gotcha inside forms.
718
label
The label element — the single most important form accessibility detail.
719
fieldset
Grouping related fields together, and disabling a whole group at once.
720
legend
Captioning a fieldset so screen readers announce the group's purpose.
721
datalist
Attaching autocomplete suggestions to a text input, with a full select vs datalist table.
722
output
Displaying a calculated result tied to other form fields with the output element.
723
Form Validation
HTML5's built-in, JavaScript-free validation system, and why server-side checks still matter.
724
required
Marking a field mandatory, across text inputs, select, checkboxes and radio groups.
725
pattern
Regex-based validation for text fields, with a full required vs pattern comparison.
726
min and max
Setting valid bounds on number, date, time and range inputs.
727
placeholder
Hint text that disappears on typing, and why it's never a substitute for a real label.
728
autocomplete
Standard autocomplete tokens, and why correct values are a real accessibility requirement.
729
form method
The method attribute on form — get vs post at the attribute level.
730
form action
The action attribute — where a form's submitted data actually goes.
731
GET vs POST
The complete comparison — data visibility, security, and when to use each method.
Semantic HTML
16 of 16 topics published801
Semantic HTML — Complete Guide
Why semantic elements matter more than divs, with a full reference layout.
802
The header Element
Introductory content for a page or section — not just for the top of the page.
803
The nav Element
Wrapping major navigation blocks correctly, including multiple-nav labeling.
804
The main Element
Marking a page's primary content, and the skip-to-content accessibility pattern.
805
The section Element
Grouping thematic content, and the heading-based rule for using it correctly.
806
The article Element
Marking self-contained content, and the standalone/syndication test.
807
The aside Element
Tangential content — sidebars, pull-quotes, and related content blocks.
808
The footer Element
Closing content for a page or section, and its accessibility landmark role.
809
The address Element
Marking author contact information specifically — not any physical address.
810
The details and summary Elements
A native, JavaScript-free collapsible widget for FAQs and expandable content.
811
The time Element
Marking dates and durations in a machine-readable format.
812
Semantic vs Non-Semantic HTML
The real difference, and why both have a legitimate place in real pages.
813
div vs section
The heading/theme test for deciding which generic container to use.
814
article vs section
The standalone-content test that separates these two commonly confused elements.
815
header vs head
Two similarly-named, completely unrelated elements — and how to avoid mixing them up.
816
Nav Best Practices
Accessible, SEO-friendly navigation habits — labeling, lists, and current-page marking.
Ready to go from notes to a real career?
Join Aivasu Tech Institute's HTML course — live mentorship, hands-on projects, and 100% placement support in Delhi NCR.
Enroll Now — Free Demo Available✳ Common questions
HTML Notes – FAQs
What students search before reading HTML notes.
Yes — all 197 HTML topics on Aivasu Tech Institute are completely free with no signup or paywall. Read them in the browser on mobile or desktop.
This hub covers 197 structured HTML topics — from absolute basics to advanced, interview-ready concepts — each with short explanations and working code examples.
The notes are written to be self-study friendly, but for job-ready skills, projects and placement support, Aivasu Tech Institute's mentor-led HTML course in Delhi (online + classroom) is the fastest path.
Yes. Each topic is concise and example-driven — ideal for last-minute revision before college exams, campus placements and HTML job interviews in India.
Working AI/ML engineers and full-stack developers from Aivasu Tech Institute, Pitampura Delhi, aligned with our 2026 course curriculum.