HTML – HyperText Markup Language

In Class 8 Computer Science, "HTML and CSS" forms the essential engineering foundation of the World Wide Web, web development, and digital front-end design, strictly aligned with the JCERT and NCERT curriculum. Every modern website—from search engines to streaming platforms—is constructed using HTML (HyperText Markup Language) for semantic document structure and CSS (Cascading Style Sheets) for presentation, layout, and visual styling. This comprehensive study guide delivers an authoritative exploration of web standards. Students examine modern HTML5 document architecture—including the declaration, head metadata, responsive viewport tags, and structural semantic layout tags (, , , , , , )—which enhance web accessibility and search engine optimization (SEO). The curriculum provides in-depth mastery of data tables (table, thead, tbody, tr, th, td, colspan, rowspan), organized lists, and interactive web forms (, types, , , and ). Furthermore, the guide examines CSS3: integrating styles via Inline, Internal, and External stylesheets; mastering CSS selectors (Element, Class, ID, Grouping, Pseudo-classes); demystifying the fundamental CSS Box Model (Content, Padding, Border, Margin); and introducing modern Flexbox layouts for responsive design.

अध्याय CBT ऑनलाइन टेस्ट दें सभी अध्याय देखें

प्रस्तावना अध्याय अवधारणाएँ सिंटेक्स एवं प्रमुख कमांड हल उदाहरण सामान्य गलतियाँ अध्याय सारांश स्व-मूल्यांकन अभ्यास टेस्ट दें

🌐 How Does a Plain Text File Written in Notepad Turn into Amazon or Netflix?

Every single website you visit on your phone or laptop is fundamentally just a simple text document written in code! If you open any web browser, right-click a page, and select "View Page Source", you will see lines of HTML tags and CSS style rules. Without HTML, the web would have no structure, headings, or forms; without CSS, the web would look like a dry 1990s black-and-white word document. How do web browsers translate simple text tags into responsive buttons, cards, and smooth navigation bars? Let us explore the building blocks of the modern Internet!

यह अध्याय क्यों महत्वपूर्ण है

HTML and CSS are universal skills for software developers, UI/UX designers, digital marketers, and tech entrepreneurs. Understanding how web pages are structured and styled is the gateway into professional web engineering.

अध्ययन से पूर्व (आवश्यक ज्ञान)

Basic familiarity with web browsers (Chrome, Edge, Firefox) and viewing websites.
Familiarity with text editors (Notepad, VS Code) and saving files with file extensions (e.g., .html, .css).
Understanding of file paths and directory folders.

इस अध्याय के लक्ष्य

Construct a valid HTML5 document skeleton using , , , , and <body>.</li> <li>Implement HTML5 semantic structure: <header>, <nav>, <main>, <section>, <article>, and <footer> for accessible layout.</li> <li>Build complex data tables using <table>, <tr>, <th>, <td>, along with colspan and rowspan attributes.</li> <li>Design interactive user input forms using <form>, <label>, and diverse <input> types (text, password, email, radio, checkbox, submit).</li> <li>Differentiate between Inline, Internal, and External CSS, and apply Class (.) and ID (#) selectors accurately.</li> <li>Analyze and calculate dimensions using the CSS Box Model (Content, Padding, Border, Margin) and build Flexbox container layouts.</li> </ul> </div> </div> </div>  <div class="sm-section-card" style="background:#ffffff; border:1px solid #e2e8f0; margin-bottom:24px;"> <div class="sm-sec-head" style="margin-bottom:12px;"> <i class="fa-solid fa-map-location-dot" style="color:#6366f1;"></i> <h2 style="color:#1e293b; font-size:1.15rem;">अध्याय रूपरेखा एवं प्रगति</h2> </div> <div style="display:flex; flex-wrap:wrap; align-items:center; gap:8px;"> <div style="background:#f1f5f9; color:#0f172a; border:1px solid #cbd5e1; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;"> <span style="background:#3b82f6; color:#ffffff; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;">1</span> <span>1. Modern HTML5 Document Skeleton &...</span> </div> <i class="fa-solid fa-arrow-right" style="color:#94a3b8; font-size:11px;"></i> <div style="background:#f1f5f9; color:#0f172a; border:1px solid #cbd5e1; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;"> <span style="background:#3b82f6; color:#ffffff; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;">2</span> <span>2. Tables, Lists & Interactive Web...</span> </div> <i class="fa-solid fa-arrow-right" style="color:#94a3b8; font-size:11px;"></i> <div style="background:#f1f5f9; color:#0f172a; border:1px solid #cbd5e1; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;"> <span style="background:#3b82f6; color:#ffffff; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;">3</span> <span>3. Cascading Style Sheets (CSS3): I...</span> </div> <i class="fa-solid fa-arrow-right" style="color:#94a3b8; font-size:11px;"></i> <div style="background:#f1f5f9; color:#0f172a; border:1px solid #cbd5e1; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;"> <span style="background:#3b82f6; color:#ffffff; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;">4</span> <span>4. The CSS Box Model & Modern Flexb...</span> </div> </div> </div> </div>  <div class="sm-section-card" id="theory"> <div class="sm-sec-head"> <i class="fa-solid fa-book-bookmark"></i> <h2>सम्पूर्ण सैद्धांतिक एवं वैचारिक अध्ययन</h2> </div> <div class="sm-theory-block"> <h3>1. Modern HTML5 Document Skeleton & Semantic Layout Tags</h3> <div class="body-text"><p><strong>HTML (HyperText Markup Language)</strong> utilizes pairs of angle-bracket tags to instruct web browsers how to structure and interpret content. HTML5 introduced standardized <strong>Semantic Elements</strong> that clearly communicate the purpose of each layout section to browsers, screen readers, and search engines:</p> <div style="overflow-x: auto; margin: 15px 0;"> <table style="width: 100%; border-collapse: collapse; color: #f1f5f9; background: #1e293b; border-radius: 8px; overflow: hidden;"> <thead> <tr style="background: #0f172a; color: #38bdf8; text-align: left;"> <th style="padding: 12px 15px; border-bottom: 2px solid #334155;">Semantic Tag</th> <th style="padding: 12px 15px; border-bottom: 2px solid #334155;">Structural Purpose</th> <th style="padding: 12px 15px; border-bottom: 2px solid #334155;">Typical Content</th> </tr> </thead> <tbody> <tr style="border-bottom: 1px solid #334155;"> <td style="padding: 12px 15px; font-weight: bold; color: #fbbf24;"><header></td> <td style="padding: 12px 15px;">Introductory container for a page or article.</td> <td style="padding: 12px 15px;">Website logo, main headline, search bar, author byline.</td> </tr> <tr style="border-bottom: 1px solid #334155;"> <td style="padding: 12px 15px; font-weight: bold; color: #38bdf8;"><nav></td> <td style="padding: 12px 15px;">Declares a block of major navigation hyperlinks.</td> <td style="padding: 12px 15px;">Primary website menus, breadcrumb trails, table of contents.</td> </tr> <tr style="border-bottom: 1px solid #334155;"> <td style="padding: 12px 15px; font-weight: bold; color: #34d399;"><section> & <article></td> <td style="padding: 12px 15px;">Generic thematic grouping vs. self-contained standalone content.</td> <td style="padding: 12px 15px;">News stories, blog posts, forum comments, product feature panels.</td> </tr> <tr style="border-bottom: 1px solid #334155;"> <td style="padding: 12px 15px; font-weight: bold; color: #a855f7;"><aside></td> <td style="padding: 12px 15px;">Content tangentially related to surrounding text.</td> <td style="padding: 12px 15px;">Sidebar widgets, related links, advertisements, author bios.</td> </tr> <tr> <td style="padding: 12px 15px; font-weight: bold; color: #f87171;"><footer></td> <td style="padding: 12px 15px;">Concluding footer information for a page or section.</td> <td style="padding: 12px 15px;">Copyright notices, privacy policy links, sitemaps, contact info.</td> </tr> </tbody> </table> </div></div> </div> <div class="sm-theory-block"> <h3>2. Tables, Lists & Interactive Web Forms</h3> <div class="body-text"><p>Webpages present structured information and gather user input through tables, lists, and forms:</p> <ul style="color: #cbd5e1; line-height: 1.8;"> <li><strong>Data Tables:</strong> Built using <code><table></code>. Rows are created with <code><tr></code> (table row), header cells with <code><th></code> (bold and centered), and data cells with <code><td></code>. Multi-cell spans are achieved using <strong>colspan="n"</strong> (merges $n$ columns horizontally) and <strong>rowspan="n"</strong> (merges $n$ rows vertically).</li> <li><strong>Lists:</strong> Ordered lists (<code><ol></code>) generate numbered sequences ($1, 2, 3$); Unordered lists (<code><ul></code>) create bulleted lists; Description lists (<code><dl></code>) pair terms (<code><dt></code>) with descriptions (<code><dd></code>).</li> <li><strong>Interactive Forms:</strong> Defined by <code><form action="process.php" method="POST"></code>. Forms collect user input via versatile input controls: <ul> <li><code><input type="text"></code>: Single-line text input.</li> <li><code><input type="password"></code>: Masks typed characters with dots for confidentiality.</li> <li><code><input type="radio" name="gender"></code>: Mutually exclusive choice (only one option can be selected in a group).</li> <li><code><input type="checkbox"></code>: Multi-select independent toggles.</li> <li><code><textarea rows="4" cols="50"></code>: Multi-line text entry for comments or addresses.</li> <li><code><select></code> with <code><option></code>: Clickable dropdown selection menu.</li> <li><code><input type="submit" value="Register"></code>: Form submission button.</li> </ul> </li> </ul></div> </div> <div class="sm-theory-block"> <h3>3. Cascading Style Sheets (CSS3): Inclusion Methods & Selectors</h3> <div class="body-text"><p><strong>CSS (Cascading Style Sheets)</strong> dictates the visual presentation, colors, fonts, margins, and layouts of HTML elements. CSS can be integrated into a web project through three methods:</p> <div style="overflow-x: auto; margin: 15px 0;"> <table style="width: 100%; border-collapse: collapse; color: #f1f5f9; background: #1e293b; border-radius: 8px; overflow: hidden;"> <thead> <tr style="background: #0f172a; color: #38bdf8; text-align: left;"> <th style="padding: 12px 15px; border-bottom: 2px solid #334155;">CSS Integration Method</th> <th style="padding: 12px 15px; border-bottom: 2px solid #334155;">Syntax & Placement</th> <th style="padding: 12px 15px; border-bottom: 2px solid #334155;">Evaluation & Best Practice</th> </tr> </thead> <tbody> <tr style="border-bottom: 1px solid #334155;"> <td style="padding: 12px 15px; font-weight: bold; color: #fbbf24;">Inline CSS</td> <td style="padding: 12px 15px;"><code><p style="color: red; font-size: 16px;"></code> applied directly on the HTML tag.</td> <td style="padding: 12px 15px;">Lowest reusability; clutters HTML; used only for rapid one-off testing.</td> </tr> <tr style="border-bottom: 1px solid #334155;"> <td style="padding: 12px 15px; font-weight: bold; color: #38bdf8;">Internal (Embedded) CSS</td> <td style="padding: 12px 15px;">Written inside <code><style></code> tags within the document’s <code><head></code> section.</td> <td style="padding: 12px 15px;">Styles apply to the entire current page; cannot be shared across multiple web pages.</td> </tr> <tr> <td style="padding: 12px 15px; font-weight: bold; color: #34d399;">External CSS (Gold Standard)</td> <td style="padding: 12px 15px;">Linked via <code><link rel="stylesheet" href="style.css"></code> in <code><head></code>.</td> <td style="padding: 12px 15px;">Optimal architecture; a single .css file styles hundreds of pages across an entire website.</td> </tr> </tbody> </table> </div> <p><strong>Core CSS Selectors:</strong></p> <ul style="color: #cbd5e1; line-height: 1.8;"> <li><strong>Element / Type Selector:</strong> Targets HTML tags globally: <code>p { color: #cbd5e1; }</code>.</li> <li><strong>Class Selector (.):</strong> Targets multiple elements sharing a class attribute: <code>.highlight-btn { background: #3b82f6; }</code>.</li> <li><strong>ID Selector (#):</strong> Targets a single unique element on the page: <code>#main-navbar { position: fixed; }</code>.</li> </ul></div> </div> <div class="sm-theory-block"> <h3>4. The CSS Box Model & Modern Flexbox Layouts</h3> <div class="body-text"><p>Every HTML element on a web page is treated by the browser layout engine as an invisible rectangular box. Understanding the <strong>CSS Box Model</strong> is essential for precise spacing:</p> <div style="background: rgba(30, 41, 59, 0.7); border-left: 4px solid #3b82f6; padding: 14px 18px; margin: 15px 0; border-radius: 6px;"> <h4 style="color: #60a5fa; margin: 0 0 8px 0;">The 4 Concentric Layers of the CSS Box Model</h4> <ul style="color: #cbd5e1; margin: 0; padding-left: 20px; line-height: 1.7;"> <li><strong>1. Content:</strong> The core text, image, or video where content appears (defined by <code>width</code> and <code>height</code>).</li> <li><strong>2. Padding:</strong> Transparent inner clearance area surrounding the content, pushing the border outward. Background color fills this space.</li> <li><strong>3. Border:</strong> The outline or frame wrapping around the padding and content (e.g., <code>border: 2px solid #38bdf8;</code>).</li> <li><strong>4. Margin:</strong> Transparent outer clearance area outside the border, separating the element from neighboring elements on the page.</li> </ul> </div> <p><strong>Flexbox Basics:</strong> Setting <code>display: flex;</code> on a parent container turns it into a flexible layout engine. Items can be aligned horizontally with <code>justify-content: space-between;</code> and vertically with <code>align-items: center;</code> without writing complex float or positioning hacks.</p></div> </div> </div>  <div class="sm-section-card" id="formulas"> <div class="sm-sec-head"> <i class="fa-solid fa-laptop-code" style="color:#0284c7;"></i> <h2> प्रोग्रामिंग सिंटेक्स, स्टेटमेंट्स एवं भाषा अनुवादक नियम </h2> </div> <div class="sm-formula-grid"> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">Total Element Rendered Width (Standard Box Model)</div> <div class="f-val">Total Width = Width + Left/Right Padding + Left/Right Border + Left/Right Margin</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> Under default content-box sizing, padding and borders expand the element beyond its set width.</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">Box Sizing Reset Formula</div> <div class="f-val">box-sizing: border-box;</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> Forces width and height to include padding and border, preventing unexpected layout wrapping.</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">External CSS Link Syntax</div> <div class="f-val"><link rel="stylesheet" type="text/css" href="styles.css"></div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> Standard HTML tag placed in <head> to load external styling rules.</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">Hexadecimal Color Structure</div> <div class="f-val">#RRGGBB (e.g., #38bdf8 = Red 56, Green 189, Blue 248)</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> Two hex digits per color channel spanning 00 (0) to FF (255).</div> </div> <div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;"> <div> <div class="f-name">Flexbox Centering Rule</div> <div class="f-val">display: flex; justify-content: center; align-items: center;</div> </div> <div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> Industry-standard shorthand for perfect horizontal and vertical element centering.</div> </div> </div> </div>  <div class="sm-section-card" id="examples"> <div class="sm-sec-head"> <i class="fa-solid fa-graduation-cap" style="color:#059669;"></i> <h2>अवधारणात्मक हल उदाहरण एवं अनुप्रयोग (Solved Examples)</h2> </div> <div class="sm-examples-list"> <div class="sm-example-item"> <span class="q-badge">उदाहरण 1</span> <div class="q-text">Question 1: Write clean, standards-compliant HTML code to create a 3-column, 3-row student marks table with column headers (Roll No, Student Name, Marks). Merge the first two columns of the bottom row using colspan to display "Class Average".</div> <div class="sol-box"> <div style="font-weight:700;color:#15803d;margin-bottom:6px;"><i class="fa-solid fa-check-circle me-1"></i> विस्तृत समाधान / उत्तर:</div> <div style="font-size:14px;color:#1e293b;line-height:1.7;">Answer: Here is the semantic HTML table code: ```html <table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;"> <thead> <tr style="background-color: #0f172a; color: #38bdf8;"> <th>Roll No</th> <th>Student Name</th> <th>Marks</th> </tr> </thead> <tbody> <tr> <td>101</td> <td>Aman Kumar</td> <td>88</td> </tr> <tr> <td>102</td> <td>Priya Sharma</td> <td>94</td> </tr> <tr style="font-weight: bold; background-color: #1e293b; color: #fbbf24;"> <td colspan="2" style="text-align: center;">Class Average</td> <td>91</td> </tr> </tbody> </table> ``` Explanation: `colspan="2"` instructs the browser to expand the "Class Average" cell across 2 horizontal columns, merging the Roll No and Student Name spaces perfectly.</div> </div> </div> <div class="sm-example-item"> <span class="q-badge">उदाहरण 2</span> <div class="q-text">Question 2: Explain the difference between an ID Selector and a Class Selector in CSS. Give syntax examples and describe when to use each.</div> <div class="sol-box"> <div style="font-weight:700;color:#15803d;margin-bottom:6px;"><i class="fa-solid fa-check-circle me-1"></i> विस्तृत समाधान / उत्तर:</div> <div style="font-size:14px;color:#1e293b;line-height:1.7;"><p>Answer:</p> <ol> <li>ID Selector (#):</li> </ol> <ul> <li>Syntax: <code>#main-header { background: #0f172a; }</code></li> <li>Specificity & Rule: An ID must be completely unique within a single HTML page. No two elements can share the same ID value.</li> <li>Use Case: Reserved for major singleton layout components that appear only once per page (e.g., <code>#navbar</code>, <code>#hero-banner</code>, <code>#footer</code>).</li> </ul> <ol start="2"> <li>Class Selector (.):</li> </ol> <ul> <li>Syntax: <code>.card { border-radius: 8px; padding: 16px; }</code></li> <li>Specificity & Rule: A class can be reused across dozens or hundreds of different elements on the same page. A single element can also possess multiple classes (e.g., <code><button class="btn btn-primary"></code>).</li> <li>Use Case: Applied for repeatable UI components like buttons, product cards, alert boxes, and typography styles.</li> </ul> </div> </div> </div> <div class="sm-example-item"> <span class="q-badge">उदाहरण 3</span> <div class="q-text">Question 3: Calculate the total rendered width on screen for a div element with the following CSS properties under the default box model: width: 300px; padding: 20px; border: 5px solid black; margin: 15px.</div> <div class="sol-box"> <div style="font-weight:700;color:#15803d;margin-bottom:6px;"><i class="fa-solid fa-check-circle me-1"></i> विस्तृत समाधान / उत्तर:</div> <div style="font-size:14px;color:#1e293b;line-height:1.7;"><p>Answer: Under the default CSS standard box model (<code>box-sizing: content-box</code>): Total Rendered Width = Content Width + Left Padding + Right Padding + Left Border + Right Border + Left Margin + Right Margin</p> <p>Given:</p> <ul> <li>Content Width = 300px</li> <li>Padding (applied on both left and right) = 20px + 20px = 40px</li> <li>Border (applied on both left and right) = 5px + 5px = 10px</li> <li>Margin (applied on both left and right) = 15px + 15px = 30px</li> </ul> <p>Calculation: Total Width = 300 + 40 + 10 + 30 = 380px. The element occupies 380 pixels of horizontal space on the web page. (Its visual border box width is 350px).</p> </div> </div> </div> <div class="sm-example-item"> <span class="q-badge">उदाहरण 4</span> <div class="q-text">Question 4: What is the difference between an <input type="radio"> and an <input type="checkbox"> in an HTML form? How do you ensure radio buttons behave mutually exclusively?</div> <div class="sol-box"> <div style="font-weight:700;color:#15803d;margin-bottom:6px;"><i class="fa-solid fa-check-circle me-1"></i> विस्तृत समाधान / उत्तर:</div> <div style="font-size:14px;color:#1e293b;line-height:1.7;"><p>Answer:</p> <ol> <li>Behavioral Difference:</li> </ol> <ul> <li>Radio Buttons (<code>type="radio"</code>): Used when the user must pick EXACTLY ONE option from a predefined list of mutually exclusive choices (e.g., Gender: Male / Female / Other, or Yes / No).</li> <li>Checkboxes (<code>type="checkbox"</code>): Used when the user can select ZERO, ONE, or MULTIPLE independent options simultaneously (e.g., Hobbies: Reading, Cricket, Coding, Music).</li> </ul> <ol start="2"> <li>Ensuring Mutual Exclusivity for Radio Buttons: To make radio buttons mutually exclusive, they MUST share the EXACT SAME <code>name</code> attribute:</li> </ol> <pre><code class="language-html"><input type="radio" id="m" name="gender" value="male"> <label for="m">Male</label> <input type="radio" id="f" name="gender" value="female"> <label for="f">Female</label> </code></pre> <p>Because both inputs have <code>name="gender"</code>, selecting "Female" automatically unchecks "Male". If they had different names, both could be checked at once, breaking form logic!</p> </div> </div> </div> <div class="sm-example-item"> <span class="q-badge">उदाहरण 5</span> <div class="q-text">Question 5: Why is External CSS considered superior to Inline CSS and Internal CSS in enterprise web development?</div> <div class="sol-box"> <div style="font-weight:700;color:#15803d;margin-bottom:6px;"><i class="fa-solid fa-check-circle me-1"></i> विस्तृत समाधान / उत्तर:</div> <div style="font-size:14px;color:#1e293b;line-height:1.7;"><p>Answer: External CSS (linking an external <code>.css</code> stylesheet) is the industry standard for 4 reasons:</p> <ol> <li>Complete Separation of Concerns: It strictly decouples content structure (HTML) from visual presentation (CSS), keeping markup clean and readable.</li> <li>Global Site-Wide Consistency: A single external stylesheet (e.g., <code>styles.css</code>) can be linked to 500 different HTML pages across a website. Changing a brand color in one line of CSS updates the entire website instantly.</li> <li>Browser Caching & Speed: Once a browser downloads <code>styles.css</code> on the user’s first visit, it caches the file locally. Subsequent page visits load significantly faster because the styling file does not need to be re-downloaded.</li> <li>Team Collaboration: Front-end developers can write styling rules in CSS files while back-end programmers build HTML templates simultaneously without merge conflicts.</li> </ol> </div> </div> </div> </div> </div>  <div class="sm-section-card" id="mistakes" style="border-color:#fecaca;"> <div class="sm-sec-head" style="border-color:#fee2e2;"> <i class="fa-solid fa-triangle-exclamation" style="color:#dc2626;"></i> <h2 style="color:#991b1b;">सामान्य गलतियाँ एवं परीक्षक के जाल (Examiner Traps)</h2> </div> <div class="sm-mistakes-list"> <div class="sm-mistake-card mb-3"> <div class="sm-trap-box"> <h4><i class="fa-solid fa-circle-xmark"></i> सामान्य भ्रम / गलत उत्तर</h4> <div style="font-size:13.5px;color:#7f1d1d;line-height:1.6;margin-top:6px;">Using identical ID attribute values on multiple elements on the same HTML page.</div> </div> <div class="sm-fix-box" style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:16px;"> <h4 style="font-size:13px;font-weight:800;color:#16a34a;display:flex;align-items:center;gap:6px;"><i class="fa-solid fa-circle-check"></i> सही वैज्ञानिक तथ्य</h4> <div style="font-size:13.5px;color:#14532d;line-height:1.6;margin-top:6px;">An ID must be globally unique per HTML document. If you need to style multiple elements with the same rules, use a Class (.classname) instead of an ID (#idname).</div> </div> </div> <div class="sm-mistake-card mb-3"> <div class="sm-trap-box"> <h4><i class="fa-solid fa-circle-xmark"></i> सामान्य भ्रम / गलत उत्तर</h4> <div style="font-size:13.5px;color:#7f1d1d;line-height:1.6;margin-top:6px;">Forgetting the forward slash in closing HTML tags (e.g. writing <p> instead of </p>).</div> </div> <div class="sm-fix-box" style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:16px;"> <h4 style="font-size:13px;font-weight:800;color:#16a34a;display:flex;align-items:center;gap:6px;"><i class="fa-solid fa-circle-check"></i> सही वैज्ञानिक तथ्य</h4> <div style="font-size:13.5px;color:#14532d;line-height:1.6;margin-top:6px;">Most container HTML elements require a matching closing tag with a leading forward slash (</tagname>). Omitting closing tags causes styles and layouts to leak into subsequent elements.</div> </div> </div> <div class="sm-mistake-card mb-3"> <div class="sm-trap-box"> <h4><i class="fa-solid fa-circle-xmark"></i> सामान्य भ्रम / गलत उत्तर</h4> <div style="font-size:13.5px;color:#7f1d1d;line-height:1.6;margin-top:6px;">Giving radio buttons different name attributes when they belong to the same question.</div> </div> <div class="sm-fix-box" style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:16px;"> <h4 style="font-size:13px;font-weight:800;color:#16a34a;display:flex;align-items:center;gap:6px;"><i class="fa-solid fa-circle-check"></i> सही वैज्ञानिक तथ्य</h4> <div style="font-size:13.5px;color:#14532d;line-height:1.6;margin-top:6px;">Radio buttons must share the exact same name attribute value to establish a mutually exclusive selection group.</div> </div> </div> </div> </div>  <div class="sm-section-card" id="visuals"> <div class="sm-sec-head"> <i class="fa-solid fa-chart-line" style="color:#07a698;"></i> <h2>चित्रात्मक व्याख्या एवं मॉडल</h2> </div> <div style="background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center;overflow-x:auto;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 480" width="100%" height="auto"> <defs> <linearGradient id="webBg" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#0f172a" /> <stop offset="100%" stop-color="#1e293b" /> </linearGradient> </defs> <rect width="850" height="480" fill="url(#webBg)" rx="12" />  <rect x="25" y="20" width="800" height="60" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1.5" /> <text x="425" y="48" fill="#38bdf8" font-size="20" font-weight="bold" text-anchor="middle" font-family="system-ui, sans-serif">HTML5 Semantic Tree & CSS3 Box Model Master Matrix</text> <text x="425" y="68" fill="#94a3b8" font-size="12" text-anchor="middle" font-family="system-ui, sans-serif">JCERT / NCERT Class 8 Computer Science | Web Standards, Forms, Selectors & Spacing</text>  <g transform="translate(35, 95)"> <rect x="0" y="0" width="370" height="260" rx="10" fill="#0f172a" stroke="#38bdf8" stroke-width="1.5" /> <text x="185" y="28" fill="#38bdf8" font-size="15" font-weight="bold" text-anchor="middle" font-family="system-ui, sans-serif">HTML5 Semantic Layout Wireframe</text>  <rect x="20" y="42" width="330" height="34" rx="6" fill="#1e293b" stroke="#fbbf24" /> <text x="185" y="64" fill="#fbbf24" font-size="12" font-weight="bold" text-anchor="middle"><header> (Logo, Title, Top Nav)</text>  <rect x="20" y="82" width="330" height="26" rx="4" fill="#1e293b" stroke="#38bdf8" /> <text x="185" y="100" fill="#38bdf8" font-size="11" font-weight="bold" text-anchor="middle"><nav> Home • Courses • Syllabus • Contact</text>  <rect x="20" y="114" width="220" height="95" rx="6" fill="#1e293b" stroke="#10b981" /> <text x="130" y="138" fill="#34d399" font-size="12" font-weight="bold" text-anchor="middle"><main> Primary Content</text> <text x="130" y="160" fill="#cbd5e1" font-size="10" text-anchor="middle"><section> • <article></text> <text x="130" y="180" fill="#94a3b8" font-size="10" text-anchor="middle">Paragraphs, Tables, Forms</text>  <rect x="250" y="114" width="100" height="95" rx="6" fill="#1e293b" stroke="#a855f7" /> <text x="300" y="145" fill="#c084fc" font-size="11" font-weight="bold" text-anchor="middle"><aside></text> <text x="300" y="168" fill="#cbd5e1" font-size="9" text-anchor="middle">Sidebar</text> <text x="300" y="188" fill="#94a3b8" font-size="9" text-anchor="middle">Ads, Links</text>  <rect x="20" y="215" width="330" height="32" rx="6" fill="#1e293b" stroke="#f87171" /> <text x="185" y="236" fill="#fca5a5" font-size="11" font-weight="bold" text-anchor="middle"><footer> © 2026 TargetExams | Privacy Policy</text> </g>  <g transform="translate(435, 95)"> <rect x="0" y="0" width="390" height="260" rx="10" fill="#0f172a" stroke="#10b981" stroke-width="1.5" /> <text x="195" y="28" fill="#34d399" font-size="15" font-weight="bold" text-anchor="middle" font-family="system-ui, sans-serif">The CSS Box Model Architecture</text>  <rect x="25" y="42" width="340" height="202" rx="8" fill="#1e293b" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="4,2" /> <text x="40" y="60" fill="#fcd34d" font-size="11" font-weight="bold">MARGIN (Outer Transparent Space)</text>  <rect x="50" y="68" width="290" height="152" rx="6" fill="#0f172a" stroke="#38bdf8" stroke-width="2" /> <text x="65" y="86" fill="#7dd3fc" font-size="11" font-weight="bold">BORDER (Stroke Frame)</text>  <rect x="75" y="94" width="240" height="102" rx="6" fill="#1e293b" stroke="#10b981" stroke-width="1.5" /> <text x="90" y="112" fill="#6ee7b7" font-size="11" font-weight="bold">PADDING (Inner Clearance)</text>  <rect x="100" y="120" width="190" height="52" rx="4" fill="#0284c7" /> <text x="195" y="145" fill="#ffffff" font-size="13" font-weight="bold" text-anchor="middle">CONTENT</text> <text x="195" y="160" fill="#e0f2fe" font-size="10" text-anchor="middle">Text, Images, Videos (W x H)</text> </g>  <g transform="translate(25, 370)"> <rect x="0" y="0" width="800" height="85" rx="8" fill="#1e293b" stroke="#475569" stroke-width="1" /> <text x="25" y="26" fill="#38bdf8" font-size="13" font-weight="bold">CSS3 Rules & Selector Specificity:</text> <text x="25" y="48" fill="#cbd5e1" font-size="12">• <strong style="color:#f8fafc">Box Sizing:</strong> box-sizing: border-box; (Includes padding and border inside width).</text> <text x="25" y="68" fill="#cbd5e1" font-size="12">• <strong style="color:#f8fafc">External CSS:</strong> <link rel="stylesheet" href="style.css"> (Highest scalability & caching).</text> <text x="520" y="48" fill="#fcd34d" font-size="12">• <strong style="color:#f8fafc">Selectors:</strong> Element (p) • Class (.btn) • ID (#nav)</text> <text x="520" y="68" fill="#fcd34d" font-size="12">• <strong style="color:#f8fafc">Flexbox:</strong> display: flex; justify-content: center;</text> </g> </svg> </div> </div>  <div class="sm-section-card" id="summary" style="background: #faf5ff; border-color: #e9d5ff;"> <div class="sm-sec-head" style="border-color: #f3e8ff;"> <i class="fa-solid fa-clipboard-check" style="color: #7c3aed;"></i> <h2 style="color: #581c87;">अध्याय का सार संक्षेप एवं 10 मुख्य निष्कर्ष</h2> </div> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 10px;"> <div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);"> <div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 1</div> <div style="font-size: 14px; color: #0f172a; line-height: 1.6;"><ol> <li>HTML provides semantic document structure, while CSS manages visual presentation, typography, colors, and layout.</li> </ol> </div> </div> <div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);"> <div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 2</div> <div style="font-size: 14px; color: #0f172a; line-height: 1.6;"><ol start="2"> <li>Standard HTML5 documents require <!DOCTYPE html>, <html>, <head> (metadata, title, styles), and <body> (visible elements).</li> </ol> </div> </div> <div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);"> <div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 3</div> <div style="font-size: 14px; color: #0f172a; line-height: 1.6;"><ol start="3"> <li>Semantic HTML5 tags (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) improve code clarity, accessibility, and SEO.</li> </ol> </div> </div> <div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);"> <div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 4</div> <div style="font-size: 14px; color: #0f172a; line-height: 1.6;">4. HTML tables use <table>, <tr> (rows), <th> (headers), and <td> (data), with colspan and rowspan to merge cells across axes.</div> </div> <div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);"> <div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 5</div> <div style="font-size: 14px; color: #0f172a; line-height: 1.6;"><ol start="5"> <li>HTML forms collect data through versatile controls: text, password, email, radio (mutually exclusive), checkbox, and submit buttons.</li> </ol> </div> </div> <div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);"> <div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 6</div> <div style="font-size: 14px; color: #0f172a; line-height: 1.6;">6. CSS is applied via Inline (on tag), Internal (<style> in head), or External (.css file linked via <link>), with External being the industry standard.</div> </div> <div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);"> <div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 7</div> <div style="font-size: 14px; color: #0f172a; line-height: 1.6;"><ol start="7"> <li>CSS Selectors target elements by Type (p), Class (.card for reusable elements), or ID (#navbar for unique elements).</li> </ol> </div> </div> <div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);"> <div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 8</div> <div style="font-size: 14px; color: #0f172a; line-height: 1.6;"><ol start="8"> <li>The CSS Box Model consists of 4 concentric layers: Content (innermost), Padding, Border, and Margin (outermost).</li> </ol> </div> </div> <div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);"> <div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 9</div> <div style="font-size: 14px; color: #0f172a; line-height: 1.6;"><ol start="9"> <li>Setting box-sizing: border-box forces element padding and border to be calculated within specified width and height, preventing layout breakage.</li> </ol> </div> </div> <div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);"> <div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 10</div> <div style="font-size: 14px; color: #0f172a; line-height: 1.6;"><ol start="10"> <li>CSS Flexbox (display: flex) creates flexible responsive layouts, aligning items easily via justify-content and align-items.</li> </ol> </div> </div> </div> </div>  <div class="sm-section-card" id="selfcheck" style="border-color: #cbd5e1;"> <div class="sm-sec-head"> <i class="fa-solid fa-pen-to-square" style="color: #0284c7;"></i> <h2>स्व-मूल्यांकन अभ्यास (Check Your Understanding)</h2> </div> <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">मूल वैचारिक स्पष्टता की जांच के लिए नैदानिक प्रश्न। पहले स्वयं हल करें, फिर उत्तर देखें।</p> <div style="display: flex; flex-direction: column; gap: 14px;"> <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;"> <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;"> <span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">1</span> <div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">Which HTML attribute is used to merge three columns horizontally in a table cell?</div> </div> <details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;"> <summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;"> <i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें </summary> <div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;"> <strong style="color: #15803d;">उत्तर:</strong> colspan="3"<br> <span style="color: #64748b; margin-top: 4px; display: block;">The colspan attribute defines how many columns a single <td> or <th> cell spans horizontally across the row.</span> </div> </details> </div> <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;"> <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;"> <span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">2</span> <div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">In CSS, which selector prefix is used to target a class and an ID respectively?</div> </div> <details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;"> <summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;"> <i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें </summary> <div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;"> <strong style="color: #15803d;">उत्तर:</strong> A period (.) for class and a hash (#) for ID.<br> <span style="color: #64748b; margin-top: 4px; display: block;">CSS syntax uses .classname to target class attributes and #idname to target unique id attributes.</span> </div> </details> </div> <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;"> <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;"> <span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">3</span> <div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">What is the outermost layer of the CSS Box Model that separates an element from its neighbors?</div> </div> <details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;"> <summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;"> <i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें </summary> <div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;"> <strong style="color: #15803d;">उत्तर:</strong> Margin<br> <span style="color: #64748b; margin-top: 4px; display: block;">Margin is the transparent outer clearance area situated outside the element border.</span> </div> </details> </div> <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;"> <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;"> <span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">4</span> <div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">Which CSS integration method allows a single stylesheet file to style 50 web pages across an entire website?</div> </div> <details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;"> <summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;"> <i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें </summary> <div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;"> <strong style="color: #15803d;">उत्तर:</strong> External CSS<br> <span style="color: #64748b; margin-top: 4px; display: block;">An External CSS stylesheet (.css) is linked in the <head> of every HTML page, enabling global site-wide design changes in one file.</span> </div> </details> </div> <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;"> <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;"> <span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">5</span> <div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">Which HTML5 semantic element is designed to hold major site navigation links?</div> </div> <details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;"> <summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;"> <i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें </summary> <div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;"> <strong style="color: #15803d;">उत्तर:</strong> <nav><br> <span style="color: #64748b; margin-top: 4px; display: block;">The <nav> semantic tag explicitly designates a section containing navigation links (menus, tables of contents, breadcrumbs).</span> </div> </details> </div> </div> </div>  <div class="sm-assessment-loop" id="cbt-tests"> <div style="display:inline-block;background:rgba(255,255,255,0.2);padding:6px 16px;border-radius:99px;font-size:12.5px;font-weight:700;margin-bottom:12px;"> <i class="fa-solid fa-flag-checkered"></i> अध्याय का अध्ययन पूर्ण हुआ? </div> <div style="display:inline-block;background:rgba(255,255,255,0.2);padding:4px 14px;border-radius:99px;font-size:12px;font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.05em;">अभ्यास के लिए तैयार?</div> <h3 style="font-size:1.45rem;font-weight:800;margin-bottom:8px;">ऑनलाइन CBT टेस्ट देकर तैयारी का मूल्यांकन करें</h3> <p> झारखण्ड बोर्ड परीक्षा पैटर्न पर आधारित बहुविकल्पीय प्रश्नों का ऑनलाइन टेस्ट दें। तुरंत परिणाम, समय विश्लेषण और प्रत्येक प्रश्न का विस्तृत हल प्राप्त करें। </p> <div class="sm-loop-buttons"> <a href="https://www.targetexams.com/school-test-series/cbse/class-8/computer-science/hyper-text-markup-language-html/set-1" class="sm-loop-btn-fnd" style="display:inline-flex;align-items:center;gap:10px;"> <i class="fa-solid fa-play"></i> <div> <div style="font-weight:800;font-size:14.5px;">फाउंडेशन टेस्ट</div> <div style="font-size:11.5px;opacity:0.9;"><i class="fa-solid fa-list-check"></i> 15 MCQs • मूल अवधारणाएँ</div> </div> </a> <a href="https://www.targetexams.com/school-test-series/cbse/class-8/computer-science/hyper-text-markup-language-html/set-1" class="sm-loop-btn-adv" style="display:inline-flex;align-items:center;gap:10px;"> <i class="fa-solid fa-fire"></i> <div> <div style="font-weight:800;font-size:14.5px;">एडवांस्ड टेस्ट</div> <div style="font-size:11.5px;opacity:0.9;"><i class="fa-solid fa-bolt"></i> 15 MCQs • HOTS और ट्रैप्स</div> </div> </a> </div> </div> </div>  <div class="col-lg-4">  <div class="sm-section-card" style="padding:22px;"> <h3 style="font-size:16px;font-weight:800;color:#0f172a;margin-bottom:14px;display:flex;align-items:center;gap:8px;"> <i class="fa-solid fa-book-open text-primary"></i> कक्षा 8 Computer Science के सभी अध्याय </h3> <div style="max-height:480px;overflow-y:auto;padding-right:4px;"> <a href="https://www.targetexams.com/school-syllabus/cbse/class-8/computer-science/introduction-to-computer-language/study-material/hindi" class="sm-chapter-pill-link "> <span>अध्याय 1: कंप्यूटर भाषा का परिचय</span> </a> <a href="https://www.targetexams.com/school-syllabus/cbse/class-8/computer-science/introduction-to-database/study-material/hindi" class="sm-chapter-pill-link "> <span>अध्याय 2: डेटाबेस का परिचय</span> </a> <a href="https://www.targetexams.com/school-syllabus/cbse/class-8/computer-science/ms-access-a-dbms/study-material/hindi" class="sm-chapter-pill-link "> <span>अध्याय 3: एमएस एक्सेस: डीबीएमएस</span> </a> <a href="https://www.targetexams.com/school-syllabus/cbse/class-8/computer-science/computer-networking/study-material/hindi" class="sm-chapter-pill-link "> <span>अध्याय 4: कंप्यूटर नेटवर्किंग</span> </a> <a href="https://www.targetexams.com/school-syllabus/cbse/class-8/computer-science/introduction-to-flash/study-material/hindi" class="sm-chapter-pill-link "> <span>अध्याय 5: फ्लैश का परिचय</span> </a> <a href="https://www.targetexams.com/school-syllabus/cbse/class-8/computer-science/html-hypertext-markup-language/study-material/hindi" class="sm-chapter-pill-link active"> <span>अध्याय 6: HTML – HyperText Markup Language</span> <i class="fa-solid fa-chevron-right text-primary" style="font-size:10px;"></i> </a> <a href="https://www.targetexams.com/school-syllabus/cbse/class-8/computer-science/forms-queries-and-reports/study-material/hindi" class="sm-chapter-pill-link "> <span>अध्याय 7: फॉर्म्स, क्वेरी एवं रिपोर्ट्स</span> </a> <a href="https://www.targetexams.com/school-syllabus/cbse/class-8/computer-science/qbasic/study-material/hindi" class="sm-chapter-pill-link "> <span>अध्याय 8: क्यूबेसिक (QBasic)</span> </a> </div> </div>  <div class="sm-section-card" style="background:#f8fafc;border-color:#cbd5e1;padding:22px;"> <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;"> <div style="width:38px;height:38px;border-radius:10px;background:#4f46e5;color:#fff;display:grid;place-items:center;font-size:18px;"> <i class="fa-solid fa-robot"></i> </div> <div> <h4 style="font-size:15px;font-weight:800;color:#0f172a;margin:0;">AI अध्ययन मित्र</h4> <span style="font-size:12px;color:#64748b;">त्वरित शंका समाधान</span> </div> </div> <p style="font-size:13px;color:#475569;line-height:1.55;margin-bottom:14px;"> <strong>HTML – HyperText Markup Language</strong> में कोई संदेह या प्रश्न है? हमारे AI अध्ययन मित्र से तुरंत समझें। </p> <div style="display:flex;flex-direction:column;gap:8px;"> <a href="javascript:void(0)" onclick="alert('AI अध्ययन मित्र: HTML – HyperText Markup Language के मुख्य बिंदुओं को ध्यान से पढ़ें।')" class="btn btn-sm" style="background:#ffffff;border:1px solid #cbd5e1;font-size:12px;font-weight:600;color:#334155;text-align:left;padding:8px 12px;border-radius:8px;"> 💬 "मुख्य अवधारणाओं को समझाइए" </a> <a href="javascript:void(0)" onclick="alert('AI अध्ययन मित्र: परीक्षा में सामान्य गलतियों से बचें।')" class="btn btn-sm" style="background:#ffffff;border:1px solid #cbd5e1;font-size:12px;font-weight:600;color:#334155;text-align:left;padding:8px 12px;border-radius:8px;"> 💬 "सामान्य गलतियाँ क्या हैं?" </a> <a href="javascript:void(0)" onclick="alert('AI अध्ययन मित्र: अध्याय पढ़ने के बाद टेस्ट हल करें।')" class="btn btn-sm" style="background:#ffffff;border:1px solid #cbd5e1;font-size:12px;font-weight:600;color:#334155;text-align:left;padding:8px 12px;border-radius:8px;"> 💬 "परीक्षा की तैयारी कैसे करें?" </a> </div> </div> </div> </div> </div> </div> <footer class="footer-section pt-120" data-background="https://www.targetexams.com/public/assets/img/bg-img/footer-bg.png"> <div class="footer-top-wrap"> <div class="container footer-container"> <div class="row footer-wrap"> <div class="col-lg-3 col-md-6"> <div class="footer-widget"> <h3 class="widget-header">Get in touch!</h3> <p class="mb-30">India's leading educational platform for School Syllabus (23+ Boards), Online Chapter Test Series, Government Exams, and Computer Courses in partnership with Acesoftech Academy.</p> <div class="footer-contact"> <span class="number"><i class="fa-solid fa-phone"></i><a href="tel:+918583959528">+91 85839 59528</a></span> <a href="mailto:enquiry@targetexams.com" class="mail">enquiry@targetexams.com</a> </div> <ul class="footer-social"> <li><a href="https://www.facebook.com/targetexamsai/" aria-label="Follow Target Exams on Facebook" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></li> <li><a href="https://www.instagram.com/targetexams1" aria-label="Follow Target Exams on Instagram" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></li> <li><a href="https://www.linkedin.com/in/target-exams-2a1475432/" aria-label="Follow Target Exams on LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a></li> <li><a href="https://www.youtube.com/@TargetExams1" aria-label="Follow Target Exams on YouTube" target="_blank" rel="noopener noreferrer"><i class="fab fa-youtube"></i></a></li> </ul> </div> </div> <div class="col-lg-3 col-md-6"> <div class="footer-widget widget-2"> <h3 class="widget-header">Company Info</h3> <ul class="footer-list"> <li><a href="https://www.targetexams.com/about-us">About Us</a></li> <li><a href="https://www.targetexams.com/why-us">Why Us</a></li> <li><a href="https://www.targetexams.com/blogs">Blogs</a></li> <li><a href="https://www.targetexams.com/contact-us">Contact Us</a></li> <li><a href="https://www.targetexams.com/sitemap.html">Sitemap</a></li> </ul> </div> </div> <div class="col-lg-3 col-md-6"> <div class="footer-widget widget-2"> <h3 class="widget-header">Explore Portals</h3> <ul class="footer-list"> <li><a href="https://www.targetexams.com/school-syllabus">School Syllabus (23 Boards)</a></li> <li><a href="https://www.targetexams.com/school-test-series">School Online Test Series</a></li> <li><a href="https://www.targetexams.com/computer-courses">Computer Training Courses</a></li> <li><a href="https://www.targetexams.com/government-exams">Government Recruitment Exams</a></li> <li><a href="https://www.targetexams.com/upcoming-government-exams" style="color: #38bdf8; font-weight: 600;"><i class="fa-solid fa-calendar-check me-1"></i> Upcoming Govt Jobs (2026–27)</a></li> <li><a href="https://www.targetexams.com/upcoming-entrance-exams" style="color: #2dd4bf; font-weight: 600;"><i class="fa-solid fa-calendar-check me-1"></i> Upcoming Entrance Exams (2026–27)</a></li> <li><a href="https://www.targetexams.com/blogs">Blogs & Exam Updates</a></li> </ul> </div> </div> <div class="col-lg-3 col-md-6"> <div class="footer-widget"> <h3 class="widget-header">Recent Posts</h3> <div class="sidebar-post mb-20"> <img src="https://res.cloudinary.com/gnai8nsr/image/upload/v1790076413/schoolsyllabus/cbse/cbse-sample-papers-2027.webp" alt="CBSE Sample Papers 2027 for Class 10 & 12 Released: Download Subject-Wise SQP, Marking Scheme & Complete Board Exam Strategy Guide" width="80" height="80" loading="lazy" decoding="async" style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; aspect-ratio: 1/1;" > <div class="post-content"> <h3 class="title"> <a href="https://www.targetexams.com/blog-details/cbse-sample-papers-2027-class-10-12-download-marking-scheme"> CBSE Sample Papers 2027 for Class 10 & 12 Released: Download Subject-Wise SQP, Marking Scheme & Complete Board Exam Strategy Guide </a> </h3> </div> </div> <div class="sidebar-post mb-20"> <img src="https://res.cloudinary.com/gnai8nsr/image/upload/v1790010450/schoolsyllabus/govt-jobs/isro-recruitment-2026-exam-guide-notification.webp" alt="ISRO Recruitment 2026: Scientist/Engineer 'SC', Technical Assistant & Technician Vacancies — Exam Pattern, Eligibility, Syllabus & Complete Selection Guide" width="80" height="80" loading="lazy" decoding="async" style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; aspect-ratio: 1/1;" > <div class="post-content"> <h3 class="title"> <a href="https://www.targetexams.com/blog-details/isro-recruitment-2026-scientist-engineer-technical-assistant-guide"> ISRO Recruitment 2026: Scientist/Engineer 'SC', Technical Assistant & Technician Vacancies — Exam Pattern, Eligibility, Syllabus & Complete Selection Guide </a> </h3> </div> </div> <div class="sidebar-post mb-20"> <img src="https://res.cloudinary.com/gnai8nsr/image/upload/v1789995947/schoolsyllabus/govt-jobs/bpsc-tre-4-teacher-recruitment-2026.webp" alt="BPSC TRE 4.0 Recruitment 2026: 32,388 Teacher Vacancies Out, Apply Online at bpsc.bih.nic.in" width="80" height="80" loading="lazy" decoding="async" style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; aspect-ratio: 1/1;" > <div class="post-content"> <h3 class="title"> <a href="https://www.targetexams.com/blog-details/bpsc-tre-4-teacher-recruitment-2026-notification-32388-vacancies"> BPSC TRE 4.0 Recruitment 2026: 32,388 Teacher Vacancies Out, Apply Online at bpsc.bih.nic.in </a> </h3> </div> </div> <div class="sidebar-post mb-20"> <img src="https://res.cloudinary.com/gnai8nsr/image/upload/v1789995953/schoolsyllabus/govt-jobs/bpsc-tre-4-teacher-recruitment-2026-hindi.webp" alt="BPSC TRE 4.0 शिक्षक भर्ती 2026: 32,388 पदों के लिए ऑनलाइन आवेदन शुरू, देखें योग्यता, पैटर्न व नियम" width="80" height="80" loading="lazy" decoding="async" style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; aspect-ratio: 1/1;" > <div class="post-content"> <h3 class="title"> <a href="https://www.targetexams.com/blog-details/bpsc-tre-4-teacher-recruitment-2026-notification-32388-vacancies-hindi"> BPSC TRE 4.0 शिक्षक भर्ती 2026: 32,388 पदों के लिए ऑनलाइन आवेदन शुरू, देखें योग्यता, पैटर्न व नियम </a> </h3> </div> </div> </div> </div> </div> </div> </div> <div class="copyright-area"> <div class="container footer-container"> <div class="copyright-content d-flex flex-wrap justify-content-between align-items-center"> <p class="mb-0">Copyright © 2026 TargetExams. All Rights Reserved. (A Unit of Acesoftech Academy)</p> <div class="footer-bottom-links"> <a href="https://www.targetexams.com/blogs" style="color: #cbd5e1; font-size: 13px; margin-right: 15px; text-decoration: none;"> <i class="fa-solid fa-newspaper" style="color: #00A86B;"></i> Blogs </a> <a href="https://www.targetexams.com/sitemap.html" style="color: #cbd5e1; font-size: 13px; margin-right: 15px; text-decoration: none;"> <i class="fa-solid fa-sitemap" style="color: #00A86B;"></i> Sitemap </a> </div> </div> </div> </div> </footer>  <div id="scrollup"> <button id="scroll-top" class="scroll-to-top" aria-label="Scroll to top of page"><i class="fa-solid fa-arrow-up-long"></i></button> </div>   <script src="https://www.targetexams.com/public/assets/js/vendor/jquary-3.6.0.min.js"></script> <script src="https://www.targetexams.com/public/assets/js/vendor/bootstrap-bundle.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script> <script src="https://www.targetexams.com/public/assets/js/vendor/imagesloaded-pkgd.js" defer></script> <script src="https://www.targetexams.com/public/assets/js/vendor/main.js?v=20260819-twomenu2" defer></script> <script src="https://www.targetexams.com/public/assets/js/vendor/meanmenu.js" defer></script> <script src="https://www.targetexams.com/public/assets/js/vendor/nice-select.js" defer></script> <script src="https://www.targetexams.com/public/assets/js/vendor/smooth-scroll.js" defer></script> <script src="https://www.targetexams.com/public/assets/js/vendor/swiper.min.js" defer></script> <script src="https://www.targetexams.com/public/assets/js/vendor/venobox.min.js" defer></script> <script src="https://www.targetexams.com/public/assets/js/vendor/waypoints.min.js" defer></script> <script src="https://www.targetexams.com/public/assets/js/vendor/odometer.min.js" defer></script> <script> (function() { function animateOdometer(el) { var raw = el.getAttribute('data-count'); if (!raw || el.getAttribute('data-animated') === 'true') return; el.setAttribute('data-animated', 'true'); var hasComma = raw.indexOf(',') !== -1; var hasDot = raw.indexOf('.') !== -1; var targetNum = parseFloat(raw.replace(/,/g, '')); if (isNaN(targetNum)) { el.textContent = raw; return; } var duration = 2000; var startTime = null; function step(timestamp) { if (!startTime) startTime = timestamp; var progress = Math.min((timestamp - startTime) / duration, 1); var ease = 1 - Math.pow(1 - progress, 3); var current = targetNum * ease; if (hasDot) { var dec = raw.split('.')[1].length; el.textContent = current.toFixed(dec); } else if (hasComma) { el.textContent = Math.floor(current).toLocaleString('en-US'); } else { el.textContent = Math.floor(current); } if (progress < 1) { requestAnimationFrame(step); } else { el.textContent = raw; } } requestAnimationFrame(step); } function initCounters() { var odos = document.querySelectorAll('.odometer'); if (!odos.length) return; if ('IntersectionObserver' in window) { var obs = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { animateOdometer(entry.target); obs.unobserve(entry.target); } }); }, { threshold: 0.15 }); odos.forEach(function(el) { obs.observe(el); }); } else { odos.forEach(function(el) { animateOdometer(el); }); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initCounters); } else { initCounters(); } })(); </script> <script src="https://www.targetexams.com/public/assets/js/vendor/wow.min.js" defer></script> </body> </html>