Understanding HTML Tags and Elements


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







