HTML Elements – A Complete Guide

What is an HTML Element?

An HTML element is a building block of an HTML document. It consists of an opening tag, content, and a closing tag.

Example of an HTML Element:

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

✅ Best Practice: Always close HTML elements properly unless they are self-closing.

Types of HTML Elements

1. Block-Level Elements

Block elements take up the full width of their parent container.

Examples:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a division.</div>

✅ Best Practice: Use <div> only when no semantic alternative exists.

2. Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary.

Examples:

<a href="#">This is a link</a>
<strong>This is bold text</strong>
<em>This is italic text</em>

✅ Best Practice: Avoid using block elements inside inline elements.

3. Self-Closing (Void) Elements

These elements do not require a closing tag.

Examples:

<img src="image.jpg" alt="Sample image">
<br>
<hr>
<input type="text">

Commonly Used HTML Elements with Examples

1. Heading Elements (<h1> – <h6>)

Used for headings in a webpage.

 
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>

✅ SEO Tip: Use <h1> only once per page for better search ranking.

2. Paragraphs (<p>)

Used for text content.

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

✅ Best Practice: Use CSS for spacing instead of multiple <br> tags.

3. Links (<a>)

Used for navigation.

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

✅ Best Practice: Use target="_blank" to open links in a new tab.

4. Images (<img>)

Used to display images.

<img src="image.jpg" alt="Description">

✅ SEO Tip: Always use the alt attribute for accessibility.

5. Lists (<ul>, <ol>, <li>)

Unordered List:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

Ordered List:

<ol>
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
</ol>

✅ Best Practice: Use <ol> for sequences and <ul> for general lists.

6. Tables (<table>)

Used for tabular data.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

✅ Best Practice: Use <th> for headers to improve readability.

7. Forms (<form>)

Used for collecting user input.

<form action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

Best Practices for Using HTML Elements

✔️ Use Semantic Elements – Prefer <header>, <section>, <article> instead of <div>.
✔️ Close Tags Properly – Always close tags for better readability.
✔️ Use Meaningful Attributes – Provide alt text for images and labels for form inputs.
✔️ Avoid Deprecated Elements – Avoid <font> and <center>; use CSS instead.