HTML Basics: Structure, Tags & Elements Explained

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and structure webpages. It consists of elements enclosed in tags that define content like text, images, links, and more.

Basic Structure of an HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>

    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <section id="about">
        <h2>About Me</h2>
        <p>This is a brief introduction about myself or my website.</p>
    </section>

    <section id="services">
        <h2>Services</h2>
        <p>Here are the services I offer.</p>
    </section>

    <section id="contact">
        <h2>Contact</h2>
        <p>Email: admin@gmail.com</p>
    </section>

    <footer>
        <p>Copyright @ 2025 Website</p>
    </footer>

</body>
</html>

1. The <!DOCTYPE html> Declaration :

This is called the DOCTYPE declaration.
It tells the browser that the document is written in HTML5.
Without it, the browser might not render the page correctly.

2. The <html> Tag :

The <html> element is the root of the HTML document.
The lang="en" attribute specifies the language of the webpage (English in this case).
Everything inside this tag makes up the webpage.

3. The <head> Section :

The <head> section contains meta information about the page. It is not visible to users but helps browsers and search engines.

<meta charset="UTF-8">
- Defines the character encoding as UTF-8, allowing special characters and symbols (like €, ñ, ♥).
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Ensures the webpage is responsive (looks good on mobile & desktop).
- width=device-width: The page width matches the screen size.
- initial-scale=1.0: Sets the zoom level to 1x.
<title>My First Webpage</title>
- Sets the title shown in the browser tab.

4. The <body> Section :

Everything inside <body> is visible on the webpage.

<body> → This is where all the visible content goes.
<header> → The top section of the webpage, usually containing:
- Logo
- Main heading
- Navigation menu

5. The <nav> (Navigation Bar) :

<nav> → Defines a navigation menu.
<ul> (unordered list) → Creates a list of menu items.
<li> (list items) → Represents each menu item.
<a href="#about">About</a> → A link (<a> tag) that navigates to the "About" section when clicked.
- href="#about" → The #about refers to an ID on the page (<section id="about">).

6. The Main Content (<section> Tags) :

<section> → Groups related content.
id="about" → The id allows links (href="#about") to jump to this section.
<h2> → A subheading.
<p> → A paragraph of text.

7. The <footer> (Bottom Section) :

<footer> → Contains copyright, social media links, terms, etc.
© → HTML code for the copyright symbol (©).

Summary of Key HTML Elements

HTML Tag	Purpose
`<!DOCTYPE html>`	Defines the HTML version (HTML5).
`<html>`	The root element of an HTML page.
`<head>`	Contains metadata like title, character set, and viewport settings.
`<title>`	Sets the page title (shown in browser tabs).
`<meta>`	Provides additional information (e.g., character encoding, responsiveness).
`<body>`	Contains all the visible content of the webpage.
`<header>`	Represents the top section (logo, heading, navigation).
`<nav>`	Defines a navigation bar.
`<ul>`	Creates an unordered list.
`<li>`	Represents a list item.
`<a>`	Creates a hyperlink.
`<section>`	Divide the webpage into meaningful sections.
`<h1> to <h6>`	Defines headings (h1 is the largest, h6 is the smallest).
`<p>`	Represents a paragraph of text.
`<footer>`	Represents the bottom section of a webpage.

Types of HTML Elements:

HTML elements are categorized into different types based on their behavior:

Block-Level Elements :

Take up the full width of the page.
Start on a new line.

Examples:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a division.</div>

<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<section>
    <h2>Our Services</h2>
    <p>We provide high-quality web development solutions.</p>
</section>

<article>
    <h2>Latest Blog Post</h2>
    <p>Learn how to build a website using HTML and CSS.</p>
</article>

<aside>
    <h3>Quick Tip</h3>
    <p>Always use semantic HTML for better SEO and accessibility.</p>
</aside>

<footer>
    <p>&copy; 2025 My Website. All Rights Reserved.</p>
</footer>

Inline Elements :

Only take up as much width as their content.
Do not start on a new line.

Examples:

<span>This is an inline element.</span>
<a href="#">This is a link</a>
<strong>Bold text</strong>

Other inline elements: <em>, <b>, <i>, <u>.

Self-Closing (Void) Elements :

Do not have a closing tag.
Used for elements like images, line breaks, and inputs.

Examples:

<img src="image.jpg" alt="Example Image">
<br>
<input type="text" placeholder="Enter your name">

Other self-closing elements: <hr>, <meta>, <link>.

Nesting Elements

Elements can be placed inside each other, known as nesting.

Example:

<div>
    <h2>My Website</h2>
    <p>This is a paragraph inside a div.</p>
</div>

Key Takeaways

✅ An element = opening tag + content + closing tag.
✅ Block elements take full width, start on a new line.
✅ Inline elements stay on the same line.
✅ Self-closing elements don't need an end tag.
✅ Nesting should follow proper structure.

HTML for Beginners: Building the Skeleton of a Webpage

Table of contents

What is HTML?

Summary of Key HTML Elements

Types of HTML Elements:

Examples:

Examples:

Examples:

Key Takeaways

Subscribe to my newsletter

Maulik Gajipara 🏌️

Maulik Gajipara 🏌️