Free · 197 Topics · No Signup
HTML Notes
Structure, semantics, forms and accessibility for the modern web — written by Coding Now Tech Institute's mentors. Free to read, structured to actually help you learn.
HTML notes by Coding Now 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 Coding Now 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 publishedHTML 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Link Colors
Link colours signal state to users — unvisited, visited, hover and active. Styling them properly makes navigation intuitive and your site feel polished.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Table Styling
Plain tables look unfinished; striped rows, hover highlights and padding make them professional. Learn the styling recipes used on production dashboards.
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.
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.
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.
Ordered Lists
Ordered lists number items automatically, perfect for instructions, rankings and processes. Learn the type and start attributes that control numbering.
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.
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.
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.
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.
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.
HTML Buttons
Buttons drive every interaction on the web — forms, popups, actions. Learn the button element, its types and how styling changes its meaning.
HTML Iframes
Iframes embed another page inside yours — maps, videos, dashboards. They are powerful but come with security and performance trade-offs worth understanding.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 publishedHTML 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.
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.
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.
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.
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.
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 publishedHTML 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.
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 publishedHTML Media
HTML natively plays audio and video through dedicated elements, no plugins required. Learn the media tags and the formats browsers support.
HTML Video
The video element embeds video with controls, posters and captions. Learn how to include it so it plays across browsers and devices.
HTML Audio
The audio element embeds sound clips with playback controls. It is used for podcasts, voice notes and background music embedded in pages.
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.
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 publishedHTML Web APIs
The browser exposes Web APIs that give pages superpowers — location, storage, workers. This overview maps what is available beyond core HTML.
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.
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.
HTML Web Storage
Web Storage keeps data in the browser across visits, without cookies. localStorage and sessionStorage power saved preferences and offline-ready apps.
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.
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 publishedWhat Is HTML? A Practical Introduction
What HTML actually does, and how it fits with CSS and JavaScript.
HTML History — From 1991 to HTML5
How HTML evolved from a simple proposal to the modern living standard.
HTML vs CSS — What Each One Actually Does
Why structure and presentation are kept separate, and how they connect.
HTML Document Structure
The standard skeleton every HTML page is built from.
HTML Syntax Basics
Tags, attributes, nesting rules, and void elements explained.
HTML Tags — Paired, Void & Deprecated
The three kinds of HTML tags, and which ones to avoid in new code.
HTML Global Attributes
Attributes like id, class and data-* that work on almost any element.
HTML Block Elements
Elements that start on a new line and take full width by default.
HTML Inline Elements
Elements that flow within text instead of stacking — with a block vs inline comparison.
HTML Body Element
Where all visible page content lives, and where scripts commonly go.
HTML Doctype
Why the doctype matters — quirks mode vs standards mode.
HTML lang Attribute
A small attribute with real accessibility and SEO impact.
Text & Content
19 of 19 topics publishedHeadings (h1–h6)
The h1–h6 elements, heading hierarchy, and why it matters for accessibility and SEO.
Paragraphs
The p element for blocks of text, and how whitespace collapsing actually works.
Line Break (br)
The br element for forced line breaks, and the br vs p comparison.
Horizontal Rule (hr)
The hr element as a semantic thematic break, not just a decorative line.
Bold Text (b)
The b element for stylistic bold text with no implied importance, and b vs strong.
Italic Text (i)
The i element for an alternate voice or tone in text, and i vs em.
Underline Text (u)
The u element for non-textual annotation underlines, and why it risks link confusion.
Strong
The strong element for genuinely important text, with a full strong vs b comparison.
Emphasis (em)
The em element for stress emphasis that changes meaning, with a full em vs i comparison.
Mark
The mark element for highlighting text relevant to the reader's current context.
Small
The small element for fine print and side comments — not just smaller font size.
Deleted Text (del)
The del element for marking removed content, with cite and datetime attributes.
Inserted Text (ins)
The ins element for marking added content, usually paired with del for tracked changes.
Superscript (sup)
The sup element for exponents, ordinal suffixes, and footnote references.
Subscript (sub)
The sub element for chemical formulas and mathematical index notation.
Blockquote
The blockquote element for long quotations, with proper attribution and the cite attribute.
Quotes (q)
The q element for short inline quotations, and a full blockquote vs q comparison.
Preformatted Text (pre)
The pre element for preserving whitespace and line breaks exactly as written.
Code Tag
The code element for inline code snippets, and how it pairs with pre for full code blocks.
Links
12 of 12 topics publishedLinks (Overview)
What hyperlinks are, the a vs button distinction, and the main link types at a glance.
The a Element (Anchor Tag)
The anchor tag in depth — href, target, rel, download, and how it actually works.
Absolute URL
Full web addresses that work anywhere, and when they're required over relative paths.
Relative URL
Root-relative, same-directory and parent-relative paths, and when each one is correct.
Internal Links
Linking within your own site, orphan pages, and why internal linking matters for SEO.
External Links
Linking to other sites safely, and the real security reason behind rel="noopener".
Email Links
mailto: links with pre-filled subject and body, and spam-safe contact practices.
Telephone Links
tel: links for one-tap calling, and correct international phone number formatting.
link-target
The target attribute — _self, _blank and when opening a new tab is actually the right call.
rel Attribute
Every important rel value on a tags — noopener, nofollow, sponsored and ugc explained.
Nofollow Links
The history and modern SEO nuance of rel="nofollow", sponsored, and ugc links.
download Attribute
Forcing a file download instead of navigation, and its same-origin limitation.
Images
10 of 10 topics publishedImages (Overview)
What the img tag does and a map of every responsive/accessible image technique.
The img Tag
Every important img attribute — src, alt, width/height, loading and srcset.
Image alt Attribute
Writing alt text that actually helps screen reader users and search engines.
Image width & height
Reserving layout space with width/height to prevent layout shift as images load.
figure
Grouping a self-contained image with its caption using the figure element.
figcaption
Adding a real caption to a figure that adds context beyond the alt text.
Responsive Images
Serving the right image size per device using srcset and sizes.
srcset
The srcset attribute in depth — width descriptors and how the browser picks a file.
The picture Element
Art direction and modern image format fallback with source and img together.
Lazy Loading Images
Deferring offscreen images with loading="lazy" to speed up initial page load.
Lists
6 of 6 topics publishedLists (Overview)
The three HTML list types, and how to choose the right one for your content.
Ordered List
The ol element for numbered, sequential content, with a full ol vs ul comparison.
Unordered List
The ul element for bulleted, order-independent content like navigation and features.
Description List
The dl, dt and dd elements for term-definition and label-value pairs.
Nested List
Placing a list inside a list item correctly, for sub-items and multi-level content.
List Style Attributes
The still-valid ol attributes, and why ul styling has moved entirely to CSS.
Tables
13 of 13 topics publishedTables (Overview)
What tables are for, and every building block that makes one up.
The table Tag
The outer table container, and why old presentational attributes are obsolete.
Table Row (tr)
The tr element for defining a single row, and keeping cell counts consistent.
Table Cell (td)
The td element for regular data cells, and when a cell should be th instead.
Table Header (th)
The th element and the scope attribute — the most important accessible-table detail.
thead
Grouping a table's header rows into their own explicit section.
tbody
Grouping a table's main data rows, and using multiple tbody sections.
tfoot
Marking a table's summary row — totals, averages, and closing notes.
colspan
Spanning a table cell across multiple columns correctly.
rowspan
Spanning a table cell down across multiple rows, with a full colspan vs rowspan table.
Table Caption
The caption element for a real, semantically-linked table title.
Accessible Tables
The complete checklist for building tables real screen reader users can navigate.
Responsive Tables
Keeping wide tables usable on mobile without breaking the real table structure.
HTML Forms
31 of 31 topics publishedForms (Overview)
What the form element does and a map of every field type and validation technique.
The form Tag
The form element in depth — action, method, enctype and novalidate.
input
The input element — how name and type drive everything about a form field.
Input Types
The complete reference of every HTML5 input type and what each one is for.
Text Input
The default type="text" field, and when a more specific input type is actually better.
Email Input
type="email" and its built-in format validation, including the multiple attribute.
Password Input
type="password", what masking actually protects, and correct autocomplete values.
Number Input
type="number", min/max/step, and why it's the wrong choice for phone numbers.
Date Input
type="date" and its native calendar picker, with the required YYYY-MM-DD format.
Time Input
type="time" and its native time picker, with the required 24-hour HH:MM format.
File Input
type="file", the accept attribute, and the required multipart/form-data enctype.
Checkbox
type="checkbox" for independent choices, and what an unchecked box actually submits.
Radio Button
type="radio", mutually exclusive groups, with a full checkbox vs radio comparison.
select
The select dropdown element, including multiple selection and placeholder options.
option
The option element, and the key difference between displayed text and submitted value.
textarea
The textarea element for multi-line text, with a full input vs textarea comparison.
button
The button element and its critical default-type-submit gotcha inside forms.
label
The label element — the single most important form accessibility detail.
fieldset
Grouping related fields together, and disabling a whole group at once.
legend
Captioning a fieldset so screen readers announce the group's purpose.
datalist
Attaching autocomplete suggestions to a text input, with a full select vs datalist table.
output
Displaying a calculated result tied to other form fields with the output element.
Form Validation
HTML5's built-in, JavaScript-free validation system, and why server-side checks still matter.
required
Marking a field mandatory, across text inputs, select, checkboxes and radio groups.
pattern
Regex-based validation for text fields, with a full required vs pattern comparison.
min and max
Setting valid bounds on number, date, time and range inputs.
placeholder
Hint text that disappears on typing, and why it's never a substitute for a real label.
autocomplete
Standard autocomplete tokens, and why correct values are a real accessibility requirement.
form method
The method attribute on form — get vs post at the attribute level.
form action
The action attribute — where a form's submitted data actually goes.
GET vs POST
The complete comparison — data visibility, security, and when to use each method.
Semantic HTML
16 of 16 topics publishedSemantic HTML — Complete Guide
Why semantic elements matter more than divs, with a full reference layout.
The header Element
Introductory content for a page or section — not just for the top of the page.
The nav Element
Wrapping major navigation blocks correctly, including multiple-nav labeling.
The main Element
Marking a page's primary content, and the skip-to-content accessibility pattern.
The section Element
Grouping thematic content, and the heading-based rule for using it correctly.
The article Element
Marking self-contained content, and the standalone/syndication test.
The aside Element
Tangential content — sidebars, pull-quotes, and related content blocks.
The footer Element
Closing content for a page or section, and its accessibility landmark role.
The address Element
Marking author contact information specifically — not any physical address.
The details and summary Elements
A native, JavaScript-free collapsible widget for FAQs and expandable content.
The time Element
Marking dates and durations in a machine-readable format.
Semantic vs Non-Semantic HTML
The real difference, and why both have a legitimate place in real pages.
div vs section
The heading/theme test for deciding which generic container to use.
article vs section
The standalone-content test that separates these two commonly confused elements.
header vs head
Two similarly-named, completely unrelated elements — and how to avoid mixing them up.
Nav Best Practices
Accessible, SEO-friendly navigation habits — labeling, lists, and current-page marking.
Ready to go from notes to a real career?
Join Coding Now Tech Institute's HTML course — live mentorship, hands-on projects, and 100% placement support in Delhi NCR.
Enroll Now — Free Demo AvailableHTML Notes – FAQs
What students search before reading HTML notes.