1. Introduction
HTML, which stands for HyperText Markup Language, is the language used to create web pages. Every website we visit, from school websites to online shops, is built using HTML. HTML is not a programming language in the usual sense; it is a markup language, which means it uses tags to describe how the content of a web page should be arranged and displayed. A web browser reads the HTML file and shows the content on the screen in a formatted way.
Learning HTML is the first step towards web development. With just a simple text editor such as Notepad and a browser, we can create our own web pages. This chapter explains what HTML is, the structure of an HTML document, common tags for headings, paragraphs, lists, images and links, the attributes of tags, and how to view an HTML page in a browser. These skills allow us to build simple but real web pages.
2. Structure of an HTML Document
An HTML document has a fixed basic structure. It begins with the DOCTYPE declaration, which tells the browser that the document is written in HTML. The whole content is written inside the tag. The document is divided into two main parts: the head and the body. The
section contains information about the page, such as its title, which appears in the browser tab. The section contains all the content that is visible on the page.
The basic structure looks like this: the tag opens the document, inside it the
tag holds the
, and the <body> tag holds the headings, paragraphs, images and other content. The page ends with the closing </html> tag. Most HTML tags come in pairs: an opening tag such as <p> and a closing tag such as </p>. Some tags, like <br>, which gives a line break, do not have a closing tag. The tags are hidden from the visitor; only the content between them is shown by the browser.</p>
<h2 id="3-headings-and-paragraphs">3. Headings and Paragraphs</h2>
<p>Headings are used to give titles to different sections of a web page. HTML provides six levels of headings, from <h1>, which is the largest and most important, to <h6>, which is the smallest. The heading tags are written as <h1> and </h1>, and the text between them appears as a bold heading. We should use only one <h1> for the main title of a page and use the others for subheadings, in order, to keep the page well organised.</p>
<p>Paragraphs are written using the <p> and </p> tags. The text between these tags appears as a paragraph, with space above and below it. To break a line inside a paragraph, we use the <br> tag, which is a line break tag without a closing tag. We can also make text bold with the <b> tag, italic with the <i> tag, and underline with the <u> tag. Headings and paragraphs together form the basic text content of any web page.</p>
<h2 id="4-lists-images-and-links">4. Lists, Images and Links</h2>
<p>HTML allows us to create lists, insert images and add links. There are two types of lists in HTML. An ordered list, written with the <ol> tag, shows items with numbers, and each item is written with the <li> tag. An unordered list, written with the <ul> tag, shows items with bullet points. Lists are very useful for menus, steps and collections of items. For example, an ordered list shows the steps of an experiment as 1, 2, 3, while an unordered list shows the ingredients as bullets.</p>
<p>Images are inserted with the <img> tag. This tag is different from most others because it has no closing tag and it needs attributes. The src attribute gives the location of the image file, the alt attribute gives a text that is shown if the image cannot be displayed, and width and height set the size. Links are created with the anchor tag <a>. The href attribute contains the address of the page we want to go to, and the text between <a> and </a> is the clickable link. For example, <a href="https://example.com">Click here</a> creates a link.</p>
<h2 id="5-attributes-and-viewing-the-page">5. Attributes and Viewing the Page</h2>
<p>Attributes give extra information to HTML tags. They are always written inside the opening tag, as a name and a value, such as href="https://example.com" or src="pic.jpg". Some important attributes are href for links, src and alt for images, width and height for sizing, and align for aligning content. Attributes make tags more useful by telling the browser exactly how to display the element.</p>
<p>After writing the HTML code, we save the file with the .html extension, such as mypage.html, and open it in any web browser by double-clicking it or using the browser's Open File option. The browser reads the tags and displays the formatted page. If we make a mistake, the browser may still show the page but with errors, so we should check our tags carefully. With practice, we can build complete web pages that combine text, headings, lists, images and links.</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>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><html></td>
<td>Root of the HTML document</td>
</tr>
<tr>
<td><head></td>
<td>Information about the page</td>
</tr>
<tr>
<td><title></td>
<td>Title shown in the browser tab</td>
</tr>
<tr>
<td><body></td>
<td>Visible content of the page</td>
</tr>
<tr>
<td><h1> to <h6></td>
<td>Six levels of headings</td>
</tr>
<tr>
<td><p></td>
<td>Paragraph</td>
</tr>
<tr>
<td><b></td>
<td>Bold text</td>
</tr>
<tr>
<td><i></td>
<td>Italic text</td>
</tr>
<tr>
<td><u></td>
<td>Underlined text</td>
</tr>
</tbody>
</table>
<h3 id="table-2-html-tags-with-attributes">Table 2: HTML Tags with Attributes</h3>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Purpose</th>
<th>Important Attribute</th>
</tr>
</thead>
<tbody>
<tr>
<td><a></td>
<td>Creates a hyperlink</td>
<td>href</td>
</tr>
<tr>
<td><img></td>
<td>Inserts an image</td>
<td>src, alt, width, height</td>
</tr>
<tr>
<td><ol></td>
<td>Ordered (numbered) list</td>
<td>type</td>
</tr>
<tr>
<td><ul></td>
<td>Unordered (bulleted) list</td>
<td>type</td>
</tr>
<tr>
<td><li></td>
<td>List item</td>
<td>value</td>
</tr>
<tr>
<td><br></td>
<td>Line break</td>
<td>none</td>
</tr>
</tbody>
</table>
<h2 id="mind-map">Mind Map</h2>
<div class="mermaid">
flowchart TD
A["HTML Basics"] --> B["Document Structure"]
A --> C["Headings and Paragraphs"]
A --> D["Lists"]
A --> E["Images"]
A --> F["Links"]
B --> B1["<html>"]
B --> B2["<head> and <title>"]
B --> B3["<body>"]
C --> C1["<h1> to <h6>"]
C --> C2["<p>, <b>, <i>, <u>"]
D --> D1["<ol> numbered list"]
D --> D2["<ul> bulleted list"]
D --> D3["<li> list item"]
E --> E1["<img> with src and alt"]
F --> F1["<a> with href"]
</div>
<h2 id="important-diagrams-svg">Important Diagrams (SVG)</h2>
<h3 id="diagram-1-structure-of-an-html-document">Diagram 1: Structure of an HTML Document</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="#eff6ff" rx="12"/>
<text x="400" y="55" font-size="26" font-weight="bold" fill="#1e293b" text-anchor="middle">Structure of an HTML Document</text>
<rect x="80" y="90" width="640" height="70" rx="10" fill="#334155" stroke="#0f172a" stroke-width="3"/>
<text x="400" y="120" font-size="17" font-weight="bold" fill="#ffffff" text-anchor="middle"><html></text>
<text x="400" y="145" font-size="12" fill="#cbd5e1" text-anchor="middle">Root of the document</text>
<rect x="140" y="170" width="520" height="60" rx="10" fill="#3b82f6" stroke="#1e40af" stroke-width="3"/>
<text x="400" y="197" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle"><head></text>
<text x="400" y="218" font-size="12" fill="#dbeafe" text-anchor="middle">Contains <title> - page information</text>
<rect x="140" y="245" width="520" height="120" rx="10" fill="#10b981" stroke="#047857" stroke-width="3"/>
<text x="400" y="272" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle"><body></text>
<text x="400" y="298" font-size="12" fill="#d1fae5" text-anchor="middle"><h1> Heading </h1></text>
<text x="400" y="320" font-size="12" fill="#d1fae5" text-anchor="middle"><p> Paragraph </p></text>
<text x="400" y="342" font-size="12" fill="#d1fae5" text-anchor="middle"><img> and <a> elements</text>
<rect x="80" y="380" width="640" height="55" rx="10" fill="#f59e0b" stroke="#b45309" stroke-width="3"/>
<text x="400" y="408" font-size="17" font-weight="bold" fill="#ffffff" text-anchor="middle"></html></text>
<text x="400" y="428" font-size="12" fill="#fef3c7" text-anchor="middle">End of the document</text>
<rect x="40" y="480" width="720" height="55" rx="10" fill="#ffd700" stroke="#b8860b" stroke-width="2"/>
<text x="400" y="505" font-size="16" font-weight="bold" fill="#7c5a00" text-anchor="middle">Golden Rule: Every HTML document has a head for information and a body for visible content.</text>
<text x="400" y="527" font-size="12" fill="#7c5a00" text-anchor="middle">The browser shows only what is inside the body; the tags themselves are hidden.</text>
</svg>
</div>
<h3 id="diagram-2-how-a-web-page-is-displayed">Diagram 2: How a Web Page is Displayed</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="26" font-weight="bold" fill="#1e293b" text-anchor="middle">From HTML Code to Web Page</text>
<rect x="60" y="140" width="300" height="190" rx="12" fill="#0f172a" stroke="#334155" stroke-width="3"/>
<text x="210" y="175" font-size="15" font-weight="bold" fill="#22d3ee" text-anchor="middle">HTML CODE</text>
<text x="210" y="210" font-size="12" fill="#94a3b8" text-anchor="middle"><html></text>
<text x="210" y="230" font-size="12" fill="#94a3b8" text-anchor="middle"><h1> My School </h1></text>
<text x="210" y="250" font-size="12" fill="#94a3b8" text-anchor="middle"><p> Welcome! </p></text>
<text x="210" y="270" font-size="12" fill="#94a3b8" text-anchor="middle"><a href="..."> Link </a></text>
<text x="210" y="290" font-size="12" fill="#94a3b8" text-anchor="middle"></html></text>
<line x1="362" y1="220" x2="430" y2="220" stroke="#334155" stroke-width="4" marker-end="url(#hm1)"/>
<text x="395" y="200" font-size="13" font-weight="bold" fill="#475569" text-anchor="middle">Browser</text>
<defs>
<marker id="hm1" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#334155"/>
</marker>
</defs>
<rect x="435" y="140" width="300" height="190" rx="12" fill="#ffffff" stroke="#10b981" stroke-width="3"/>
<text x="585" y="185" font-size="22" font-weight="bold" fill="#1e3a8a" text-anchor="middle">My School</text>
<text x="585" y="225" font-size="15" fill="#334155" text-anchor="middle">Welcome!</text>
<text x="585" y="260" font-size="15" fill="#2563eb" text-anchor="middle" text-decoration="underline">Link</text>
<text x="585" y="310" font-size="12" fill="#475569" text-anchor="middle">WEB PAGE (rendered)</text>
<rect x="40" y="480" width="720" height="55" rx="10" fill="#ffd700" stroke="#b8860b" stroke-width="2"/>
<text x="400" y="505" font-size="16" font-weight="bold" fill="#7c5a00" text-anchor="middle">Golden Rule: The browser reads the HTML tags and renders the page that visitors see.</text>
<text x="400" y="527" font-size="12" fill="#7c5a00" text-anchor="middle">Tags like h1, p and a decide the structure and appearance of the content.</text>
</svg>
</div>
<h2 id="common-mistakes">Common Mistakes</h2>
<ol>
<li>Forgetting the closing tag. Most HTML tags come in pairs, and forgetting </p> or </h1> breaks the page structure.</li>
<li>Writing <br> with a closing tag. The <br> tag has no closing tag; it is a self-contained line break.</li>
<li>Confusing <ol> with <ul>. <ol> gives a numbered list, while <ul> gives a bulleted list.</li>
<li>Forgetting the src attribute in an image tag. Without src, the browser does not know which image to show.</li>
<li>Confusing the href attribute of <a> with something else. The href attribute contains the link address.</li>
<li>Saving the HTML file with the wrong extension. HTML files must be saved with the .html extension.</li>
<li>Putting the content in the head instead of the body. Visible content must go in the <body> section.</li>
<li>Using more than one <h1> on a page. The main heading should be a single <h1>, with smaller headings below.</li>
<li>Forgetting the alt attribute for images. The alt text shows if the image cannot be displayed.</li>
<li>Believing HTML is a programming language. HTML is a markup language, not a programming language.</li>
</ol>
<h2 id="exam-tips">Exam Tips</h2>
<ol>
<li>Write the full form of HTML: HyperText Markup Language.</li>
<li>Remember the basic structure: <html>, <head> with <title>, and <body>.</li>
<li>Learn the heading tags from <h1> to <h6> and their order of size.</li>
<li>Know the difference between an ordered list <ol> and an unordered list <ul>.</li>
<li>Remember the attributes: href for links and src, alt for images.</li>
<li>Be able to write a simple HTML page with a heading, paragraph, list, image and link.</li>
<li>Remember that the browser displays only the content, not the tags, and files are saved with .html.</li>
</ol>
<h2 id="conclusion">Conclusion</h2>
<p>HTML is the markup language used to create web pages. An HTML document has a head and a body, headings and paragraphs for text, ordered and unordered lists for items, and image and link tags that use attributes to describe their content. By writing tags correctly and saving the file with the .html extension, we can create web pages that any browser can display. These basics prepare us for creating more advanced pages, and the programming skills we learn in the next chapters build on this same careful, logical way of thinking.</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>