HTML — Free Notes & Tutorial
Free HTML course with 60+ lessons. Learn HTML tags, forms, tables, semantic HTML, HTML5 and more. Start web development at SikshaSarovar.
This HTML course is part of Siksha Sarovar and is 100% free for students in India — no sign-up required to read. It contains 30 structured lessons with examples, and pairs with our free online compiler and AI tutor.
What you will learn
- HTML tags
- Forms
- Tables
- Semantic HTML
- Accessibility
- HTML5
Course content (30 lessons)
- 1. Web Concepts & Environment — Web Design Definition : Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design.…
- 2. HTML History & Evolution — Origin HyperText Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It was initially developed by Sir Tim Berners-Lee…
- 3. HTML Introduction — Definition Breakdown HTML stands for HyperText Markup Language . Let's break it down: HyperText : refers to "Text within Text". It is text that contains links to other texts…
- 4. Head Section Elements — The <head element is a container for metadata and resources. It serves as the "brain" of the webpage, defining properties that affect how the page loads and behaves. 1. The Title…
- 5. Types of Tags — There are two main types of tags in HTML: 1. Container Tags (Paired Tags) Definition : Tags that have both an opening (<tag ) and a closing (</tag ) tag. Content is placed between…
- 6. HTML Comments — Purpose of Comments Comments are text snippets inserted into the code that are ignored by the browser . They are not displayed to the user but are visible in the "View Source"…
- 7. Heading Tags — Purpose of Headings Headings are used to define the titles and subtitles of a webpage. They provide a structural hierarchy, similar to a book's Table of Contents. The Hierarchy…
- 8. Paragraph Tag — Paragraphs The <p tag defines a paragraph . It is the most common element for text content. Characteristics 1. Block-Level Element : A paragraph always starts on a new line and…
- 9. Text Formatting — HTML contains several tags dedicated to defining the visual appearance of text. These tags control how text looks , but do not necessarily convey importance. Physical Style Tags…
- 10. Semantic Formatting — Difference Between Visual and Semantic Visual tags ( <b , <i ) only change the look . Semantic tags ( <strong , <em ) describe the meaning (semantics) of the text to the browser…
- 11. Subscript & Superscript — Definition Subscript and Superscript tags are used to specific formatting where text appears smaller and either below or above the normal line of type. 1. Subscript <sub…
- 12. Anchor Tag — Definition The <a (Anchor) tag is the most essential tag in HTML. It defines a hyperlink , which is used to link from one page to another. key Attribute: href href stands for…
- 13. Target Attribute — Definition The target attribute specifies where to open the linked document . Attribute Values 1. self (Default): Opens the link in the same window/tab as it was clicked. This is…
- 14. Image Tag — Definition The <img tag is used to embed an image into a web page. Type : It is an empty tag (it contains attributes only, and does not have a closing tag). Key Attributes 1. src…
- 15. Image & Link Integration — Concept Images do not have to be static. You can make an image clickable (act as a button) by nesting the <img tag inside an <a tag. How It Works 1. Open an anchor tag: <a…
- 16. Unordered Lists — Definition An unordered list is a collection of related items that have no specific order (sequence does not matter). The items are typically marked with bullets. Syntax <ul :…
- 17. Ordered Lists — Definition An ordered list is used when the sequence of items is important (e.g., recipes, instructions, ranking). Items are automatically numbered. Syntax <ol : Defines the…
- 18. Description Lists — Definition A Description List (formerly Definition List) is a list of terms, with a description of each term. It is excellent for glossaries , metadata (key-value pairs), or FAQs…
- 19. Div Tag — Definition The <div (Division) tag is a generic block-level container . It has no semantic meaning (it doesn't tell the browser "this is a header" or "this is an article"). Usage…
- 20. Section & Inline Tags — Definition Semantic tags are tags that clearly describe their meaning to both the browser and the developer. Semantic Sectioning Tags Since HTML5, we have specific tags that act…
- 21. Table Structure — Definition HTML Tables allow web developers to arrange data into rows and columns. Core Structure <table : The root container. <thead : Groups header content (used for…
- 22. Table Merging — Definition Table merging allows a single cell to span across multiple rows or columns, similar to the "Merge & Center" feature in spreadsheet software like Excel. 1. Colspan…
- 23. Forms Basics — Definition The <form element allows users to enter data, which is then sent to a server for processing. Key Attributes 1. action : The URL where the form data is sent when…
- 24. Labels & Text Fields — Definition The <label tag defines a caption for a form element. Accessibility : Screen readers read the label when the user focuses the input. Usability : Clicking the label text…
- 25. Radio & Checkbox — Radio Buttons ( type="radio" ) Use Case : When the user must select exactly one option from a defined set. Grouping : All radio buttons in a group must share the same name…
- 26. Select & Textarea — Select Dropdown ( <select ) Creates a drop-down list to save space. <select : The container. <option : Defines each item in the list. selected Attribute : Pre-selects an option.…
- 27. Form Actions & Attributes — Validation attributes HTML5 introduced built-in form validation. required : The user cannot submit the form until this field is filled. minlength / maxlength : Limits the number…
- 28. Buttons & Fieldset — Button Types Buttons inside a form behave differently based on their type . ALWAYS specify the type. 1. type="submit" : The default behavior. When clicked, it validates and sends…
- 29. Advanced Elements — 1. Classes & IDs These are global attributes used for CSS and JavaScript. id ( ) : A Unique Identifier . No two elements on a page can have the same ID. Used for bookmarks,…
- 30. Multimedia — Video The <video tag embeds a media player. Attributes : controls : Shows play/pause buttons, volume, etc. autoplay : Starts playing automatically (often blocked by browsers if…
1. Web Concepts & Environment
Web Design
Definition: Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design.
The Internet vs. The WWW
Many people use the terms "Internet" and "World Wide Web" (WWW) interchangeably, but they are different things.
Definition
- The Internet: A massive network of networks. It connects millions of computers globally. It is the hardware (cables, routers, servers).
- The World Wide Web (WWW): A way of accessing information over the medium of the Internet. It is the software (pages, sites, links).
Difference Table
| Feature | The Internet | The World Wide Web (WWW) |
|---|---|---|
| Nature | Hardware (Network of Networks) | Software (Information Space) |
| Origin | Late 1960s (ARPANET) | 1989 (Tim Berners-Lee) |
| Function | Connects computers | Connects documents/pages |
| Protocol | TCP/IP | HTTP/HTTPS |
Web Page
Definition: A web page (or webpage) is a document for the World Wide Web that is identified by a unique Uniform Resource Locator (URL) and is written in HTML.
- Website: A collection of related web pages.
Front End vs Back End
Front End: Front-end developers focus on designing the physical appearance of websites with front-end programming languages. The visual aspect of a website is the result of front-end development — including fonts, colors, layout, and graphics.
- Technology Used: HTML, CSS, JavaScript.
Back End: Back-end developers create the structure or logic of a website by using server-side programming languages. They write code that tells the website how to bring the front-end programming languages alive in the browser.
- Technology Used: Python, Java, Ruby, PHP.
Scripting Types
Client-Side Scripting: Scripting that runs in the user's browser (e.g., JavaScript).
- Enhances user experience instantly (alerts, validation).
- Minimizes server requests.
- Uses HTML/CSS/JS.
Server-Side Scripting: Scripting that runs on the web server (e.g., PHP, Node.js).
- Handles databases and customizes content.
- Essential for dynamic sites (e-commerce, logins).
Website Types
Static Website:
- Prebuilt source code (HTML/CSS/JS).
- No server-side processing or database interaction.
- Fast and low cost, but content is fixed.
Dynamic Website:
- Generated at runtime based on user demand.
- Interacts with databases.
- Slower but allows updates and personalization.
Responsiveness
It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen (desktops, tablets, phones).
Setting Up Environment (VS Code)
- Download: Search "VS Code download" and get the installer for your OS.
- Install: Run installer, accept license, choose paths.
- Launch: Open VS Code from Start menu.
File Creation:
- Create new file:
Ctrl+N - Save file:
Ctrl+S(Save as.html)
2. HTML History & Evolution
Origin
HyperText Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It was initially developed by Sir Tim Berners-Lee in late 1991 at CERN.
- Motivation: To allow scientists to share research papers and documents electronically across different computer systems.
- Result: It laid the foundation for the World Wide Web (WWW).
Evolution Timeline
HTML has undergone significant changes to support multimedia, scripting, and complex applications.
- 1991 - HTML 1.0: Created by Tim Berners-Lee. Deeply basic, text-oriented, included tags like
<h1>and<p>but no images or tables. - 1995 - HTML 2.0: The first standard version. Added forms (
<input>) which made the web interactive. - 1997 - HTML 3.2: Recommended by W3C. Added tables, applets, and text-flow around images, but suffered from browser compatibility issues (Netscape vs IE).
- 1999 - HTML 4.01: A major milestone. It separated structure (HTML) from presentation (CSS), cleaning up the code.
- 2000 - XHTML 1.0: A stricter, XML-based version of HTML. It required perfect syntax (e.g., all tags must be closed, lowercase attributes).
- 2004 - WHATWG: The Web Hypertext Application Technology Working Group formed to evolve HTML when W3C focused on XHTML 2.0.
- 2014 - HTML5: published as a W3C Recommendation. It introduced semantic elements (
<header>,<article>), multimedia (<video>,<audio>), and APIs (Geolocation, Canvas).
Role of W3C
The World Wide Web Consortium (W3C) is the international standards organization for the World Wide Web.
- Function: To develop protocols and guidelines (like HTML, CSS) that ensure long-term growth of the Web.
- Goal: Ensure that all browsers display web pages consistently.
Frequently asked questions
Is the HTML course really free?
Yes. The entire HTML course on Siksha Sarovar is free to read with no account required. You can optionally sign in with Google to save your progress.
Do I get a certificate for HTML?
Yes — finish the lessons and pass the quiz to earn a free, verifiable certificate you can share on LinkedIn or with recruiters.
Can I run code while learning?
Yes. The built-in online compiler runs C, C++, Python, Java, PHP, JavaScript, C# and SQL directly in your browser — no installation needed.