HTML Basics

HTML Tags

Chapter 3: HTML Tags

Introduction

HTML (HyperText Markup Language) is the standard language used to create the structure of web pages. In HTML, we use tags to tell the browser how different parts of a webpage should be displayed.

For example, a heading can be created using the <h1> tag, while a paragraph can be created using the <p> tag.

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

The browser reads these HTML tags and displays the content accordingly.

1. What is an HTML Tag?

An HTML tag is a special keyword enclosed within angle brackets < >.

Example:

<p>

The <p> tag tells the browser that the content is a paragraph.

Many HTML elements use an opening tag and a closing tag.

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

Here:

<p> → Opening tag
This is a paragraph. → Content
</p> → Closing tag

The closing tag contains a forward slash /.

2. HTML Element

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

Example:

<h1>My School</h1>

The complete structure is called an HTML element.

Structure

Opening Tag + Content + Closing Tag

Example:

<h1> + My School + </h1>

3. Basic HTML Tags

HTML provides many tags for creating different types of content.

Some commonly used tags are:

Tag	Purpose
<html>	Defines the HTML document
<head>	Contains information about the webpage
<title>	Defines the page title
<body>	Contains visible webpage content
<h1> to <h6>	Creates headings
<p>	Creates a paragraph
<br>	Inserts a line break
<hr>	Creates a horizontal line
<b>	Makes text bold
<i>	Makes text italic
<u>	Underlines text
<strong>	Indicates important text
<em>	Gives emphasis to text

4. The <html> Tag

The <html> tag is the root element of an HTML document. Almost all other HTML elements are placed inside it.

Example:

A complete HTML document normally starts with the <html> element.

5. The <head> Tag

The <head> element contains information about the webpage that is generally not displayed directly as page content.

It can contain:

Page title
Character encoding
CSS links
Metadata
Other resources

Example:

<head> <title>My Webpage</title> </head>

6. The <title> Tag

The <title> tag defines the title of a webpage.

The title usually appears in the browser tab.

<title>My Science Website</title>

A meaningful title is also useful for helping search engines understand the page.

7. The <body> Tag

The <body> element contains the main visible content of a webpage.

For example:

<body> <h1>Welcome</h1> <p>Welcome to my website.</p> </body>

Everything displayed as the main webpage content is generally placed inside <body>.

8. Heading Tags

HTML provides six levels of headings:

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

<h1> represents the highest-level heading, while <h6> represents a lower-level heading.

Example

<h1>Computer Science</h1> <h2>HTML</h2> <h3>HTML Tags</h3>

Important Point

Use headings according to the structure of your content rather than simply choosing a heading because it looks larger or smaller.

9. Paragraph Tag

The <p> tag is used to create paragraphs.

Example:

<p>HTML is used to create the structure of webpages.</p>

Multiple paragraphs can be written separately:

<p>HTML is easy to learn.</p> <p>It is commonly used together with CSS and JavaScript.</p>

10. Line Break Tag

The <br> tag is used to insert a line break.

Example:

<p> My name is Rahul.<br> I am learning HTML. </p>

The second sentence will appear on a new line.

Important

<br> is an example of a void element. It does not normally need a separate closing tag.

11. Horizontal Rule Tag

The <hr> tag creates a thematic horizontal separation between sections.

Example:

<h2>HTML</h2> <p>HTML is used to create webpages.</p> <hr> <h2>CSS</h2> <p>CSS is used to style webpages.</p>

The <hr> tag is also a void element.

12. Bold and Important Text

HTML provides different ways to indicate important or emphasized content.

<b> Tag

The <b> tag draws attention to text without adding a specific meaning of importance.

<strong> Tag

The <strong> element indicates that the text has strong importance.

<p><strong>Important:</strong> Save your work regularly.</p>

Using semantic elements such as <strong> can make the meaning of content clearer.

13. Italic and Emphasized Text

<i> Tag

The <i> element is commonly used for text that needs to be visually distinguished.

<p>This is <i>italic text</i>.</p>

<em> Tag

The <em> element indicates emphasis.

<p>HTML is <em>very important</em> for web development.</p>

14. Underline Tag

The <u> element represents text that should be visually distinguished with an underline.

Example:

<p><u>This text is underlined.</u></p>

For normal webpage links, however, use the <a> element rather than <u>.

15. HTML Comments

Comments are notes written inside HTML code. They are not displayed as normal webpage content.

Syntax:

Example:

<h1>My Website</h1>  <p>Welcome to my website.</p>

Comments are useful for explaining code and organizing larger HTML files.

16. HTML Attributes

HTML tags can contain attributes. Attributes provide additional information about an element.

Example:

<p class="intro">Welcome to my website.</p>

Here:

class → Attribute name
"intro" → Attribute value

Another example:

Here:

src specifies the image location.
alt provides alternative text describing the image.

17. Anchor Tag

The <a> tag is used to create hyperlinks.

Example:

<a href="https://example.com">Visit Website</a>

The href attribute specifies the destination of the link.

Link to another page

<a href="about.html">About Us</a>

Link to a section on the same page

<a href="#contact">Contact</a>

And the target section can be:

<h2 id="contact">Contact Us</h2>

18. Image Tag

The <img> element is used to display an image.

Example:

Important attributes include:

src → Image location
alt → Alternative text

The <img> element is a void element, so it does not need a closing </img> tag.

Why is alt important?

Alternative text can help users understand the purpose of an image when the image cannot be displayed. It also improves accessibility.

19. Lists in HTML

HTML supports different types of lists.

Unordered List

An unordered list normally displays items with bullets.

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

<ul> creates the list and <li> creates each list item.

Ordered List

An ordered list displays items in a sequence.

<ol> <li>Open the browser</li> <li>Create an HTML file</li> <li>Write HTML code</li> </ol>

The browser normally displays the items with numbers.

20. Basic HTML Document

Let's combine some of the tags studied in this chapter.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Webpage</title> </head> <body> <h1>Welcome to My Website</h1> <p> HTML is used to create the structure of webpages. </p> <hr> <h2>My Favourite Subjects</h2> <ul> <li>Computer Science</li> <li>Mathematics</li> <li>Science</li> </ul> <p> Learn more about <a href="https://example.com">HTML</a>. </p> </body> </html>

21. Tags vs Elements vs Attributes

These three terms are often confused by beginners.

Tag

<p>

This is a tag.

Element

<p>Hello World</p>

The complete structure is an element.

Attribute

<p class="message">Hello World</p>

Here, class="message" is an attribute.

Easy way to remember

Tag → tells the browser what something is.

Element → complete HTML structure.

Attribute → provides additional information about an element.

22. Common Mistakes in HTML

Mistake 1: Forgetting a closing tag

Incorrect:

<p>Hello

Better:

<p>Hello</p>

Mistake 2: Incorrect nesting

Incorrect:

<p><strong>Important</p></strong>

Correct:

<p><strong>Important</strong></p>

Mistake 3: Forgetting quotation marks around attribute values

Better:

<a href="about.html">About</a>

Mistake 4: Using an incorrect image path

Make sure the image actually exists at the specified location.

23. Practice Activity

Create a webpage containing:

A main heading with your name.
A paragraph introducing yourself.
A horizontal line.
A heading called My Favourite Subjects.
An unordered list containing three subjects.
A link to another webpage.
An image with suitable alternative text.

Practice Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Student Profile</title> </head> <body> <h1>My Name</h1> <p> Hello! I am a student and I am learning HTML. </p> <hr> <h2>My Favourite Subjects</h2> <ul> <li>Science</li> <li>Mathematics</li> <li>Computer Science</li> </ul> <p> <a href="https://example.com">Learn More</a> </p> <img src="student.jpg" alt="Student learning HTML"> </body> </html>

Chapter Summary

In this chapter, we learned that:

HTML uses tags to structure webpages.
Most normal HTML elements have opening and closing tags.
<h1> to <h6> are used for headings.
<p> is used for paragraphs.
<br> creates a line break.
<hr> creates a thematic separation.
<a> creates hyperlinks.
<img> displays images.
<ul>, <ol>, and <li> create lists.
Attributes provide additional information about elements.
Comments are written using .
HTML elements should be properly nested.

Quick Revision Questions

Fill in the blanks

The <p> tag is used to create a ________.
The <a> tag is used to create a ________.
The <img> tag is used to display an ________.
The <h1> tag creates a ________-level heading.
The <br> tag is used to insert a ________ break.

Multiple Choice Questions

1. Which tag is used to create a paragraph?

A. <para>
B. <p>
C. <paragraph>
D. <text>

Answer: B

2. Which tag is used to create a hyperlink?

A. <link>
B. <href>
C. <a>
D. <url>

Answer: C

3. Which attribute specifies the destination of a hyperlink?

A. src
B. href
C. alt
D. link

Answer: B

4. Which tag is used to display an image?

A. <picture>
B. <image>
C. <img>
D. <src>

Answer: C

5. Which tag creates an unordered list?

A. <ol>
B. <ul>
C. <list>
D. <li>

Answer: B