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

Block-Level HTML 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.

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.

Self-Closing (Void) Elements

These elements do not require a closing tag.

Examples:

<img src="https://shorturl.at/VyVY3p" alt="Sample image">
<br>
<hr>
<input type="text">

Commonly Used HTML Elements with Examples

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.

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.

Links (`<a>`)

Used for navigation.

<a href="https://www.google.com">Visit Google</a>

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

Images (`<img>`)

Used to display images.

<img src="https://shorturl.at/VyVY3" alt="Description">

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

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.

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.

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.