Elementor #29687

By /

Class 10 Computer Applications – Chapter 3: HTML-I (Basic HTML Elements)

A clear, human-friendly guide to the fundamentals of HTML for Grade 10. Each section explains the concept briefly and shows a small working code example you can try in any browser.

Table of Contents

  1. Introduction

  2. HTML and Its Capabilities

  3. A Short History of HTML

  4. Writing HTML Documents

    • 4.1 HTML Document Structure

    • 4.2 HTML Writing Tools

  5. Basic Terminology

  6. Container & Empty Elements

  7. HTML Tag Structure

  8. Basic HTML Tags

    • html, head, title, body

    • Headings (h1…h6)

    • Paragraph & Line Break (p, br)

    • Older text formatting (font, basefont) and the modern CSS way

    • Horizontal Rule (hr)

    • Comments (<!-- ... -->)

  9. Logical & Physical Text Styles (em, strong, i, b, etc.)

  10. Special Characters (HTML Entities)

  11. Combining (Nesting) Tags

  12. Lists in HTML

  • Unordered (ul)

  • Ordered (ol)

  • Definition (dl, dt, dd)

  • Nested Lists

1) Introduction

HTML (HyperText Markup Language) is the standard language for creating webpages. It describes structure (headings, paragraphs, images, links) so that browsers can render content properly.

Mini example

 
<!doctype html>
<html>
<head><title>Hello HTML</title></head>
<body>
<h1>My First Page</h1>
<p>HTML describes the structure of a webpage.</p>
</body>
</html>

2) HTML and Its Capabilities

With HTML you can:

  • Organize content using headings, paragraphs and lists

  • Embed images, audio, video and iframes

  • Link pages together with hyperlinks

  • Create forms to collect user input (with CSS/JS for styling and behavior)

3) History of HTML (Very Brief)

  • 1991–1995: Early HTML specs (HTML 2.0) defined basic elements.

  • 1997–1999: HTML 4.x introduced better structure and forms.

  • 2014–Now: HTML5 standardized multimedia, semantic tags (header, nav, article, section, footer) and forms. Modern HTML is living and continuously improved by WHATWG.

4) Writing HTML Documents

4.1 HTML Document Structure

Every valid page follows a basic skeleton:

 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Visible page content lives here -->
</body>
</html>

4.2 HTML Writing Tools

You can write HTML in:

  • Any text editor (Notepad, VS Code)

  • Online sandboxes (CodePen, jsfiddle)

  • IDEs with live preview extensions

5) Basic Terminology

  • Element: A complete piece like <p>...</p>

  • Start tag / End tag: <p> opens, </p> closes

  • Content: Text or nested elements inside tags

  • Attribute: Extra information inside the start tag, e.g. <img src="cat.jpg" alt="A cat">

6) Container & Empty Elements

  • Container elements wrap content and need a closing tag: <div>…</div>, <p>…</p>.

  • Empty (void) elements don’t wrap content and close themselves: <br>, <hr>, <img>, <meta>, <link>.

 
<p>This is a container element.</p>
<img src="logo.png" alt="Site Logo"> <!-- empty element -->

7) HTML Tag Structure

 
<tagname attribute="value">Content</tagname>

Example:

 
<a href="https://example.com" target="_blank">Visit Example</a>

8) Basic HTML Tags

8.1 <html>

Root element wrapping the entire document.

8.2 <head>

Holds metadata, title, styles, scripts (not visible page content).

8.3 <title>

Shows the page title in the browser tab and helps with SEO.

 
<head>
<title>My Portfolio</title>
</head>

8.4 <body>

Contains everything visible on the page.

8.5 Headings: <h1> to <h6>

Use one <h1> for the main title, then descend in order.

<!–EXAMPLE 3.4–>
<HTML>
<HEAD>
<TITLE>Headings in HTML</title>
</head>
<body>
<body>
<h1>Heading Level 1</H1>
<h2 align=left>Heading Level 2</H2>
<h3 align=right>Heading Level 3</H3>
<h4 align=center>Heading Level 4</H4>
<h5>Heading Level 5</H5>
<h6>Heading Level 6</H6>
</body>
</htmL>

8.6 Text Formatting with <p> and <br>

Text with no break example

<!–EXAMPLE 3.6–>

<HTML>
<HEAD>
<TITLE>text with no break</title>
</head>
<body>
<body>
Hello Welcome to my personal web page. i hose you like it.I’m a student at DPS Delhi, studying in class X. I grew up in aglore, and did my Class VII From there itself.
this is my first attempt at a web page. Enjoy !
</body>
</htmL>

Text with Break Example
<!–EXAMPLE 3.7–>
<HTML>
<HEAD>
<TITLE>text with break</title>
</head>
<body>
<body>
Hello Welcome to my personal web page. i hose you like it.

<p>I’m a student at DPS Delhi, studying in class X. <br>I grew up in aglore, and did my Class VII From there itself.
<p>this is my first attempt at a web page. Enjoy !
</body>
</htmL>

Example of Paragraph Alignment

<!–EXAMPLE 3.8–>
<HTML>
<HEAD>
<TITLE>Paragraph Alignment</title>
</head>
<body>
<body>
<p align=left>align=left Hello Welcome to my personal web page. i hose you like it.</P>
<p align=right>align=right I’m a student at DPS Delhi, studying in class X.I grew up in aglore, and did my Class VII From there itself.<p>
<p align=center>align=center this is my first attempt at a web page. Enjoy !</p>
</body>
</htmL>

 

8.7 Old Formatting with <basefont> & <font> (Deprecated)

Example of base font

<!–EXAMPLE 3.9–>
<HTML>
<HEAD>
<TITLE>base font</title>
</head>
<body>
<body>
this font is being displayed in default font size no basefont size has been set as yet.
<basefont size = 5>
this text has base font size=5
<basefont size = +2>
this text has 40% biger size then the earlier one
<basefont size = -1>
this text has 20% smaller size then the earlier one

</body>
</htmL>

These tags are obsolete in HTML5. Use CSS instead.

Don’t do (old):

 
<!-- Deprecated -->
<font face="Arial" size="4" color="blue">Text</font>

Do (modern CSS):

 
<p style="font-family: Arial; font-size: 1.1rem; color: blue;">Text</p>

8.8 Horizontal Rule: <hr>

 
<p>Section above</p>
<hr>
<p>Section below</p>

8.9 Comments

 
<!-- This is a comment; it won't appear on the page -->

9) Logical & Physical Text Styles

  • Logical (semantic): <em> (emphasis), <strong> (important)

  • Physical (presentational): <i>, <b>, <u> (use sparingly; prefer CSS)

 
<p><strong>Important:</strong> Save your work regularly.</p>
<p>He spoke <em>softly</em> but clearly.</p>

10) Special Characters (Entities)

Use entities when a character has special meaning or isn’t on the keyboard.

 
<p>5 &lt; 10 and 10 &gt; 5. Use &amp; for ampersand. Copyright &copy; 2025.</p>

11) Combining (Nesting) Tags

Tags can be nested; just close them in reverse order.

 
<p>This is <strong>very <em>important</em></strong> text.</p>

12) Lists in HTML

12.1 Unordered List (ul)

 
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

12.2 Ordered List (ol)

 
<ol>
<li>Download VS Code</li>
<li>Install Live Server</li>
<li>Start coding</li>
</ol>

12.3 Definition List (dl, dt, dd)

 
<dl>
<dt>HTML</dt>
<dd>Language for structuring web content.</dd>
<dt>CSS</dt>
<dd>Styles and layouts the web content.</dd>
</dl>

12.4 Nested Lists

 
<ol>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend</li>
</ol>

A Small Complete Example (Try It!)

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grade 10 – HTML Basics Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>HTML Basics</h1>
<p>Welcome to your first HTML page. HTML builds the structure; CSS styles it; JS adds behavior.</p>

<h2>My Learning List</h2>
<ol>
<li>Understand tags and attributes</li>
<li>Write headings &amp; paragraphs</li>
<li>Create lists and links</li>
</ol>

<h2>Contact</h2>
<p>Visit <a href=“https://example.com” target=“_blank”>our website</a>.</p>
<hr>
<p>&copy; 2025 MasterG</p>
</body>
</html>

Quick Tips for Students

  • Use proper nesting and close tags.

  • Keep one main <h1> per page.

  • Prefer semantic tags and CSS for styling.

  • Validate your HTML with the W3C validator for clean, error-free code.

Recent Posts
Class 10 Computer Applications – Chapter 3: HTML-I (Basic HTML Elements)

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top