HTML - Elements

An HTML Element is an individual component of an HTML document. An element usually consists of a start tag (opening tag) and an end tag (closing tag), with the actual text or media content inserted in between. The table below illustrates the most fundamental HTML elements and their corresponding start and end tags:

Start Tag	End Tag	Element Purpose
<html>	</html>	Root element that encapsulates all HTML code on the webpage.
<head>	</head>	Holds document metadata, scripts, stylesheets, and page title.
<title>	</title>	Specifies the browser tab title and search engine result headline.
<body>	</body>	Encloses all visible content (headings, images, text, tables, forms).
<h1>	</h1>	The highest-level document heading, critical for SEO ranking.
<p>	</p>	Defines a block paragraph of text with automatic top/bottom spacing.

---

General Element Syntax

The standard syntax of an HTML element is written as:

<tag_name attribute="value"> Your Content Here </tag_name>
							

Core HTML Elements Explained

HTML Tag (<html>)

The <html> element is the root container of the page. To delimit the content, add a closing tag by adding a forward slash "/" to the starting tag (</html>). It is mandatory that all other elements (except the <!DOCTYPE html> declaration) reside within <html> and </html>.

HEAD Tag (<head>)

The HTML document is isolated into the <head> container. The information about the document (metadata, character encoding, title, viewport, CSS files) is kept within the <head> tag and is not displayed directly in the browser body.

TITLE Tag (<title>)

The title element is the only required element inside the head. It provides the document name displayed on browser tabs, bookmarks, and Google search engine snippet headlines.

BODY Tag (<body>)

All the content to be displayed on the web page—such as articles, images, buttons, and tables—must be written within the <body> container.

H1 Tag (<h1>)

This is the first and most prominent heading tag. In SEO best practices, every page should have exactly one descriptive <h1> summarizing the primary topic of the page.

P Tag (<p>)

This is the paragraph tag. Use this tag to write readable text blocks. Browsers automatically add vertical margins before and after each paragraph.

BR Tag (<br>)

The <br> tag is an unpaired (void) tag; it has no closing tag. It is used to insert a single line break without creating a new paragraph block.

---

Classification: Paired Elements vs Void (Empty) Elements

In modern HTML5, all elements fall into one of two fundamental categories:

Category	Definition	Examples
Paired (Container) Elements	Elements that have both an opening tag and a closing tag. They contain text, images, or child elements between the tags.	<h1>...</h1>, <p>...</p>, <div>...</div>, <a>...</a>
Void (Empty) Elements	Elements that have only an opening tag and cannot contain content or closing tags. In HTML5, the trailing slash (e.g., <br />) is optional.	<br>, <hr>, <img>, <input>, <meta>, <link>

---

Nesting HTML Elements Correctly

HTML elements can be nested inside one another to create rich hierarchies. When nesting, you must follow the LIFO (Last In, First Out) principle. The element opened last must be closed first:

<!-- CORRECT NESTING -->
<p>This is <strong><em>correctly nested</em></strong> text.</p>

<!-- INCORRECT NESTING (AVOID) -->
<p>This is <strong><em>improperly nested</strong></em> text.</p>
							

---

Semantic HTML5 Elements (Why Bloggers & BCA Students Must Use Them)

Before HTML5, developers wrapped everything in generic <div id="header"> or <div class="footer"> tags. HTML5 introduced Semantic Elements that clearly describe their meaning to both the browser and search engine crawlers:

• <header>: Defines the top introductory header of a page or section.
• <nav>: Encloses primary site navigation links.
• <main>: Encapsulates the unique, dominant content of the document.
• <article>: Self-contained content such as a blog post, news story, or tutorial.
• <section>: A thematic grouping of content, typically with a heading.
• <aside>: Content tangentially related to the main article (e.g., sidebars, callout boxes).
• <footer>: Copyright notices, author info, and footer links.

---

Hands-on Practice Session for Students

Problem Statement: Create an HTML5 document containing an <article> element representing a blog card. Inside the article, include a heading, published date, author name, a short summary paragraph with bold text, and a "Read More" hyperlink.

Solution Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic Article Card - Practice 3</title>
</head>
<body>
    <main>
        <article>
            <header>
                <h2>10 Tips for Mastering HTML in 2026</h2>
                <p>Published on: <time datetime="2026-09-30">September 30, 2026</time> by <strong>Veewom Team</strong></p>
            </header>
            <p>Learning HTML is the <strong>foundation of all web development</strong>. In this tutorial, we review the essential elements every student must know.</p>
            <footer>
                <a href="attributes.htm">Learn About HTML Attributes &rarr;</a>
            </footer>
        </article>
    </main>
</body>
</html>
							

---

Viva & University Exam Questions (BCA Exam Preparation)

---

Frequently Asked Questions (FAQ)