🌐 What is HTML?

HTML Definition

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It describes the structure of a web page using markup elements.

Key Characteristics of HTML:

Markup Language: Uses tags to define elements
Platform Independent: Works on any operating system
Browser Interpreted: Browsers read and display HTML
Semantic: Describes content structure and meaning
Extensible: Can be enhanced with CSS and JavaScript

📄 HTML Document Structure

Basic HTML5 Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>
                

Document Structure Explanation

Element	Purpose	Description
<!DOCTYPE html>	Document Type Declaration	Tells browser this is HTML5 document
<html>	Root Element	Contains all other HTML elements
<head>	Document Head	Contains metadata and page information
<body>	Document Body	Contains visible page content

📋 DOCTYPE Declaration

HTML5 DOCTYPE

<!DOCTYPE html>

The DOCTYPE declaration tells the browser which version of HTML the page is written in. HTML5 uses the simple declaration above.

⚠️ Important Notes:

DOCTYPE must be the very first thing in HTML document
Must be written in uppercase letters
No closing tag required
HTML5 DOCTYPE is case-insensitive but uppercase is recommended

🏗️ HTML Element Structure

Anatomy of an HTML Element

<tagname attribute="value">Content</tagname>

Components:

Opening Tag: <tagname>
Attributes: provide additional information
Content: text or other elements
Closing Tag: </tagname>

Example HTML Elements

<!-- Heading Element -->
<h1>Welcome to HTML</h1>

<!-- Paragraph Element -->
<p>This is a paragraph with <strong>bold text</strong>.</p>

<!-- Element with Attributes -->
<a href="https://example.com" target="_blank">Visit Example</a>

<!-- Self-closing Element -->
<img src="image.jpg" alt="Description">
                

⚙️ HTML Attributes

Common HTML Attributes

Attribute	Description	Example
id	Unique identifier for an element	<div id="header">
class	CSS class name(s) for styling	<p class="highlight">
style	Inline CSS styling	<h1 style="color: blue;">
title	Tooltip text for element	<img title="Photo description">
lang	Language of the content	<html lang="en">

📝 Basic HTML Elements

Heading Elements

Heading 1 - Most Important

Heading 2 - Second Level

Heading 3 - Third Level

Heading 4 - Fourth Level

Heading 5 - Fifth Level

Heading 6 - Least Important

<h1>Heading 1 - Most Important</h1>
<h2>Heading 2 - Second Level</h2>
<h3>Heading 3 - Third Level</h3>
<h4>Heading 4 - Fourth Level</h4>
<h5>Heading 5 - Fifth Level</h5>
<h6>Heading 6 - Least Important</h6>
                

Paragraph and Text Elements

This is a paragraph element. It contains text content and can include other inline elements.

Another paragraph with strong text, emphasized text, and a link.

<p>This is a paragraph element.</p>
<p>Text with <strong>strong text</strong> and <em>emphasized text</em>.</p>
                

💬 HTML Comments

Comment Syntax

<!-- This is an HTML comment -->
<!-- Comments are not displayed in the browser -->
<!-- They are useful for documentation and debugging -->

<h1>Visible Content</h1>
<!-- <h2>Hidden Content</h2> -->
                

Comment Uses:

Document code for future reference
Debug by commenting out code
Add notes for other developers
Temporarily hide content

✅ HTML Best Practices

HTML Validation Rules

Proper Nesting: Elements must be properly nested
Closing Tags: All elements must have closing tags (except self-closing)
Attribute Quotes: Use quotes around attribute values
Lowercase Tags: Use lowercase for HTML tags
Semantic Structure: Use appropriate elements for content

❌ Common HTML Mistakes:

Forgetting to close tags
Improper nesting (e.g., <p><div></p></div>)
Missing alt attributes on images
Using deprecated HTML elements
Missing DOCTYPE declaration

🌐 HTML Basics

Fundamental HTML Concepts and Document Structure