HTML Notes for Class 6: Introduction, Tags, Attributes and Examples

HTML Notes Cum eBook Download 

HTML (HyperText Markup Language) is one of the most important topics for students learning computer applications and web design. It is used to create the structure of web pages and display content such as headings, paragraphs, images, links and lists. Learning HTML helps students understand how websites work and provides a foundation for learning more advanced web technologies.

In this article, you will learn the introduction to HTML, features of HTML, terms related to the Web, HTML tags and attributes, the basic structure of an HTML document, types of HTML tags, and important HTML tags with simple examples.

These HTML notes for Class 6 are written in easy language to help students understand the concepts and revise them for computer examinations.

1. What Is HTML?

HTML stands for HyperText Markup Language. It is a markup language used to create and structure web pages.

HTML uses special codes called tags to tell a web browser how different elements of a webpage should be arranged and displayed.

For example, HTML can be used to create headings, write paragraphs, display images, add hyperlinks and organize information on a webpage.

Consider the following HTML code:

<html>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first webpage.</p>
</body>
</html>

This code creates a webpage containing a heading and a paragraph. When the HTML file is opened in a web browser, the browser displays the content as a webpage.

In simple words: HTML provides the basic structure of a webpage.

2. Features of HTML

HTML has several features that make it useful for creating web pages.

1. Easy to learn: HTML uses simple tags and a straightforward structure, making it suitable for beginners.

2. Platform-independent: HTML files can be opened on different operating systems using compatible web browsers.

3. Supports hyperlinks: HTML allows us to connect one webpage to another through links.

4. Supports multimedia: HTML can be used to include images, audio and video in webpages.

5. Works with web browsers: Browsers interpret HTML code and display the webpage to users.

6. Free to use: HTML does not require a paid licence to write or learn.

7. Works with other technologies: HTML can be combined with CSS for styling and JavaScript for interactive features.

3. Important Terms Related to the Web

Before learning HTML in detail, students should understand some basic terms related to the Internet and the World Wide Web.

A. Web Page

A web page is a single document available on the World Wide Web. It may contain text, images, hyperlinks, videos and other content.

For example, a page displaying the contact details of a school is a web page.

B. Website

A website is a collection of related web pages available under a common domain name.

For example, an educational website may contain separate pages for computer notes, science notes, mathematics notes and contact information.

C. Web Browser

A web browser is a software application used to access and view web pages on the Internet.

Examples of popular web browsers include:

1. Google Chrome

2. Microsoft Edge

3. Mozilla Firefox

4. Apple Safari

A web browser reads HTML and other web technologies to display the content of a webpage.

Difference Between a Web Page and a Website

Web Page	Website
It is a single document.	It is a collection of related web pages.
It displays specific information.	It may contain information on several topics.
Example: An About Us page.	Example: An entire school website.

4. A Short Description of HTML

HTML is a markup language made up of elements represented by tags. These elements describe the structure and meaning of webpage content.

HTML does not function as a programming language in the traditional sense. Instead, it marks up content so that a browser can interpret and display it appropriately.

For example, the <h1> tag represents a main heading, while the <p> tag represents a paragraph.

HTML mainly defines the structure of a webpage. CSS is generally used to control its appearance, including colours, fonts and spacing, while JavaScript can add interactive behaviour.

5. Important Terms Used in HTML

Three important terms that students should understand are tag, element and attribute.

A. HTML Tag

An HTML tag is a special keyword enclosed within angle brackets. Tags identify the type of content or element in an HTML document.

Examples:

<p>
<h1>
<b>
<br>

Most HTML tags have an opening tag and a closing tag. A closing tag usually contains a forward slash before the tag name.

B. HTML Element

An HTML element generally consists of an opening tag, the content and a closing tag.

Example:

<p>This is a paragraph.</p>

In this example:

1. <p> is the opening tag.

2. This is a paragraph. is the content.

3. </p> is the closing tag.

4. The complete structure is the paragraph element.

C. HTML Attribute

An HTML attribute provides additional information about an element. Attributes are usually written inside the opening tag as a name and value.

Example:

<p title="Introduction">Welcome to HTML.</p>

Here, title is an attribute and Introduction is its value.

Attributes can specify information such as an image's source, alternative text, or a link's destination.

6. Basic Structure of an HTML Document

Every standard HTML document follows a basic structure. The following example shows the main parts of an HTML document.

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Let us understand the purpose of each part.

<!DOCTYPE html>: Declares that the document uses HTML5.

<html>: The root element that contains the HTML document.

<head>: Contains information about the document, such as its title and metadata.

<title>: Specifies the title displayed in the browser tab.

<body>: Contains the main content displayed on the webpage.

<h1>: Defines a main heading.

<p>: Defines a paragraph.

</html>: Marks the end of the HTML document.

Remember that most container elements require both opening and closing tags.

7. Types of HTML Tags

HTML tags are commonly classified into two groups for beginners: container tags and empty tags.

A. Container Tags

Container tags have an opening tag and a closing tag. They generally enclose content between them.

Examples include:

1. <p> and </p> — paragraph

2. <b> and </b> — bold text

3. <i> and </i> — italic text

4. <u> and </u> — underlined text

5. <h1> and </h1> — main heading

Example:

<b>This text is bold.</b>

The browser displays the text in bold.

B. Empty Tags

Empty tags do not enclose content and do not require a separate closing tag in HTML.

Examples include:

1. <br> — inserts a line break.

2. <hr> — represents a thematic break, commonly displayed as a horizontal line.

3. <img> — embeds an image.

Example:

Hello<br>Welcome to my webpage.

The word “Welcome” appears on the next line.

8. Important HTML Tags with Examples

The following HTML tags are useful for creating simple webpages.

A. Paragraph Tag

The <p> tag is used to write a paragraph.

Example:

<p>HTML is easy to learn.</p>

The browser displays the sentence as a paragraph.

B. Line Break Tag

The <br> tag moves the following content to a new line.

Example:

<p>Hello<br>Welcome to my website.</p>

The output appears on two lines.

C. Heading Tags

HTML provides six heading levels, from <h1> to <h6>.

• <h1> represents the highest-level heading.

• <h2> represents a second-level heading.

• <h3> represents a third-level heading.

• <h4>, <h5> and <h6> represent progressively lower heading levels.

Example:

<h1>My School</h1>
<h2>Computer Department</h2>
<h3>HTML Lesson</h3>

Heading sizes are usually displayed in descending order, although their appearance can be changed with CSS.

D. Center Tag

The <center> tag was traditionally used to centre content.

Example:

<center>Welcome to HTML</center>

This is a legacy HTML method and should not be used in modern webpages. CSS is the recommended way to centre content.

E. Bold, Italic and Underline Tags

These tags change the appearance of text.

Bold tag — <b>

<b>Important Information</b>

Displays the text in bold.

Italic tag — <i>

<i>Welcome to my page</i>

Displays the text in italic style.

Underline tag — <u>

<u>Learn HTML</u>

Underlines the text.

F. Subscript and Superscript Tags

The <sub> tag displays text below the normal text line, while the <sup> tag displays text above the normal text line.

Subscript example:

H<sub>2</sub>O

Output: H₂O

Superscript example:

x<sup>2</sup>

Output: x²

These tags are useful for displaying chemical formulas and mathematical expressions.

9. Background and Text Colour Attributes

In older HTML examples, the bgcolor attribute was used to set a background colour, while the color attribute of the <font> tag was used to change text colour.

Example of an older background-colour method:

<body bgcolor="lightyellow">
    <p>Welcome to my webpage.</p>
</body>

Example of an older text-colour method:

<font color="blue">Welcome to HTML</font>

These methods are useful for understanding older HTML lessons, but they are obsolete in modern HTML. Today, CSS is recommended for setting background and text colours.

Modern equivalent:

<body style="background-color: lightyellow;">
    <p style="color: blue;">Welcome to HTML</p>
</body>

10. Attributes of the Font Tag

The older <font> tag was used to change the appearance of text. It had three commonly taught attributes.

Attribute	Purpose
color	Specifies the text colour.
size	Specifies the font size.
face	Specifies the font family.

Example of the traditional method:

<font color="blue" size="5" face="Arial">
    Welcome to HTML
</font>

This example specifies blue text, a legacy font size setting and the Arial font family.

Note: The <font> tag is obsolete in modern HTML. CSS properties such as color, font-size and font-family should be used for new webpages.

11. Alignment Attribute in HTML

In older HTML examples, the align attribute was used to position text to the left, centre or right.

Left alignment:

<p align="left">Left-aligned text.</p>

Centre alignment:

<p align="center">Centred text.</p>

Right alignment:

<p align="right">Right-aligned text.</p>

These examples demonstrate traditional HTML syntax. The align attribute is obsolete for paragraphs and headings in modern HTML. CSS is recommended instead.

For example:

<p style="text-align: center;">
    Centred text.
</p>

12. How to Create and View an HTML File

Students can practise HTML using a simple text editor such as Notepad on Windows.

Follow these steps:

1. Open Notepad.

2. Type a basic HTML document.

3. Click File → Save As.

4. Enter a filename such as mypage.html.

5. Select All Files (.) as the file type.

6. Choose UTF-8 encoding if available.

7. Click Save.

8. Locate the saved file and double-click it to open it in a web browser.

To edit the webpage, right-click the HTML file and choose Open with → Notepad. Make the changes, save the file and refresh the browser to see the updated result.

Frequently Asked Questions (FAQs)

1. What is the full form of HTML?

HTML stands for HyperText Markup Language.

2. What is the main use of HTML?

HTML is used to create and structure web pages containing text, headings, images, links and other content.

3. What is the difference between a tag and an element?

A tag is the markup enclosed in angle brackets, such as <p>. An element includes the relevant tags and content, such as <p>Hello</p>.

4. What are container tags?

Container tags have opening and closing tags and generally enclose content. Examples include <p>, <b> and <i>.

5. What are empty tags?

Empty tags do not enclose content and do not require separate closing tags. Examples include <br>, <hr> and <img>.

6. Which tag is used to create a paragraph?

The <p> tag is used to create a paragraph.

7. Which tags are used for subscript and superscript?

The <sub> tag is used for subscript, while the <sup> tag is used for superscript.

8. Can we write HTML code in Notepad?

Yes. You can write HTML code in Notepad, save the file with an .html extension and open it in a web browser.

9. Is HTML a programming language?

HTML is a markup language rather than a general-purpose programming language. It structures content on webpages.

10. Are the font and center tags used in modern HTML?

The <font> and <center> tags are obsolete in modern HTML. CSS is recommended for styling text, colours and alignment.

Conclusion

HTML is the foundation of webpage structure and an excellent starting point for students who want to learn web design. By understanding web pages, websites, browsers, tags, elements, attributes and the basic HTML document structure, students can begin creating their own webpages.

Practising the paragraph, heading, line break, text-formatting, subscript and superscript tags will help students develop confidence in writing HTML code. Students should also remember that modern websites generally use CSS for colours, fonts and alignment.

Explore more computer notes and educational resources at MyBooklet.in to strengthen your computer skills, revise important concepts and practise new topics.

---

Suggested SEO details for Blogger

1. SEO title: HTML Notes for Class 6: Tags, Attributes and Examples

2. Suggested URL slug: html-notes-for-class-6

3. Meta description: Learn HTML with easy Class 6 notes covering web pages, websites, browsers, HTML tags, attributes, document structure, text formatting and examples.

4. Primary keyword: HTML notes for Class 6

5. Related keywords: HTML notes PDF, introduction to HTML, HTML tags and attributes, basic HTML code, HTML tutorial for beginners, Class 6 Computer notes

6. Suggested labels: HTML, Class 6 Computer, Computer Notes, HTML Notes, Web Design