1. Historical Origins: Tim Berners-Lee and CERN

In the late 1980s, nuclear physicists working at the European Organization for Nuclear Research (CERN) in Geneva, Switzerland, faced a massive logistical challenge: sharing research papers across diverse computer operating systems without losing document formatting. In 1989, an English computer scientist named Sir Tim Berners-Lee proposed a radical solution: a global information network linked by clickable text called the World Wide Web (WWW).

To enable computers around the world to display documents uniformly, Berners-Lee designed the first version of HTML (HyperText Markup Language) in 1991. The language became public domain in 1993, unleashing the modern commercial and educational internet.

2. Deconstructing the Acronym: What is HTML?

The name HyperText Markup Language reveals its foundational architecture when analyzed word by word:

• HyperText: Unlike traditional printed textbooks where reading must proceed linearly from page 1 to page 2, hypertext enables non-linear navigation. A word or phrase on a web page can contain an embedded reference (a hyperlink) that instantly transports the user to another section of the same page, another document on the same server, or a computer located on the other side of the planet with a single mouse click.
• Markup: In the traditional publishing and printing industries, editors used colored pens to mark up manuscript drafts, writing notes in the margins like "make bold," "set as headline," or "start new paragraph." In web design, markup refers to special digital tags enclosed in angle brackets that surround plain text, instructing the web browser on how to interpret, format, and render that content.
• Language: HTML possesses an internationally standardized grammar, syntax, and vocabulary established and maintained by the World Wide Web Consortium (W3C), ensuring that a web page designed in Patna displays with identical layout in London, Tokyo, or New York.

3. Critical Clarification: Why HTML is NOT a Programming Language

A frequent misconception among students is referring to HTML as a "programming language." In computer science, a true programming language (such as C, Python, Java, or C++) possesses computational logic capabilities: it can perform arithmetic calculations, evaluate conditional decision branches (IF...ELSE), execute iterative loops (FOR, WHILE), and manipulate dynamic variables stored in system memory.

HTML has zero programming logic. You cannot write a loop in pure HTML to calculate factorials or check whether a user's password is correct. HTML is strictly a structural document formatting markup language. Its sole responsibility is to define the layout, semantics, hierarchy, and presentation structure of electronic documents.

4. The Fundamental Tools for HTML Development

Unlike complex software development environments that require expensive compilers or massive integrated development environments (IDEs), learning and writing HTML requires only two simple software tools present on every personal computer:

1. A Plain Text Editor: Software used to write and edit raw HTML code. Standard built-in applications include Notepad on Microsoft Windows, TextEdit on macOS (in plain text mode), or Nano/Gedit on Linux. Professional developers also use code editors such as Visual Studio Code, Sublime Text, or Notepad++. Crucially, word processors like Microsoft Word or LibreOffice Writer should never be used to write HTML, as they embed invisible proprietary formatting codes that corrupt raw web markup.
2. A Web Browser: Software designed to read, parse, interpret, and visually render HTML code into human-readable web pages. Prominent modern browsers include Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari, and Opera.

To create an active web document, the file must be saved with the file extension .html or .htm (for example, index.html or my_school.html). When double-clicked, the operating system launches the default web browser to display the rendered page rather than the raw text.

1. Anatomical Building Blocks: Tags, Elements, and Attributes

Writing HTML requires mastering three fundamental syntactic units that compose all web pages:

• HTML Tag: An instruction keyword enclosed within opening and closing angle brackets (< and >). Tags act as commands that tell the browser what structural role the enclosed text plays. For example, <p> tells the browser that a paragraph begins here. Tags are case-insensitive (meaning <HTML> and <html> are treated identically), but modern W3C standards strictly recommend writing all tags in lowercase.
• HTML Element: An element represents the complete structural component from the opening tag through to the closing tag, including all text and nested content between them. For instance, <h1>Bihar Board Examination</h1> is an HTML element.
• HTML Attribute: Attributes are special modifiers placed exclusively inside the opening tag to configure additional properties or behaviors of the element. Attributes follow a strict name-value pair syntax: name="value". For example, in <p align="center">, align is the attribute name, and "center" is the assigned value enclosed in quotation marks.

2. Container (Paired) Tags vs Empty (Void) Tags

Examinations under the Bihar Board test students extensively on the distinction between the two structural categories of HTML tags:

3. The Mandatory Boilerplate Architecture of an HTML Document

Every valid HTML document adheres to a standardized four-tier nested hierarchy:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title Displayed on Browser Tab</title>
  </head>
  <body>
    <h1>Main Heading on the Web Page</h1>
    <p>This is the visible text rendered in the browser window.</p>
  </body>
</html>

Deconstructing the four foundational tiers:

1. <!DOCTYPE html>: The document type declaration. It is not an HTML tag, but an instructional directive to the web browser that the document is written in modern HTML5 standards. It must always be placed on line 1.
2. <html>...</html>: The root container element. It wraps the entire document from start to finish, signaling to the browser where the web page begins and ends.
3. <head>...</head>: The document header container. It holds administrative metadata, character encodings, links to external stylesheets, and the page title. Crucially, content inside the <head> is not displayed inside the main browser viewing area (viewport).
4. <title>...</title>: Nested strictly inside the <head> section, this container defines the title of the web page. It is displayed on the browser tab, in search engine result snippets, and in bookmarks.
5. <body>...</body>: The main document body container. All visible content—including text, headings, tables, lists, forms, and hyperlinks—must reside strictly inside the <body> tags to be displayed inside the browser viewport.

1. The Heading Hierarchy: <h1> through <h6>

HTML provides six levels of structural heading elements, designated from <h1> (most important / largest) down to <h6> (least important / smallest). Headings organize raw text into clear, navigable topical sections, functioning like chapter titles, section headers, and sub-headings in a printed textbook.

All heading tags are container tags that automatically insert a blank line (margin) before and after the text, rendering the text in bold weight by default.

2. The Paragraph Element: <p>...</p>

To format regular running text into readable blocks, HTML utilizes the paragraph container tag <p>...</p>. Web browsers automatically insert vertical spacing (margins) above and below every paragraph element, cleanly separating consecutive thoughts without requiring manual spacing.

The Phenomenon of Whitespace Collapsing: Beginners often attempt to create spacing by pressing the spacebar repeatedly or pressing Enter multiple times in Notepad. In HTML, web browsers automatically collapse multiple consecutive spaces, tabs, and newlines into a single horizontal space. To create structural separation, developers must use explicit HTML tags rather than keyboard whitespace.

3. The Line Break Tag: <br>

When you need to terminate a line of text immediately and force the subsequent word to start on a fresh new line without creating the large vertical margin of a new paragraph, you use the Line Break tag: <br>.

• The <br> tag is an empty tag; it requires no closing tag (never write </br>).
• Common application: Writing postal addresses, song lyrics, or poetry where lines must break immediately below one another:

<p>
  Bihar School Examination Board,<br>
  Sinha Library Road,<br>
  Patna - 800017, Bihar.
</p>

4. The Horizontal Rule Tag: <hr>

The Horizontal Rule tag <hr> is an empty tag that draws a horizontal thematic divider line across the full width of the web page. It visually separates unrelated sections, shifts topics, or marks the conclusion of an article.

In traditional HTML, the <hr> tag supports several configuration attributes:

• width: Specifies the horizontal length of the line, defined either in pixels (e.g., width="400") or as a percentage of the browser window (e.g., width="80%").
• size: Specifies the thickness or height of the divider line in pixels (e.g., size="4").
• color: Specifies the color of the divider line (e.g., color="navy" or color="#ff0000").
• align: Controls horizontal alignment when the width is less than 100% (align="left", align="center", align="right").

1. Text Styling Paradigms: Physical vs Logical Tags

HTML provides a rich suite of formatting tags designed to alter the visual appearance and semantic importance of specific words within sentences. Computer scientists classify these into two distinct paradigms:

• Physical Formatting Tags: Tags that dictate exact visual appearance to the browser (e.g., "render this text in bold" or "render this text in italics") without conveying any deeper grammatical or semantic meaning.
• Logical / Semantic Formatting Tags: Tags that describe the structural significance, weight, or contextual meaning of the text. Screen readers for visually impaired users and search engine indexing bots use logical tags to determine emphasis and importance.

2. Essential Text Formatting Tags Reference

3. Scientific and Mathematical Notation: Subscript and Superscript

A crucial technical topic in the Class 7 curriculum is formatting scientific formulas and mathematical equations using the <sub> and <sup> tags:

A. The Subscript Tag: <sub>...</sub>

The Subscript tag lowers the enclosed text below the normal typographic baseline and renders it in a smaller font size. It is universally used in chemical formulas and algebraic indices:

• Water formula: H<sub>2</sub>O renders as H₂O
• Sulfuric Acid: H<sub>2</sub>SO<sub>4</sub> renders as H₂SO₄
• Carbon Dioxide: CO<sub>2</sub> renders as CO₂

B. The Superscript Tag: <sup>...</sup>

The Superscript tag raises the enclosed text above the normal typographic baseline and renders it in a smaller font size. It is universally used in mathematical powers, exponents, and ordinal indicators:

• Pythagorean theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> renders as a² + b² = c²
• Algebraic identity: (x + y)<sup>2</sup> = x<sup>2</sup> + 2xy + y<sup>2</sup> renders as (x + y)² = x² + 2xy + y²
• Ordinal date: 15<sup>th</sup> August renders as 15^th August

4. Font Formatting and Document Coloring

In traditional HTML, text visual appearance was customized using the <font> tag and body attributes:

• <font face="Arial" size="4" color="red">Important Notice</font>: Customizes the font typeface family, relative size (1 through 7, where 3 is default), and foreground color.
• <body bgcolor="#e0f2fe" text="#0f172a">: Sets the overall background canvas color and default text color for the entire page.

1. The Purpose and Value of Lists in Web Design

In technical documentation and web publishing, presenting raw facts in continuous unbroken paragraphs causes cognitive fatigue for readers. Lists break complex information into digestible, sequentially structured, or bulleted items that allow users to scan content rapidly.

HTML provides three distinct types of lists: Unordered Lists, Ordered Lists, and Description Lists.

2. Unordered (Bulleted) Lists: <ul>...</ul>

An Unordered List is used when the sequence or order of items is arbitrary and does not affect the meaning (for example, a shopping list or a list of school subjects). The list is wrapped inside the container tag <ul>...</ul>, and each individual item is defined using the list item container tag <li>...</li>.

The bullet shape can be configured using the type attribute on the <ul> tag:

• type="disc": The default setting; displays a solid filled black circular dot.
• type="circle": Displays a hollow, unfilled circular outline.
• type="square": Displays a solid filled square bullet.

<ul type="square">
  <li>Computer Science</li>
  <li>Mathematics</li>
  <li>Science</li>
</ul>

3. Ordered (Numbered) Lists: <ol>...</ol>

An Ordered List is used when the chronological sequence, numerical ranking, or procedural priority of items is strictly mandatory (for example, cooking recipe steps, algorithm stages, or tournament rankings). The list is wrapped inside <ol>...</ol>, and individual entries use <li>...</li>.

The numbering system is configured via two key attributes:

4. Nested Lists (Hierarchical Structures)

A Nested List occurs when an entire secondary list is embedded inside an <li> element of an existing parent list. This allows developers to represent multi-tier outlines, table of contents, and organizational hierarchies:

<ol type="1">
  <li>Hardware Components
    <ul type="circle">
      <li>Central Processing Unit</li>
      <li>Primary Memory (RAM)</li>
    </ul>
  </li>
  <li>Software Components
    <ul type="circle">
      <li>Operating System</li>
      <li>Application Programs</li>
    </ul>
  </li>
</ol>

5. Description (Definition) Lists: <dl>, <dt>, <dd>

Unlike ordered and unordered lists, a Description List does not use bullet points or numbers. It is designed to format glossary terms, dictionaries, and item-description pairs using three specialized tags:

• <dl>...</dl>: The Description List wrapper container.
• <dt>...</dt>: Definition Term (the word or concept being defined; rendered flush-left in bold).
• <dd>...</dd>: Definition Description (the explanatory definition; automatically indented to the right).

1. The Philosophy of Hypertext and Hyperlinks

The defining feature that elevated the World Wide Web above all prior electronic publishing media is the Hyperlink. A hyperlink is an active, clickable navigational reference embedded in text, icons, or images that connects web documents across the globe. Clicking a hyperlink instructs the browser to resolve the target address and instantly retrieve the destination resource.

2. The Anchor Tag: <a>...</a>

In HTML, all hyperlinks are created using the Anchor tag: <a>...</a>. The anchor tag is a container tag that encloses the clickable text visible to the user.

However, writing <a>Click Here</a> produces inert, unclickable text. To make the anchor functional, it requires its primary mandatory attribute: href (which stands for Hypertext Reference). The href attribute specifies the exact destination Uniform Resource Locator (URL) or file path:

<a href="https://www.targetexams.com">Visit TargetExams Portal</a>

In this element, the user sees the blue underlined phrase "Visit TargetExams Portal". When clicked, the browser loads the destination URL specified inside the href attribute.

3. Classification of Hyperlinks

Web developers utilize three distinct categories of hyperlinks depending on the location of the destination resource:

4. Controlling Window Behavior: The target Attribute

By default, when a user clicks a hyperlink, the browser loads the destination page inside the existing browser tab, overwriting the current document. To control this behavior, developers use the target attribute:

• target="_self": The default behavior; opens the linked document in the same window/tab as it was clicked.
• target="_blank": Opens the linked document in a completely new browser tab or independent window. This is considered standard web best practice when linking to external third-party websites, allowing users to visit the external resource without losing their place on your website:

<a href="https://www.targetexams.com" target="_blank">Open TargetExams in New Tab</a>

5. Hyperlink Visual States in Web Browsers

Web browsers automatically communicate the state of a hyperlink using standard color conventions:

• Unvisited Link: Underlined and rendered in bright blue text.
• Visited Link: Underlined and rendered in purple text, signaling that the user's browser history has already logged a visit to that URL.
• Active Link: Underlined and rendered in red text at the precise millisecond the mouse button is clicked down upon it.

1. Syntactic Discipline: Tag Nesting Rules

Writing reliable HTML requires strict adherence to mathematical nesting rules. When multiple container tags are applied to the same span of text, they must follow the LIFO (Last In, First Out) principle. The tag that was opened last must be the very first tag to be closed.

Improper Nesting (Error):

<p><b><i>Bihar Board Examination</b></i></p>  <!-- SYNTAX VIOLATION! -->

Proper Nesting (Correct):

<p><b><i>Bihar Board Examination</i></b></p>  <!-- PERFECT LIFO CLOSURE -->

Notice how the italic tag <i> was opened last and therefore closed first, followed by the bold tag <b>, and finally the paragraph tag <p>.

2. Web File Naming Conventions

Because web servers run on diverse operating systems (such as Linux) that are strictly case-sensitive and interpret special characters differently, students must memorize four golden rules for naming HTML files:

1. Never Use Spaces: Avoid file names like my school project.html. Web servers replace spaces with cumbersome escape codes like my%20school%20project.html, causing broken links. Use hyphens or underscores instead: my-school-project.html.
2. Use Lowercase Exclusively: Always name files in all-lowercase characters (e.g., contact.html rather than Contact.HTML). On Linux servers, Page.html and page.html are treated as two completely different files.
3. The Default Homepage: When a user navigates to a domain name (like targetexams.com), the web server automatically searches for a master home page named index.html. The primary landing page of every website must always be named index.html.
4. Ensure Correct File Extension: When saving from Notepad on Windows, select "All Files (*.*)" in the 'Save as type' dropdown to prevent Windows from secretly appending .txt to your filename (e.g., saving index.html.txt instead of index.html).

3. Inspecting Real-World HTML: Developer Tools

One of the greatest pedagogical advantages of HTML is that all web pages are open-source and visible. Anyone can inspect how any website on Earth is constructed:

• View Page Source: Right-click anywhere on an active web page and select "View Page Source" (or press keyboard shortcut Ctrl + U). The browser opens a new tab displaying the complete raw HTML markup.
• Inspect Element: Right-click directly on a specific heading or button and select "Inspect" (or press F12 / Ctrl + Shift + I). This launches the interactive browser Developer Tools, allowing students to examine individual elements, edit tags live in real-time, and observe immediate layout changes.

4. Web Ethics, Safety, and Digital Citizenship

As students begin creating content for the global web, they must practice responsible digital citizenship:

• Respecting Copyright: Never copy text, code, or media from other websites without explicit permission, licensing, or academic attribution.
• Protecting Personal Privacy: Never publish personal sensitive information—such as home addresses, personal phone numbers, passwords, or bank details—on public web pages.
• Safe Hyperlinking: Avoid creating hyperlinks that redirect users to deceptive, malicious, or unverified websites.