What is Html

Hypertext Markup Language.
Markup: - Annotations tags used to markup context
Hypertext: - One page linked to another page
Html is Skeleton of web pages
CSS provides formatting / appearance.
JS provides functionality

Building the Skeleton of web page

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

</body>
</html>

Now Understand the Building of the web page 🕸️

What are tags?

💡

Tags represented How to render different element for example <h1> - Heading tag , <p> - paragraph tag, <a> - anchor tag etc.

What is element

Opening tag: - <H1>

Closing tag: - </H1>

Content: - Hello world

💡

Element: - Opening tag + content + closing tags

<!DOCTYPE HTML>

💡

It’s told about your browsers that it an Html version documents

<Html lang=”en”> </Html>

💡

It's told about the Content of Web pages is in the English.

<Head> Tag </Head>

💡

In the head tag store the title information, meta tags, style, scripts, link etc.

<Title> Tag </Title >

💡

It’s given the information abouts Web pages name

<Meta> Tag </Meta>

💡

Define Meta data about the html doc. Meta is the information about the data is know as Meta data.

💡

Always go inside head tag

Used to specify

Character set
Page description
Keyword
Author
Viewport

Analogy: HTML as a Building Blueprint

Imagine you're constructing a house. Before building, you need a blueprint that tells you:

Where the doors will be.
How many rooms there are.
Where the windows will go.

HTML (Hypertext Markup Language) is like that blueprint for a website. It:

Defines the structure of the website (headers, paragraphs, images, links).
Tells the browser what to display but doesn’t decide how it looks (that’s CSS’s job) or how it behaves (that’s JavaScript’s job).

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

Your Role as a Problem-Solver

As a web developer (or learner), your task is to:

Understand what the blueprint (HTML structure) looks like.
Spot issues in the blueprint, like missing doors (tags) or incorrect room placements (nesting).
Fix these issues so the website displays correctly.

Difference Between Semantic & Non-Semantic Tags

Semantic Tags

Definition: Semantic tags clearly describe their meaning to both the browser and the developer.
Purpose: They improve the structure, accessibility, and SEO of a webpage.
Examples:
- <header>: Represents the header of a page or section.
- <footer>: Represents the footer of a page or section.
- <article>: Represents independent, self-contained content.
- <section>: Groups related content together.
- <nav>: Represents navigation links.
- <main>: Denotes the main content of the document.
Use Case:
Suppose you're designing a blog post. Using semantic tags makes the code more organized and readable:

<header>
    <h1>Blog Title</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
    </nav>
</header>
<main>
    <article>
        <h2>Understanding Semantic Tags</h2>
        <p>Semantic tags are important for accessibility and SEO...</p>
    </article>
</main>
<footer>
    <p>&copy; 2025 My Blog</p>
</footer>

Non-Semantic Tags

Definition: Non-semantic tags do not provide clear meaning or context to their content.
Purpose: They are used for basic structuring or styling purposes but lack semantic value.
Examples:
- <div>: A generic container for grouping content.
- <span>: A generic inline container for styling a part of text or content.
Use Case:
You can use non-semantic tags for styling or grouping content without adding meaning:

<div class="container">
    <div class="header">
        <h1>Welcome to My Blog</h1>
    </div>
    <div class="content">
        <p>This is a blog about web development.</p>
    </div>
    <div class="footer">
        <p>&copy; 2025 My Blog</p>
    </div>
</div>

Key Differences:

Aspect	Semantic Tags	Non-Semantic Tags
Clarity of Purpose	Clearly describe their role and content.	Do not provide specific meaning.
SEO Benefits	Help search engines understand content.	Provide no additional SEO value.
Accessibility	Improve accessibility for screen readers.	Offer no accessibility advantages.
Code Readability	Easier to understand and maintain.	Can make code less intuitive.

HTML For Beginners

A Beginner's Guide to Learning HTML

Table of contents