� HTML Structure
HTML (HyperText Markup Language) is the standard language for creating
webpages.
Every HTML document follows a specific structure with tags that define how
content is displayed.
The structure includes:
1. <!DOCTYPE html> – Defines the document type and version (HTML5).
2. <html> – Root element containing all HTML content.
3. <head> – Contains metadata, title, styles, and links.
4. <body> – Contains visible content like text, images, and forms.
� Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- Visible content here -->
</body>
</html>
� �⃣ Elements and Attributes
� Elements
HTML elements are building blocks of a webpage.
An element usually has opening and closing tags.
Example:
<p>This is a paragraph.</p>
Here,
<p> = opening tag
</p> = closing tag
This is a paragraph. = content
� Attributes
Attributes provide additional information about elements.
They are written inside the opening tag.
Syntax:
<tagname attribute="value">Content</tagname>
Common Attributes:
Attribute Description
id Unique identifier for an element
class Groups elements for styling
style Inline styling
title Tooltip text when hovering
align Sets text alignment (deprecated in HTML5)
lang Specifies language of content
Example:
<p style="color:blue;" title="Hello">This is a blue paragraph.</p>
� �⃣ Headings in HTML
Headings are used for titles and sub-titles.
There are six levels of headings: <h1> to <h6>.
<h1> is the largest and <h6> is the smallest.
Search engines (like Google) give more importance to headings — so they are SEO-
important.
Example:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>
✍� �⃣ Paragraphs
Paragraphs are defined using the <p> tag.
Automatically adds line breaks before and after.
You can use <br> tag for a single line break within a paragraph.
Example:
<p>This is my first paragraph.</p>
<p>This is my second paragraph.<br>This line is inside the same
paragraph.</p>
� �⃣ Styles in HTML
The style attribute is used to add CSS (Cascading Style Sheets) properties directly
in the HTML tag.
Syntax:
<tagname style="property:value;">
You can change color, font, size, alignment, background, etc.
Property Example Description
color style="color:red;" Sets text color
background-color style="background-color:yellow;" Sets background color
font-size style="font-size:20px;" Sets font size
text-align style="text-align:center;" Aligns text
font-family style="font-family:Arial;" Changes text font
� �⃣ Example Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Structure Example</title>
</head>
<body style="background-color:#f0f8ff; font-family:Arial; color:#2c3e50;">
<h1 style="color:#1a5276; text-align:center;">Welcome to My
Webpage</h1>
<h2>About HTML</h2>
<p style="font-size:18px;">
HTML stands for <b>HyperText Markup Language</b>.
It is used to create web pages that are displayed on the Internet.
</p>
<h3>Features of HTML</h3>
<p>
<ul style="font-size:16px;">
<li>Easy to learn and use</li>
<li>Platform independent</li>
<li>Supports multimedia elements</li>
</ul>
</p>
<h3 style="color:green;">Contact Us</h3>
<p title="Email Section" style="background-color:#d6eaf8;
padding:10px;">
For more information, write to us at:
<a href="[Link]
style="color:red;">info@[Link]</a>
</p>
</body>
</html>
� �⃣ Key Exam Points Summary
Topic Key Points
HTML Structure <!DOCTYPE html>, <html>, <head>, <body> are main sections
Element Opening + Content + Closing tags
Attribute Provides extra info like id, class, style, etc.
Headings <h1> to <h6> (largest to smallest)
Paragraphs Defined using <p>, auto line breaks
Style Used to beautify content; written as style="property:value;"
Would you like me to continue next with HTML Lists (Ordered, Unordered,
Description)?
It’s the next logical topic after headings & paragraphs and is also a frequent exam question.
You said:
html structure