Skip to main content

Command Palette

Search for a command to run...

Understanding HTML Tags and Elements

Updated
3 min read
Understanding HTML Tags and Elements
R
I’m a BCA student and a full-stack developer passionate about building scalable web applications. I enjoy working with modern technologies and sharing my learning through blogs.

What HTML is and why we use it ?

HTML (HyperText Markup Language) is the standard, foundational markup language used to create and structure web pages It uses a system of tags and elements to define content types—such as headings, paragraphs, images, and links—telling web browsers how to display them.

Why We Use HTML:

  • Structure & Layout: It serves as the "skeleton" or foundation of virtually all websites, organizing content into a logical, hierarchical structure.

  • Content Display: HTML informs browsers how to render text, images, videos, and other media.

  • Hyperlinking: It enables the creation of "hypertext," allowing users to navigate between pages and websites via links.

  • Accessibility & SEO: Properly used semantic HTML improves website accessibility for screen readers and helps search engines understand and index page content.

  • Interoperability: It is platform-independent, ensuring web pages function across different browsers and devices.

HTML works alongside CSS (for styling) and JavaScript (for interactivity) to build modern, functional websites.

what a HTML tags

An HTML tag is a special keyword or abbreviation enclosed in angle brackets ( < and > ) that acts as a label to structure content and instruct a web browser on how to display it. Tags are the fundamental building blocks used to define different parts of a webpage, such as headings, paragraphs, and images.
EXAMPLE :- <p> (Paragraph), <a> (Anchor), <img> (Image), <div> (Division) etc.

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<p>This is the content of the paragraph.</p>

What an HTML element means

An HTML element is a fundamental building block of a web page that provides structure and semantic meaning to content. It is the complete component, from its opening tag to its closing tag (if applicable), including the content in between.

<h1> heading </h1>

Opening Tag: Enclosed in angle brackets, the opening tag marks where the element begins and starts to take effect. For a paragraph, the opening tag is <p>

<h1>

Closing Tag: This tag marks the end of the element. It is identical to the opening tag but includes a forward slash (/) before the tag name, such as </p> for a paragraph.

</h1>

Self closing elements

Void elements in HTML are elements that cannot have any child nodes (content or nested tags) and consist only of a start tag, without a required end tag (e.g., <br>, <img>, <input>)

<br>  // Break a line

<img>  //insert a image

<input>  // Take a input by user

Block-Level Elements

  • Starts on a new line: Always begins on a fresh line, pushing subsequent elements below it.

  • Takes full width: Occupies the entire available horizontal space of its container by default.

  • Structure: Creates distinct, stacked "blocks" or boxes.

  • Examples: <div>, <p>, <h1> to <h6>, <ul>, <li>, <form>

Inline Elements

  • Flows with text: Does not start a new line and stays within the current line of text.

  • Takes content width: Only occupies as much horizontal space as its content requires.

  • Structure: Fits snugly within the flow of text.

  • Examples: <span>, <a>, <img>, <strong>, <em>, <br>

Commonly used HTML tags

Thank you