1. HTML Basics

What is HTML? HTML (HyperText Markup Language) is the foundation of web development, used to structure content on the web. It defines the skeleton of a webpage using tags and elements.
Structure of an HTML Document: Every HTML document starts with <!DOCTYPE html> to declare it as HTML5, followed by the <html> root element, which contains <head> (metadata like title and charset) and <body> (visible content).
Tag: A markup instruction, such as <p> (opening) and </p> (closing).
Element: Content enclosed by tags, e.g., <p>Hello</p>.
Attribute: Adds properties to elements, like id="myId" or class="myClass".

Tip: Always include lang="en" in the <html> tag for accessibility and SEO.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p id="intro" class="text-gray-700">This is a paragraph with id and class attributes.</p>
</body>
</html>

2. Basic HTML Tags

Basic tags form the core of HTML content structuring. They include structural tags (<html>, <head>, <body>), headings (<h1> to <h6>), paragraphs (<p>), and formatting tags like <strong> (semantic bold), <b> (visual bold), <em> (semantic italic), <i> (visual italic), <u> (underline), <mark> (highlight), <sub> (subscript), <sup> (superscript), <del> (strikethrough), and <ins> (inserted text).

Tip: Use semantic tags (<strong>, <em>) over visual tags (<b>, <i>) for better accessibility and SEO.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Tags Demo</title>
</head>
<body>
    <h1>Main Heading</h1>
    <h3>Subheading</h3>
    <p>This is a <strong>semantically bold</strong> and <em>semantically italic</em> paragraph.</p>
    <p>Visual <b>bold</b> and <i>italic</i> text for styling.</p>
    <p>Underlined <u>text</u>, <mark>highlighted text</mark>, and <small>small text</small>.</p>
    <p>Chemical formula: H<sub>2</sub>O, Equation: E=MC<sup>2</sup>.</p>
    <p><del>Old content</del> and <ins>new content</ins>.</p>
    <hr>
    <p>This demonstrates a line break<br>within a paragraph.</p>
</body>
</html>

3. Lists in HTML

HTML supports three list types: Unordered Lists (<ul>) for bullet-point lists, Ordered Lists (<ol>) for numbered or lettered lists, and Description Lists (<dl>) for term-definition pairs. Lists can be nested for complex structures.

List Type	Primary Tag	Display Style	Common Use Case
Unordered List	`<ul>`	Bullets (•, ○, ■)	Navigation menus, item lists
Ordered List	`<ol>`	Numbers, letters (1, a, I)	Steps, rankings, outlines
Description List	`<dl>`	Term-definition pairs	Glossaries, FAQs, metadata

Tip: Use the type attribute in <ol> (e.g., type="A") to change numbering style to letters or Roman numerals.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lists Demo</title>
</head>
<body>
    <h2>Unordered List</h2>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>
            <ul>
                <li>Red Apple</li>
                <li>Green Apple</li>
            </ul>
        </li>
    </ul>
    <h2>Ordered List</h2>
    <ol type="1">
        <li>Step 1: Plan</li>
        <li>Step 2: Design</li>
        <li>Step 3: Develop</li>
    </ol>
    <h2>Description List</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language for structuring web content.</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets for styling web pages.</dd>
    </dl>
</body>
</html>

4. Links and Anchors

The <a> tag creates hyperlinks to other pages, files, or sections within the same page. The href attribute specifies the destination URL, and target (e.g., _blank) controls where the link opens. Use id attributes for in-page navigation.

Tip: Always include a descriptive title attribute in links for better accessibility and user experience.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links Demo</title>
</head>
<body>
    <h2>External and Internal Links</h2>
    <a href="https://example.com" target="_blank" title="Visit Example Website">Visit Example</a>
    <a href="#section1" title="Jump to Section 1">Go to Section 1</a>
    <section id="section1" style="margin-top: 2rem;">
        <h3>Section 1</h3>
        <p>This is a section you can link to within the page.</p>
    </section>
</body>
</html>

5. Images and Multimedia

The <img> tag embeds images with src (source URL) and alt (alternative text for accessibility). The <audio> and <video> tags embed multimedia, using <source> for file paths and controls for playback controls.

Tip: Always provide meaningful alt text for images to support screen readers and improve SEO.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multimedia Demo</title>
</head>
<body>
    <h2>Image and Multimedia</h2>
    <img src="https://via.placeholder.com/150" alt="A sample placeholder image" width="150" height="150">
    <audio controls>
        <source src="sample.mp3" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>
    <video width="320" height="240" controls>
        <source src="sample.mp4" type="video/mp4">
        Your browser does not support the video element.
    </video>
</body>
</html>

6. Buttons in HTML

The <button> tag creates customizable buttons, while <input type="button">, <input type="submit">, and <input type="reset"> are used in forms. Use onclick for JavaScript events.

Tip: Use <button> for general-purpose buttons and reserve <input> for form-specific actions.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons Demo</title>
    <style>
        button, input[type="button"], input[type="submit"], input[type="reset"] {
            padding: 0.5rem 1rem;
            margin: 0.5rem;
            border-radius: 0.25rem;
            cursor: pointer;
            background-color: #4b5563;
            color: #f3f4f6;
        }
        button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
            background-color: #6b7280;
        }
    </style>
</head>
<body>
    <button onclick="alert('Custom button clicked!')">Custom Button</button>
    <input type="button" value="Input Button" onclick="alert('Input button clicked!')">
    <form action="/submit" method="POST">
        <input type="submit" value="Submit Form">
        <input type="reset" value="Reset Form">
    </form>
</body>
</html>

7. Forms and Inputs

The <form> tag collects user input, using action (submission URL) and method (GET/POST). Input types include text, email, password, checkbox, radio, file, and more. Enhance forms with <label>, <select>, and <textarea>.

Tip: Use for attribute in <label> to link to id of input for better accessibility.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forms Demo</title>
    <style>
        form { max-width: 400px; }
        label, input, select, textarea { display: block; margin-bottom: 0.5rem; }
        input, select, textarea { width: 100%; padding: 0.5rem; background-color: #4b5563; color: #f3f4f6; border: 1px solid #6b7280; }
    </style>
</head>
<body>
    <form action="/submit" method="POST">
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required>
        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email" required>
        <label>Gender:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="usa">United States</option>
            <option value="uk">United Kingdom</option>
            <option value="canada">Canada</option>
        </select>
        <label for="comments">Comments:</label>
        <textarea id="comments" name="comments" rows="4">Enter your comments here</textarea>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

8. Tables in HTML

The <table> tag organizes data in rows (<tr>) and cells (<td> for data, <th> for headers). Use <thead>, <tbody>, and <tfoot> for semantic structure, and colspan/rowspan for merging cells.

Tip: Use scope attribute in <th> (e.g., scope="col") to improve table accessibility.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tables Demo</title>
    <style>
        table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; background-color: #2d3748; }
        th, td { border: 1px solid #6b7280; padding: 12px; text-align: left; color: #e5e7eb; }
        th { background-color: #4b5563; }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th scope="col" colspan="2">Table Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
            </tr>
            <tr>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Footer Cell 1</td>
                <td>Footer Cell 2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

9. Semantic HTML (HTML5 Tags)

Semantic HTML5 tags like <header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, <figure>, and <figcaption> provide meaningful structure, improving accessibility and SEO.

Tip: Use semantic tags to clearly define content roles, reducing reliance on <div> for better code readability.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Demo</title>
    <style>
        header, footer { background: #2d3748; color: #f3f4f6; padding: 1rem; }
        nav a { margin-right: 1rem; color: #d1d5db; }
        main { padding: 1rem; }
        aside { background: #4b5563; padding: 1rem; color: #e5e7eb; }
    </style>
</head>
<body>
    <header>
        <nav role="navigation">
            <a href="#home">Home</a>
            <a href="#about">About</a>
        </nav>
    </header>
    <main>
        <section>
            <article>
                <h2>Article Title</h2>
                <p>This is the main content of the article.</p>
                <figure>
                    <img src="https://via.placeholder.com/150" alt="Sample image">
                    <figcaption>Caption for the image</figcaption>
                </figure>
            </article>
        </section>
        <aside>Related content or sidebar information</aside>
    </main>
    <footer>© 2025 My Website</footer>
</body>
</html>

10. Meta Tags & SEO Basics

Meta tags provide metadata to enhance SEO and user experience. Key tags include charset, viewport, description, keywords, author, and Open Graph tags for social media sharing.

Tip: Keep description under 160 characters for optimal search engine display.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn HTML with this comprehensive guide">
    <meta name="keywords" content="HTML, web development, SEO, tutorial">
    <meta name="author" content="John Doe">
    <meta property="og:title" content="HTML Roadmap">
    <meta property="og:description" content="A guide to mastering HTML">
    <meta property="og:image" content="https://via.placeholder.com/150">
    <title>Meta Tags Demo</title>
</head>
<body>
    <h1>SEO Optimized Page</h1>
    <p>This page uses meta tags to improve search engine visibility.</p>
</body>
</html>

11. IFrames and Embeds

The <iframe> tag embeds external content like videos, maps, or websites. Use attributes like width, height, frameborder, and allow for customization.

Tip: Use loading="lazy" on iframes to improve page load performance.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrames Demo</title>
</head>
<body>
    <h2>Embedded YouTube Video</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
</body>
</html>

12. HTML Entities and Symbols

HTML entities render special characters, such as   (non-breaking space), < (<), > (>), & (&), © (©), ® (®), and € (€).

Tip: Use entity names (e.g., ©) for readability or numeric codes (e.g., ©) for compatibility.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Entities Demo</title>
</head>
<body>
    <p>Non-breaking space: &nbsp;&nbsp;&nbsp;Text</p>
    <p>Less than: &lt; Greater than: &gt;</p>
    <p>Copyright: &copy; Registered: &reg; Euro: &euro;</p>
    <p>Numeric example: Copyright &#169;</p>
</body>
</html>

13. HTML Comments

Comments () are used for notes or debugging, ignored by browsers. They help document code or temporarily hide content.

Tip: Avoid excessive comments to keep code clean, but use them to explain complex sections.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comments Demo</title>
</head>
<body>
    <!-- Main content section -->
    <p>This content is visible.</p>
    <!-- <p>This content is hidden for testing.</p> -->
</body>
</html>

14. File Paths in HTML

Relative Paths: Reference files relative to the current file (e.g., images/photo.jpg or ../styles.css).
Absolute Paths: Use full URLs (e.g., https://example.com/images/photo.jpg).
Root-Relative Paths: Start from the site root (e.g., /images/photo.jpg).

Tip: Use relative paths for local development and absolute paths for external resources.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Paths Demo</title>
</head>
<body>
    <img src="images/photo.jpg" alt="Relative Path Image">
    <img src="/images/photo.jpg" alt="Root-Relative Path Image">
    <img src="https://via.placeholder.com/150" alt="Absolute Path Image">
    <script src="scripts/script.js"></script>
</body>
</html>

15. HTML Layout Techniques

Use <div> and <span> for grouping, semantic HTML5 tags for structure, and CSS layouts (Flexbox, Grid) for responsive design.

Tip: Combine semantic HTML with CSS Grid or Flexbox for modern, responsive layouts.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Demo</title>
    <style>
        .container { display: flex; flex-wrap: wrap; }
        .sidebar { flex: 1 1 300px; background: #4b5563; padding: 1rem; color: #e5e7eb; }
        .main { flex: 2 1 500px; padding: 1rem; }
        header, footer { background: #2d3748; color: #f3f4f6; padding: 1rem; }
    </style>
</head>
<body>
    <header>Website Header</header>
    <div class="container">
        <aside class="sidebar">Sidebar with navigation or ads</aside>
        <main class="main">Main content area</main>
    </div>
    <footer>Website Footer</footer>
</body>
</html>

16. Accessibility in HTML

Accessibility (a11y) ensures content is usable by everyone, using alt for images, aria-label, ARIA roles, and keyboard navigation support with tabindex.

Tip: Test accessibility with tools like WAVE or Lighthouse to ensure compliance with WCAG standards.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accessibility Demo</title>
</head>
<body>
    <img src="photo.jpg" alt="A scenic mountain landscape with snow">
    <button aria-label="Close dialog window">X</button>
    <nav role="navigation" aria-label="Main navigation">
        <a href="#home" tabindex="0">Home</a>
        <a href="#about" tabindex="0">About</a>
    </nav>
</body>
</html>

17. Advanced HTML5 Topics

HTML5 introduces APIs like <canvas> for graphics, Drag & Drop, Geolocation, Web Storage (localStorage, sessionStorage), Web Workers for background tasks, and Web Components (Custom Elements, Shadow DOM).

Tip: Use <canvas> with JavaScript libraries like p5.js or Three.js for advanced graphics.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Demo</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100" aria-label="Canvas drawing a blue rectangle"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'blue';
        ctx.fillRect(50, 25, 100, 50);
        ctx.strokeStyle = 'black';
        ctx.strokeRect(50, 25, 100, 50);
    </script>
</body>
</html>

18. HTML + CSS Integration

CSS styles HTML via inline styles (style="..."), internal <style> tags, or external stylesheets (<link>). Use frameworks like Tailwind CSS for rapid development.

Tip: Prefer external stylesheets for maintainability and caching benefits.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Integration Demo</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        p.internal { color: #60a5fa; font-size: 1.1rem; }
    </style>
</head>
<body>
    <p style="font-weight: bold; color: #f87171;">Inline styled paragraph</p>
    <p class="internal">Internally styled paragraph</p>
    <p class="external">Externally styled paragraph (from styles.css)</p>
</body>
</html>

19. HTML + JavaScript Integration

JavaScript adds interactivity through <script> tags, manipulating the DOM to dynamically update content, handle events, or fetch data.

Tip: Place <script> tags at the end of <body> or use defer to ensure DOM is loaded before execution.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Integration Demo</title>
</head>
<body>
    <p id="demo">Click the button to change this text.</p>
    <button onclick="changeText()" aria-label="Change text content">Change Text</button>
    <script>
        function changeText() {
            document.getElementById('demo').innerHTML = 'Text changed dynamically!';
        }
    </script>
</body>
</html>

20. Projects to Practice HTML

Build these projects to apply HTML skills:
- Personal Portfolio: Showcase your work with a homepage, about, and contact sections.
- Resume Page: Structure your resume with semantic HTML and CSS styling.
- Image Gallery: Create a responsive gallery with thumbnails and captions.
- Feedback Form: Build a form with validation and accessibility features.
- Simple Blog Layout: Design a blog with articles, sidebars, and comments.
- Pricing Table: Create a comparison table for product pricing.

Tip: Combine HTML, CSS, and JavaScript in projects to simulate real-world web development.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Portfolio</title>
    <style>
        header { background: #2d3748; color: #f3f4f6; padding: 1.5rem; }
        nav a { color: #f3f4f6; margin-right: 1.5rem; text-decoration: none; }
        main { padding: 2rem; }
        footer { background: #2d3748; color: #f3f4f6; padding: 1rem; text-align: center; }
    </style>
</head>
<body>
    <header>
        <nav role="navigation">
            <a href="#home" aria-label="Home page">Home</a>
            <a href="#about" aria-label="About page">About</a>
            <a href="#contact" aria-label="Contact page">Contact</a>
        </nav>
    </header>
    <main>
        <section id="about">
            <h1>About Me</h1>
            <p>Hi, I'm a web developer passionate about creating accessible and responsive websites.</p>
            <figure>
                <img src="https://via.placeholder.com/150" alt="Profile picture">
                <figcaption>My Profile</figcaption>
            </figure>
        </section>
    </main>
    <footer>
        <p>© 2025 My Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>

Try our recommended online HTML compiler:

Open HTML Compiler

Download HTML Notes

View PDF Notes Download PDF Notes