Building Blocks of HTML

Building Blocks of HTML

Now that you know what HTML is and why it’s important, you might still be wondering how it actually works behind the scenes. Don’t worry — that’s completely normal! To make everything easier, we’ll now break down the basic parts of HTML so you can clearly see how webpages are created. Understanding these core building blocks will give you the confidence to start writing your own code and bring your ideas to life on the web.

What are Tags?

A tag is a special word or code in HTML that is used to tell the browser how to display or structure content. Tags are like instructions to the browser. They are always enclosed in angle brackets (< >).

Basic Structure of Tags:

A tag looks like this:
<tagname>Content goes here</tagname>

For example:

<p>This is a paragraph. </p>
<p> is the opening tag (it starts the paragraph)
</p> is the closing tag (it ends the paragraph)

Types of Tags

1. Opening Tag:
This is the tag that starts an element. It tells the browser that something is beginning. Example:

<h1>Heading 1</h1>
<h1> is the opening tag for a big heading.

2. Closing Tag:
This is the tag that ends an element. It tells the browser that the element is finished. Example: <h1>Heading 1</h1>

</h1> is the closing tag for the heading.

The only difference between an opening and closing tag is the forward slash / in the closing tag (like </h1>).

3. Self-Closing Tags:
Some tags don’t need a closing tag. They are self-contained and don’t wrap content. These are usually for things like images, line breaks, and other elements that don’t have content between them. Example:

<img src="image.jpg" alt="Image description">, <br>

• <img> is a self-closing tag for adding an image.
• <br> is a self-closing tag that adds a line break (moves the content to the next line).

Note: We will discuss all tags is details later.

What is an HTML Element?

An HTML element is everything from the opening tag to the closing tag, including the content inside.

An element is a complete building block of a webpage.

Example:

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

In this example:

• <p> → opening tag
• This is a paragraph. → content
• </p> → closing tag

Together, the whole thing is an HTML element.

Types of Elements

There are two types of HTML elements:

1. Container Elements (Paired Elements)

These have both opening and closing tags.

Examples:

<p>Paragraph text</p>
<h1>Heading</h1>
<div>This is a container</div>

2. Empty Elements (Self-closing / Single Tags)

These do not have a closing tag.
They are used alone and usually show something like an image, line, or break.

Examples:

<br> → line break 
<img src="image.jpg" alt="An image"> → image 
<hr> → horizontal line
<input type="text"> → form input

Important Notes

• All content on a webpage is made using elements.
• Every element can have attributes (like src, href, alt, etc.).
• Elements can be nested (placed inside each other).

What are HTML Attributes?

An attribute is extra information that you add inside an HTML tag to control or describe how that element should work or look.

<img src="photo.jpg" alt="My Photo">

In the example above:

• src and alt are attributes
• They are written inside the opening tag
• They give more details to the img element

Structure of an Attribute

<tagname attributeName=”value”>Content</tagname>

<p style=”color:red;”> This is content</p>

Here:

• style is the attribute
• “color:red;” is its value

Important Rules for Attributes

• Always written inside the opening tag
• Written in name=”value” format
• Value is always inside quotation marks

One tag can have multiple attributes