Table of Contents

Introduction to HTML Elements

HTML elements are the bricks through which every aspect of a website located on the World Wide Web is constructed from. If you are a new developer or if you’re already a professional developer, you should know the basics of HTML elements that will help you build clean, accessible, and, of course, optimisation-friendly websites.

So in this guide, we will sort the following:
✔ What HTML elements are
✔ How to write them correctly
✔ what are some major differences between block and inline elements
✔ Best practices for clean, semantic HTML

1. What are HTML Elements?

An HTML element can therefore be defined as a part of an HTML document that helps in determining the website layout and content.

it is represent HTML Element body

It consists of:

  • Opening Tag – Marks the beginning (<p>)
  • Content – Text, images, or other elements
  • Closing Tag – Marks the end (</p>), except for void elements

Example:

<p>This is your paragraph element.</p>

2. HTML Element Code Example

Below is the example of the HTML document that contains top and frequently used elements:

<!DOCTYPE html>
<html>
<head>
    <title>This is my web page</title>
</head>
<body>
    <h1>Main Heading</h1>
    <p>A paragraph with a <a href="#">link</a> inside.</p>
    <img src="image.jpg" alt="Sample Image">
</body>
</html>

Bonus Tip: In all HTML documents at the very beginning we use <!DOCTYPE html> and each document has <html>, <head> and <body> tags.

3. Nested HTML Elements

There is also a structure in which one HTML element can be placed inside another, thus forming a hierarchy of elements.

Example:

<div>
    <h2>Your page title</h2>
    <p>This paragraph contains <strong>bold text</strong>.</p>
</div>

Rules for Nesting:
✔ Close inner tags before outer ones
✔ Avoid incorrect nesting like <p><div></div></p> (invalid)

4. Key Points about HTML Elements

1 Syntax

  • Opening Tag: <tagname>
  • Closing Tag: </tagname>
  • Attributes: Provide additional info (<img src=”image.jpg” alt=”Description”>)

2 Case Sensitivity.

  • HTML tags are not case sensitive and the most case used ones are lowercase (e.g . <body> instead of <BODY>.
  • Helps maintain consistency, especially in frameworks like React and Vue.

5. Compulsory to Add an End Tag

Most HTML elements require a closing tag, but some exceptions exist:

Must Close this below:

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

<div>Content here</div>

Self-Closing (Void Elements):

<br> <!-- Line break -->  
<img src="photo.jpg" alt="Photo"> <!-- Image -->  
<input type="text"> <!-- Form input -->

Note*

Some of them don’t have closing tags, so be sure to use them properly.

Best Practice: Always close tags for readability and compatibility.

6. Empty HTML Elements (Void Elements)

This is the elements don’t require closing tags and have no content:

ElementPurposeExample
<img>Embeds an image<img src=”logo.png” alt=”Logo”>
<br>Inserts a line break<p>Line 1<br>Line 2</p>
<hr>Horizontal rule<hr>
<input>Form input field<input type=”email”>

7. Block vs Inline Elements

1 Block-Level Elements

  • Start on a new line
  • Take full available width
  • Used for structuring page sections

Examples:

  1. <div>: It is a block container.
  2. <p>: It defines a paragraph.
  3. <h1>, <h2>, …, <h6>: These are heading elements of different depth.
  4. <ol>, <ul>: Ordered and unordered lists.
  5. <table>: It defines a table.
  6. <form>: HTML forms use input elements. This is all about the user feedback inputs.
  7. <section>, <article>, <nav>, <aside>, <header>, <footer>: These are semantic elements that define areas of a webpage.

2 Inline Elements

  • Stay within the text flow
  • Do not force new lines
  • Used for styling text

Examples:

  1. <span>: It is a general use of inline containers for phrasing content.
  2. <a>:  It creates hyperlinks.
  3. <img>: It embeds an image.
  4. <strong>, <b>: It is used for strong emphasis and bold text, respectively.
  5. <em>, <i>: It is used for emphasis and italic text, respectively.
  6. <br>: It inserts a line break within the text.
  7. <input>: It creates interactive controls for forms.

Key Difference:
✔ Block elements define layout structure
✔ Inline elements format text

8. HTML Tag Reference (Essential Elements)

CategoryTags
Structure<html>, <head>, <body>, <div>, <span>
Text<h1>-<h6>, <p>, <strong>, <em>
Lists<ul>, <ol>, <li>, <dl>
Media<img>, <audio>, <video>
Forms<form>, <input>, <button>

9. Best Practices for Using HTML Elements

✔ For better SEO purposes use semantic tags such as <header> <article> and <nav>.
✔ Always Include Alt Text in images (<img alt=”Description”>)
✔ Avoid Deprecated Tags like <font> and <center>
✔ Validate HTML using W3C Validator

10. Supported Browsers

Standard HTML elements are supported by all the main browsers in the market (Chrome, Firefox, Safari, Edge). For legacy systems ( IE11), polyfills, or fallbacks should be used.

Conclusion

The learning of HTML elements is a first step to becoming an experienced web developer. By using best practices (proper nesting, semantic markup and clean syntax) you can develop websites which will work and will be search engine optimized as well.

Next Steps:

  • Learn it about HTML5 Semantic Elements (<section>, <article>, <footer>)
  • Deep practice with CSS Styling to enhance your HTML structure
  • Test browser compatibility using Can I Use

Q: Can I skip closing tags in HTML5?

A: Some tags (like <p> and <li>) can be omitted, but it’s best to close all tags for consistency.

Q: What’s the difference between <div> and <span>?

A: <div> is block-level, while <span> is inline.

Q: How do I make my HTML SEO-friendly?

A: Use semantic tags, proper heading hierarchy (<h1> to <h6>), and descriptive alt attributes.

Previous
Next

Categorized in:

HTML,