HTML Elements

Understand the building blocks of every website with simple explanations.

What is an HTML Element?

An HTML Element is a complete structure that defines content on a webpage.

HTML Element = Opening Tag + Content + Closing Tag

Basic Structure of an HTML Element

Example: HTML Element Structure


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

Empty (Void) HTML Elements

Some HTML elements do not have closing tags. These are called empty elements.

Example: Empty Elements


<br>
<hr>
<img src="photo.jpg" alt="Sample image">

Remember: Empty elements never wrap content.

HTML Elements with Attributes

Attributes provide extra information about an HTML element.

Example: Element with Attribute


<a href="https://crackease.com">Visit CrackEase</a>
  • href → Attribute name
  • URL → Attribute value

Block vs Inline Elements

Block-Level Elements

  • Start on a new line
  • Take full width
  • Examples: <div>, <p>, <h1>

Inline Elements

  • Do not start a new line
  • Take only required width
  • Examples: <span>, <a>, <strong>

Nested HTML Elements

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

Example: Nested Elements


<p>
    This is a <strong>bold</strong> word.
</p>

Rule: Always close inner elements before outer elements.

Best Practices for HTML Elements

  • Always close tags properly
  • Use lowercase tag names
  • Indent code for readability
  • Use semantic elements where possible

Student Tip: Strong basics in HTML elements make CSS and JavaScript easier.