HTML Elements

When learning HTML, two of the most important concepts are tags and elements. Every webpage is built using them. Understanding how they work will help you create and organize content on a webpage correctly.

What Are HTML Tags?

HTML tags are special keywords enclosed inside angle brackets. They tell the browser how to display different types of content.

<h1>Welcome</h1>

In this example:

• <h1> is the opening tag.
• </h1> is the closing tag.

The browser understands that the text between these tags should be displayed as a large heading.

Common HTML Tags

<h1>Main Heading</h1>
<p>This is a paragraph.</p>
<a href="https://www.devbrainbox.com/">Visit Website</a>
<button>Click Me</button>

Each tag has a specific purpose:

• <h1> creates a heading.
• <p> creates a paragraph.
• <a> creates a link.
• <img> displays an image.

What Are HTML Elements?

An HTML element includes the opening tag, the content, and the closing tag.

<p>Hello World!</p>

The entire line above is called a paragraph element. It consists of:

• Opening tag: <p>
• Content: Hello World!
• Closing tag: </p>

Think of an element as a complete package, while tags are the parts that define it.

Opening and Closing Tags

Most HTML elements use both opening and closing tags.

<strong>Important Text</strong>

The opening tag starts the element, and the closing tag ends it. The closing tag contains a forward slash.

<tagname>
</tagname>

This helps browsers understand where an element begins and ends.

Empty Elements

Some HTML elements do not contain content and therefore do not need a closing tag. These are called empty elements.

<img src="photo.jpg" alt="Profile Photo" />
<br />
<hr>

Here:

• <img> displays an image.
• <br> creates a line break.
• <hr> creates a horizontal line.

Since these elements do not wrap content, they do not require closing tags.

Nested Elements

HTML elements can be placed inside other elements. This is called nesting.

<p>
    Welcome to <strong>HTML Learning</strong>.
</p>

• The strong element is nested inside the paragraph element.
• The text "HTML Learning" will appear bold.

Think of nesting like putting a smaller box inside a larger box.

Best Practices

When working with HTML tags and elements:

• Always close tags when required.
• Use meaningful tags for their intended purpose.
• Keep your code properly indented.
• Make sure nested elements are closed in the correct order.

Correct:

<p>This is <strong>important</strong> text.</p>

Incorrect:

<p>This is <strong>important</p></strong>

Key Takeaways

• Elements Tags is an important topic to understand.
• Start with small examples and practice one step at a time.
• Use the idea in simple projects so it becomes easier to remember.

<h2>Course Topics</h2>
<p>Learn HTML one concept at a time.</p>
<div>This is a block container.</div>

<p>
  Learn <strong>HTML</strong> with a
  <a href="/html">complete tutorial</a>.
</p>

<div class="product-card">
  <h3>Wireless Mouse</h3>
  <p>Price: $25</p>
</div>

<p>Price: <span class="price">$25</span></p>

.navigation-link {
  display: block;
}

.card {
  display: inline-block;
}

<!-- Invalid -->
<p>Text <div>Block content</div></p>

<!-- Valid -->
<div>
  <p>Text in a paragraph</p>
</div>