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>
- HTML stands for HyperText Markup Language.
- It is used to create web pages.
- HTML is not a programming language; it is a markup language that structures content on the web.
- Invented by Tim Berners-Lee in 1991.
- 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
- HTML tags are keywords enclosed in angle brackets < >.
- They are used to define elements on a webpage.
- Most tags come in pairs: start tag <p> and end tag </p>.
- Some tags are empty tags, which do not have content or an end tag (e.g., <br>, <hr>).
HTML Elements
- An HTML element consists of: start tag, content, and end tag.
- 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>
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
- Open Editor: Use a text editor like Notepad (Windows) or TextEdit (Mac), or a WYSIWYG HTML editor (e.g., Adobe Dreamweaver, BlueGriffon).
- 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>
- Save the file: File → Save As → name index.html, encoding = UTF-8.
- Open in browser: Double-click the file or Right-click → Open With → Chrome/Firefox/Edge.
- Edit & refresh: Change the file in your editor, save, then refresh the browser to see results.
Some Basic HTML Elements
- 🌐HTML Element: Basic building block of HTML.
<p>This is a paragraph</p> - 🧠Head Element: Contains metadata and title.
<head><title>Page Title</title></head> - 🏷️Title Element: Defines the page title shown in browser.
<title>My Webpage</title> - 📄Body Element: Contains all visible content.
<body>Content goes here</body> - 🎨Background Attribute: Adds a background image.
<body background="bg.jpg"> - 🌈Bgcolor Attribute: Sets background color.
<body bgcolor="yellow"> - 🖋️Pre Element: Displays preformatted text.
<pre>Text aligned as written</pre> - 📏Text Attribute: Sets text color in body.
<body text="blue"> - ↔️Leftmargin & Topmargin: Set page margins.
<body leftmargin="20" topmargin="30"> - ⏸️Break Element (<br>): Adds a line break.
<p>Line1<br>Line2</p> - ─Thematic Break (<hr>): Adds a horizontal line.
<hr> - 📝Paragraph Element (<p>): Defines a paragraph.
<p>This is a paragraph.</p> - 🔠Heading Element (<h1>–<h6>): Defines headings.
<h1>Heading 1</h1> - ✍️Formatting Elements: Style text like bold, italic, underline.
<b>Bold</b>, <i>Italic</i>, <u>Underline</u> - 🔽Subscript (<sub>): Text below baseline.
H<sub>2</sub>O - 🔼Superscript (<sup>): Text above baseline.
2<sup>3</sup> = 8 - ❌Strike-through (<strike>): Crosses out text.
<strike>Old Text</strike> - 🎯Center Element (<center>): Centers content.
<center>This is centered</center> - 🔤Font Element (<font>): Change text color, size, face.
<font color="red" size="4" face="Arial">Hello</font>
Chapter 9: Introduction to HTML Que. & Ans.
Click here to access all Questions & Answers
Visit Now ⤴

0 Comments