<![CDATA[HTML Basics: Tags & Elements Made Easy]]>https://html-basics-tags-and-elements-made-easy.hashnode.devRSS for NodeWed, 24 Jun 2026 18:51:40 GMT60<![CDATA[Understanding HTML Tags and Elements]]>https://html-basics-tags-and-elements-made-easy.hashnode.dev/understanding-html-tags-and-elementshttps://html-basics-tags-and-elements-made-easy.hashnode.dev/understanding-html-tags-and-elementsWed, 28 Jan 2026 06:48:26 GMT1.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).

<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.

]]>