CBSE Class 7 Notes - Chapter 9: Introduction to HTML

Pratap Sanjay KumarPratap Sanjay Kumar October 08, 2025
CBSE Class 7 Notes - Chapter 9: Introduction to HTML | Pratap Sanjay Sir
Introduction to HTML

Chapter 9: Introduction to HTML

What is an HTML Element?

➥ An HTML element is defined by a start tag, some content, and an end tag: <tagname> Content goes here... </tagname>

  1. HTML stands for HyperText Markup Language.
  2. It is used to create web pages.
  3. HTML is not a programming language; it is a markup language that structures content on the web.
  4. Invented by Tim Berners-Lee in 1991.
  5. HTML tags and elements are not case-sensitive; for example, <HTML>, <Html>, and <html> all mean the same thing.

HTML Elements and Tags


HTML Tags

  1. HTML tags are keywords enclosed in angle brackets < >.
  2. They are used to define elements on a webpage.
  3. Most tags come in pairs: start tag <p> and end tag </p>.
  4. Some tags are empty tags, which do not have content or an end tag (e.g., <br>, <hr>).

HTML Elements

  1. An HTML element consists of: start tag, content, and end tag.
  2. Example of a paragraph element:
<p>This is a paragraph element.</p>

Types of HTML Elements

Type Description Example
Container Elements (Paired Tags) Have a start and end tag; contain content between them <h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
Empty Elements (Single Tags) Do not have content or an end tag; used for line breaks, horizontal lines, images <br>
<hr>
<img src="image.jpg" alt="My Image">

A Simple HTML Document:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>
🚀 Try the Code Yourself & See the Result ↪
HTML History
Year Version / Milestone
1989 Tim Berners-Lee invented WWW
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
HTML for Use Editors

Learn HTML Using Simple Editors

➯ To learn HTML, a simple text editor like Notepad on Windows or TextEdit on Mac is sufficient.
Professional HTML editors are available but are not necessary for beginners.

Simple Step-by-Step

  1. Open Editor: Use a text editor like Notepad (Windows) or TextEdit (Mac), or a WYSIWYG HTML editor (e.g., Adobe Dreamweaver, BlueGriffon).
  2. Write this code: (copy below into your editor)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first webpage.</p>
</body>
</html>
  1. Save the file: File → Save As → name index.html, encoding = UTF-8.
  2. Open in browser: Double-click the file or Right-click → Open With → Chrome/Firefox/Edge.
  3. Edit & refresh: Change the file in your editor, save, then refresh the browser to see results.
HTML Code Saving Method

Some Basic HTML Elements


  1. 🌐HTML Element: Basic building block of HTML.
    <p>This is a paragraph</p>
  2. 🧠Head Element: Contains metadata and title.
    <head><title>Page Title</title></head>
  3. 🏷️Title Element: Defines the page title shown in browser.
    <title>My Webpage</title>
  4. 📄Body Element: Contains all visible content.
    <body>Content goes here</body>
  5. 🎨Background Attribute: Adds a background image.
    <body background="bg.jpg">
  6. 🌈Bgcolor Attribute: Sets background color.
    <body bgcolor="yellow">
  7. 🖋️Pre Element: Displays preformatted text.
    <pre>Text aligned as written</pre>
  8. 📏Text Attribute: Sets text color in body.
    <body text="blue">
  9. ↔️Leftmargin & Topmargin: Set page margins.
    <body leftmargin="20" topmargin="30">
  10. ⏸️Break Element (<br>): Adds a line break.
    <p>Line1<br>Line2</p>
  11. ─Thematic Break (<hr>): Adds a horizontal line.
    <hr>
  12. 📝Paragraph Element (<p>): Defines a paragraph.
    <p>This is a paragraph.</p>
  13. 🔠Heading Element (<h1>–<h6>): Defines headings.
    <h1>Heading 1</h1>
  14. ✍️Formatting Elements: Style text like bold, italic, underline.
    <b>Bold</b>, <i>Italic</i>, <u>Underline</u>
  15. 🔽Subscript (<sub>): Text below baseline.
    H<sub>2</sub>O
  16. 🔼Superscript (<sup>): Text above baseline.
    2<sup>3</sup> = 8
  17. ❌Strike-through (<strike>): Crosses out text.
    <strike>Old Text</strike>
  18. 🎯Center Element (<center>): Centers content.
    <center>This is centered</center>
  19. 🔤Font Element (<font>): Change text color, size, face.
    <font color="red" size="4" face="Arial">Hello</font>



🚀 Try the Code Yourself & See the Result ↪


Chapter 9: Introduction to HTML Que. & Ans.
Click here to access all Questions & Answers
Visit Now ⤴
🔔 Subscribe to My Channel

Post a Comment

0 Comments

Post a Comment