Understanding HTML Tags and Elements
1.What HTML is and why we use it
HTML's full form is HyperText Markup Language. HTML is a language with which we create web pages. That means whenever you open any website, its basic structure is made with HTML.
Why Do We Use HTML
In web development, HTML provides the structure; we add styling with CSS and interactivity with JavaScript. It gives search engines the context of the page for SEO, and every website—from blogs to e-commerce—is based on it. Without HTML, web pages would just be plain text, with no proper layout.
2. What an HTML tag is
HTML tags are usually written in angle brackets < >, like <p> or <h1>. These are called opening tags, and they end with a closing tag </p> or </h1> with a slash. Both together make a complete element that wraps text, images, or links.
3. Opening tag, closing tag, and content
What is an Opening Tag
The opening tag starts the element in angle brackets < >, like <p> or <h1>. It tells the browser that a new section of content is starting now.
What is a Closing Tag
The closing tag ends the element, just like the opening tag but with a forward slash /, like </p> or </h1>. Without a closing tag, the browser gets confused and the page might display incorrectly.
Role of Content
Whatever text, image, or other element is between the opening and closing tags is called content. This is the thing that actually shows up on the web page.
4. What an HTML element means
What is an Element
An HTML element is the complete structure—like <p>My text here</p>—where <p> is the opening tag, "My text here" is the content, and </p> is the closing tag. It tells the browser to display the content as a paragraph.
5. Self-closing (void) elements
Self-closing or void elements in HTML are tags that don't need a separate closing tag (like </div>). These elements don't hold content; they only hold attributes (like src, href). Examples include
, <img>, <input>, <meta>, and <hr>.
6. Block-level vs inline elements
Block-Level Elements
These elements always start on a new line and take up the full width (stretch from left to right). The browser automatically adds margins above and below. Common examples: <div>, <p>, <h1> to <h6>, <ul>, <li>. They're used for sections, paragraphs, or containers.
Inline Elements
These stay on the same line, take only the width needed for their content, and don't start a new line. Examples: <span>, <a>, <strong>, <em>, <img>. Perfect for styling inside text or links.
7. Commonly used HTML tags
The commonly used tags in HTML are the basic building blocks essential for creating every web page.
Document Structure Tags
These form the overall skeleton of the page:
<html>: Wraps the entire document. <head>: Title, meta info, links (CSS/JS) go here. <title>: Shows the page name in the browser tab. <body>: The content that actually appears.
Text Formatting Tags
For organizing and styling content:
<h1> to <h6>: Create headings (h1 is the largest). <p>: For paragraphs. <strong> or <b>: Bold text. <em> or <i>: Italic text. <br>: Line break (self-closing).
Lists and Links
<ul> and <li>: Unordered (bullet) list. <ol> and <li>: Ordered (numbered) list. <a href="url">: Creates a hyperlink.
Media and Layout
<img src="photo.jpg" alt="desc">: Adds an image (self-closing).
<div>: For container/block sections. <span>: For inline styling.
