1. Introduction
HTML stands for HyperText Markup Language, and it is the language used to create web pages. A web page is a document that is viewed in a browser, and every web page you have ever opened is written in HTML. The word "HyperText" means text that can contain links to other pages, and "Markup" means marking the text with tags so that the browser knows how to display it. HTML is not a programming language because it does not perform calculations; it is a markup language that describes the structure and look of a page. HTML pages are stored as text files with the extension .html or .htm.
The basic building blocks of HTML are tags. A tag is a code word written between angle brackets, such as or . Most tags come in pairs: an opening tag like and a closing tag like , where the closing tag has a forward slash. The opening tag, the content and the closing tag together form an element. For example, Hello is a bold element. Some tags, like the line break
, do not have a closing tag and are called empty tags. Tags can also have attributes, which are extra instructions written inside the opening tag, such as the src attribute of an image.
3. The Basic Structure of an HTML Page
Every HTML document follows the same skeleton. The document begins with <!DOCTYPE html>, which tells the browser that it is an HTML page. The whole document is enclosed in the tag. Inside it, the section contains information about the page that is not shown on the screen, such as the </strong>, which appears in the browser tab. The <strong><body></strong> section contains everything that is visible on the page, such as headings, paragraphs and pictures. This fixed structure of html, head and body is the skeleton on which every web page is built.</p>
<h2 id="4-headings-paragraphs-and-text-formatting">4. Headings, Paragraphs and Text Formatting</h2>
<p>HTML provides six levels of <strong>headings</strong>, from <h1>, the largest, to <h6>, the smallest. A <strong>paragraph</strong> is written with the <p> tag, and the browser adds space before and after each paragraph. Text can be formatted with simple tags: <b> makes text bold, <i> makes it italic, and <u> underlines it. The <center> tag places content in the middle, and <br> breaks a line, while <hr> draws a horizontal line across the page. The <font> tag can change the colour, size and face of the text, for example <font color="red" size="5">.</p>
<h2 id="5-lists-in-html">5. Lists in HTML</h2>
<p>Lists organise information into easy-to-read points. An <strong>ordered list</strong> is created with the <ol> tag, and its items, written inside <li> tags, are numbered automatically as 1, 2, 3. An <strong>unordered list</strong> is created with the <ul> tag, and its items are shown with bullets such as dots or squares. Each item of both lists is written as <li>item</li>. The type attribute can change the numbering style: type="1" gives numbers, type="A" gives capital letters, and type="I" gives Roman numerals for ordered lists.</p>
<h2 id="6-images-and-links">6. Images and Links</h2>
<p>Pictures make a web page attractive, and an image is inserted with the <strong><img></strong> tag, which is an empty tag. The <strong>src attribute</strong> gives the name or address of the picture file, and the <strong>alt attribute</strong> shows a text message if the picture cannot load, for example <img src="tree.jpg" alt="A tree">. Links connect one page to another and are created with the <strong><a></strong> anchor tag. The <strong>href attribute</strong> holds the destination address, and the link text is written between the opening and closing tags, for example <a href="https://www.school.com">My School</a>. Clicking the link text opens the destination page.</p>
<h2 id="7-tables-in-html">7. Tables in HTML</h2>
<p>A table in HTML is used to show data in rows and columns. The <strong><table></strong> tag creates the table, the <strong><tr></strong> tag creates a table row, the <strong><th></strong> tag creates a table heading cell, and the <strong><td></strong> tag creates a data cell. The border attribute sets the thickness of the table border, and the <strong>align</strong> attribute places the table on the left, right or centre of the page. A table can also be coloured by setting the bgcolor attribute. For example, a table with two rows and two columns is made of two <tr> tags, each containing two <td> tags.</p>
<h2 id="8-saving-and-viewing-an-html-file">8. Saving and Viewing an HTML File</h2>
<p>An HTML file is created in any simple text editor such as Notepad, saved with the .html extension, and then opened in a browser. The steps are simple: type the code, choose Save As from the File menu, type a file name such as mypage.html, choose "All Files" as the file type so that the .html extension is kept, and then double-click the file, which opens automatically in the default browser. Any mistake in the code is not shown as an error message; instead, the browser simply shows the page incorrectly, so the code must be checked carefully.</p>
<h2 id="quick-revision-tables">Quick Revision Tables</h2>
<h3 id="table-1-basic-html-tags">Table 1: Basic HTML Tags</h3>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Use</th>
</tr>
</thead>
<tbody>
<tr>
<td><html></td>
<td>Contains the whole web page</td>
</tr>
<tr>
<td><head></td>
<td>Holds information not shown on the page</td>
</tr>
<tr>
<td><title></td>
<td>Name shown in the browser tab</td>
</tr>
<tr>
<td><body></td>
<td>Holds all visible content</td>
</tr>
<tr>
<td><h1> to <h6></td>
<td>Headings from largest to smallest</td>
</tr>
<tr>
<td><p></td>
<td>Paragraph</td>
</tr>
<tr>
<td><b>, <i>, <u></td>
<td>Bold, italic, underline</td>
</tr>
<tr>
<td><br></td>
<td>Line break</td>
</tr>
</tbody>
</table>
<h3 id="table-2-html-elements-for-special-features">Table 2: HTML Elements for Special Features</h3>
<table>
<thead>
<tr>
<th>Tag or Attribute</th>
<th>Use</th>
</tr>
</thead>
<tbody>
<tr>
<td><ol> / <ul></td>
<td>Ordered and unordered lists</td>
</tr>
<tr>
<td><li></td>
<td>List item</td>
</tr>
<tr>
<td><img src="..."></td>
<td>Insert a picture</td>
</tr>
<tr>
<td><a href="..."></td>
<td>Create a link</td>
</tr>
<tr>
<td><table> / <tr> / <td></td>
<td>Table, table row, data cell</td>
</tr>
<tr>
<td><th></td>
<td>Table heading cell</td>
</tr>
<tr>
<td>bgcolor</td>
<td>Set the background colour</td>
</tr>
<tr>
<td>align</td>
<td>Place content left, right or centre</td>
</tr>
</tbody>
</table>
<h2 id="mind-map">Mind Map</h2>
<div class="mermaid">
graph TD
A["HTML"] --> B["Structure"]
A --> C["Text Formatting"]
A --> D["Lists"]
A --> E["Images and Links"]
A --> F["Tables"]
B --> B1["html, head, body"]
B --> B2["title"]
C --> C1["h1 to h6"]
C --> C2["p, b, i, u, center"]
D --> D1["ol and ul"]
D --> D2["li"]
E --> E1["img with src and alt"]
E --> E2["a with href"]
F --> F1["table, tr, th, td"]
F --> F2["border and align"]
</div>
<h2 id="important-diagrams-svg">Important Diagrams (SVG)</h2>
<h3 id="diagram-1-structure-of-an-html-page">Diagram 1: Structure of an HTML Page</h3>
<div style="text-align: center; margin: 20px 0;">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" font-family="Arial, sans-serif">
<rect width="800" height="600" fill="#fefce8" rx="12"/>
<text x="400" y="55" font-size="24" font-weight="bold" fill="#854d0e" text-anchor="middle">The Skeleton of Every HTML Page</text>
<rect x="120" y="90" width="560" height="380" rx="10" fill="#fef3c7" stroke="#d97706" stroke-width="3"/>
<text x="400" y="120" font-size="18" font-weight="bold" fill="#b45309" text-anchor="middle"><html> ... </html></text>
<rect x="170" y="150" width="460" height="130" rx="10" fill="#dbeafe" stroke="#2563eb" stroke-width="3"/>
<text x="400" y="180" font-size="18" font-weight="bold" fill="#1e3a8a" text-anchor="middle"><head> ... </head></text>
<text x="400" y="210" font-size="14" fill="#1e40af" text-anchor="middle">Holds the <title> and hidden information</text>
<text x="400" y="240" font-size="14" fill="#1e40af" text-anchor="middle">Title appears in the browser tab</text>
<rect x="170" y="310" width="460" height="130" rx="10" fill="#dcfce7" stroke="#16a34a" stroke-width="3"/>
<text x="400" y="340" font-size="18" font-weight="bold" fill="#166534" text-anchor="middle"><body> ... </body></text>
<text x="400" y="370" font-size="14" fill="#15803d" text-anchor="middle">Holds all visible content</text>
<text x="400" y="400" font-size="14" fill="#15803d" text-anchor="middle">Headings, paragraphs, images, links</text>
<rect x="40" y="530" width="720" height="45" rx="10" fill="#ffd700" stroke="#b8860b" stroke-width="2"/>
<text x="400" y="552" font-size="16" font-weight="bold" fill="#7c5a00" text-anchor="middle">Golden Rule: Every HTML page is built inside the html tag with a head and a body.</text>
<text x="400" y="568" font-size="12" fill="#7c5a00" text-anchor="middle">Head holds the title; body holds what the user sees.</text>
</svg>
</div>
<h3 id="diagram-2-tags-attributes-and-elements">Diagram 2: Tags, Attributes and Elements</h3>
<div style="text-align: center; margin: 20px 0;">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" font-family="Arial, sans-serif">
<rect width="800" height="600" fill="#fdf2f8" rx="12"/>
<text x="400" y="55" font-size="24" font-weight="bold" fill="#9d174d" text-anchor="middle">Anatomy of an HTML Element</text>
<rect x="100" y="100" width="600" height="80" rx="10" fill="#ffffff" stroke="#ec4899" stroke-width="3"/>
<text x="400" y="135" font-size="22" font-weight="bold" fill="#9d174d" text-anchor="middle"><img src="tree.jpg" alt="A tree"></text>
<text x="400" y="165" font-size="13" fill="#be185d" text-anchor="middle">Opening tag contains attributes src and alt; this is an empty tag with no closing tag</text>
<rect x="100" y="220" width="600" height="70" rx="10" fill="#ffffff" stroke="#ec4899" stroke-width="3"/>
<text x="400" y="252" font-size="20" font-weight="bold" fill="#9d174d" text-anchor="middle"><a href="https://www.school.com">My School</a></text>
<text x="400" y="276" font-size="13" fill="#be185d" text-anchor="middle">Opening tag + content + closing tag = element</text>
<rect x="120" y="330" width="180" height="60" rx="8" fill="#fce7f3" stroke="#ec4899" stroke-width="2"/>
<text x="210" y="355" font-size="14" font-weight="bold" fill="#9d174d" text-anchor="middle">Opening tag <a></text>
<text x="210" y="375" font-size="12" fill="#be185d" text-anchor="middle">Starts the element</text>
<rect x="320" y="330" width="180" height="60" rx="8" fill="#fce7f3" stroke="#ec4899" stroke-width="2"/>
<text x="410" y="355" font-size="14" font-weight="bold" fill="#9d174d" text-anchor="middle">Content - My School</text>
<text x="410" y="375" font-size="12" fill="#be185d" text-anchor="middle">Visible text</text>
<rect x="520" y="330" width="180" height="60" rx="8" fill="#fce7f3" stroke="#ec4899" stroke-width="2"/>
<text x="610" y="355" font-size="14" font-weight="bold" fill="#9d174d" text-anchor="middle">Closing tag </a></text>
<text x="610" y="375" font-size="12" fill="#be185d" text-anchor="middle">Has forward slash</text>
<rect x="40" y="530" width="720" height="45" rx="10" fill="#ffd700" stroke="#b8860b" stroke-width="2"/>
<text x="400" y="552" font-size="16" font-weight="bold" fill="#7c5a00" text-anchor="middle">Golden Rule: Opening tag + content + closing tag forms an element; attributes add details.</text>
<text x="400" y="568" font-size="12" fill="#7c5a00" text-anchor="middle">Empty tags like br and img have no closing tag.</text>
</svg>
</div>
<h2 id="common-mistakes">Common Mistakes</h2>
<ol>
<li>Forgetting the closing tag. Most tags come in pairs, and </b> needs the forward slash.</li>
<li>Writing tags in capital letters like <HTML>. Tags can be written either way, but small letters are the standard.</li>
<li>Saving an HTML file without the .html extension, so the browser cannot open it as a web page.</li>
<li>Confusing the head and the body. The head holds the title; the body holds the visible content.</li>
<li>Writing <img src="tree.jpg"> without the alt attribute, which is good practice for accessibility.</li>
<li>Forgetting the slash in </a> or </p>, which breaks the element.</li>
<li>Believing HTML can do calculations. HTML is a markup language; it cannot perform arithmetic.</li>
<li>Using <h1> for a small sub-heading. <h1> is the largest heading; smaller headings are <h2> to <h6>.</li>
</ol>
<h2 id="exam-tips">Exam Tips</h2>
<ol>
<li>Write the full form first: HTML stands for HyperText Markup Language.</li>
<li>Draw the html, head and body structure diagram and label each section.</li>
<li>Give one complete example for a tag, such as <b>Hello</b> is a bold element.</li>
<li>Memorise the attribute pairs: img uses src and alt, a uses href.</li>
<li>Learn which tags are empty: <br> and <img> have no closing tag.</li>
<li>Explain the difference between ordered (<ol>) and unordered (<ul>) lists with one example each.</li>
<li>Mention that an HTML file is created in a text editor, saved as .html, and opened in a browser.</li>
</ol>
<h2 id="conclusion">Conclusion</h2>
<p>HTML is the markup language that creates every web page, using tags enclosed in angle brackets. The head and body structure gives every page its skeleton, headings and paragraphs organise the text, lists and tables arrange information, and images and links make pages lively and connected. An HTML file is written in a text editor, saved with the .html extension, and viewed in a browser. Now that we can describe and build pages, we take one more step in the final chapter and learn how to give a computer real instructions through programming fundamentals.</p>
</div>
</div>
<div class="adsense-slot" style="margin-bottom:20px;">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8365906758934350" data-ad-slot="auto" data-ad-format="auto" data-full-width-responsive="true"></ins>
</div>
<!-- Mermaid JS -->
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({startOnLoad:true, theme: 'dark'});
</script>
<button id="scrollToTopBtn" title="Go to top">тЖС</button>
<script>
// Reading Progress
window.addEventListener('scroll', () => {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
const bar = document.getElementById('reading-progress-bar');
if (bar) bar.style.width = scrolled + '%';
// Scroll to Top Button Visibility
const topBtn = document.getElementById('scrollToTopBtn');
if (topBtn) {
if (winScroll > 300) {
topBtn.style.display = 'block';
} else {
topBtn.style.display = 'none';
}
}
});
document.getElementById('scrollToTopBtn')?.addEventListener('click', () => {
window.scrollTo({top: 0, behavior: 'smooth'});
});
// Font Size Control
document.addEventListener('DOMContentLoaded', () => {
const notesBody = document.getElementById('notes-body-content');
const btnIncrease = document.getElementById('btn-font-increase');
const btnDecrease = document.getElementById('btn-font-decrease');
let fontMultiplier = 1.0;
if (notesBody && btnIncrease && btnDecrease) {
btnIncrease.addEventListener('click', () => {
if (fontMultiplier < 1.5) fontMultiplier += 0.1;
notesBody.style.fontSize = fontMultiplier + 'em';
});
btnDecrease.addEventListener('click', () => {
if (fontMultiplier > 0.7) fontMultiplier -= 0.1;
notesBody.style.fontSize = fontMultiplier + 'em';
});
}
});
</script>
<script src="/app.js"></script>
<footer class="footer" style="margin-top: 3rem; text-align: center; padding: 2rem; background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.1);">
<p style="font-size: 0.85rem; color: var(--text-muted); max-width: 800px; margin: 0 auto; line-height: 1.6;">
<strong>Disclaimer / рдЕрд╕реНрд╡реАрдХрд░рдг:</strong> The study materials provided are for educational reference purposes only. Please verify the most up-to-date syllabus and content directly on the official <a href="https://ncert.nic.in" target="_blank" rel="nofollow noopener" style="color: var(--primary); text-decoration: underline;">NCERT website</a>. (рдкреНрд░рджрд╛рди рдХреА рдЧрдИ рдЕрдзреНрдпрдпрди рд╕рд╛рдордЧреНрд░реА рдХреЗрд╡рд▓ рд╢реИрдХреНрд╖рд┐рдХ рд╕рдВрджрд░реНрдн рдХреЗ рд▓рд┐рдП рд╣реИред рдХреГрдкрдпрд╛ рдирд╡реАрдирддрдо рдкрд╛рдареНрдпрдХреНрд░рдо рдХреЗ рд▓рд┐рдП рдЖрдзрд┐рдХрд╛рд░рд┐рдХ NCERT рд╡реЗрдмрд╕рд╛рдЗрдЯ рджреЗрдЦреЗрдВред)
</p>
<p style="margin-top: 1rem;">© 2026 CodeNest Studios | <a href="https://codeneststudios.com">codeneststudios.com</a></p>
</footer>
</body>
</html>