HTML5 Semantic Tags

 

Real-Time Product Feedback Page

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Character encoding to support all languages and special symbols -->
    <meta charset="UTF-8">

    <!-- Responsive design: ensures mobile-friendly scaling -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO: Page title shown in browser and search engines -->
    <title>Product Feedback | MyOnlineStore</title>

    <!-- SEO: Description for search engines -->
    <meta name="description" content="Submit product feedback for SmartWatch X2 and other electronics at MyOnlineStore. Help us improve your shopping experience!">

    <!-- SEO: Relevant keywords -->
    <meta name="keywords" content="SmartWatch, Electronics, Feedback, Online Store, Customer Reviews">

    <!-- SEO: Author name -->
    <meta name="author" content="MyOnlineStore Team">

    <!-- SEO: Tell search engines to index this page and follow links -->
    <meta name="robots" content="index, follow">
</head>

<body>

    <!-- Header: Site branding -->
    <header>
        <h1>MyOnlineStore</h1>
        <p>Your one-stop shop for smart electronics</p>
    </header>

    <!-- Navigation bar with page links -->
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="#products">Products</a></li>
            <li><a href="#feedback">Feedback</a></li>
            <li><a href="#summary">Ratings</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <!-- Main content of the page -->
    <main>

        <!-- Intro Section -->
        <section id="intro">
            <h2>Welcome!</h2>
            <p>
                Thank you for visiting <strong>MyOnlineStore</strong>. We’d love your feedback on our latest electronics.
                <mark>Your opinion matters!</mark>
            </p>
        </section>

        <!-- Product Section with article and figure -->
        <section id="products">
            <article>
                <h2>SmartWatch X2</h2>
                <figure>
                    <img src="smartwatch.jpg" alt="SmartWatch X2" width="200">
                    <figcaption>Track your health and stay connected with SmartWatch X2</figcaption>
                </figure>
                <!-- Expandable product specifications -->
                <details>
                    <summary>Product Specifications</summary>
                    <ul>
                        <li>Battery: <time datetime="P7D">7-day life</time></li>
                        <li>Water Resistant: 50 meters</li>
                        <li>Connectivity: Bluetooth 5.0</li>
                    </ul>
                </details>
            </article>
        </section>

        <!-- Aside content: Stock alert -->
        <aside>
            <h3>Low Stock Alert</h3>
            <p>Only a few SmartWatch X2 left:</p>
            <meter value="3" min="0" max="10">3 of 10</meter>
        </aside>

        <!-- Feedback Form -->
        <section id="feedback">
            <h2>Submit Your Feedback</h2>
            <form method="post" action="/submit-feedback">
                <fieldset>
                    <legend>Customer Info</legend>

                    <label for="name">Name:</label><br>
                    <input type="text" id="name" name="name" required><br><br>

                    <label for="email">Email:</label><br>
                    <input type="email" id="email" name="email" required><br><br>

                    <label>Gender:</label><br>
                    <input type="radio" name="gender" value="Male" checked> Male
                    <input type="radio" name="gender" value="Female"> Female
                    <input type="radio" name="gender" value="Other"> Other<br><br>
                </fieldset>

                <fieldset>
                    <legend>Your Experience</legend>

                    <label for="product">Product:</label><br>
                    <select name="product" id="product">
                        <option value="smartwatch">SmartWatch X2</option>
                        <option value="earbuds">NoiseFree Earbuds</option>
                        <option value="laptop">LiteBook 15</option>
                    </select><br><br>

                    <label for="rating">Rate (1-5):</label><br>
                    <input type="range" name="rating" min="1" max="5"><br>
                    <progress value="4" max="5">4 out of 5</progress><br><br>

                    <label for="comments">Comments:</label><br>
                    <textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>
                </fieldset>

                <button type="submit">Submit Feedback</button>
            </form>
        </section>

        <!-- Data Summary in a Table -->
        <section id="summary">
            <h2>Recent Ratings</h2>
            <table border="1">
                <caption>Customer Review Summary</caption>
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Average Rating</th>
                        <th>Top Comment</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>SmartWatch X2</td>
                        <td>4.5</td>
                        <td>"Amazing battery and features!"</td>
                    </tr>
                    <tr>
                        <td>NoiseFree Earbuds</td>
                        <td>4.2</td>
                        <td>"Crisp sound and great fit."</td>
                    </tr>
                </tbody>
            </table>
        </section>

    </main>

    <!-- Footer with contact information -->
    <footer id="contact">
        <address>
            Email: <a href="mailto:support@myonlinestore.com">support@myonlinestore.com</a><br>
            &copy; <time datetime="2025-06-27">2025</time> MyOnlineStore Inc.
        </address>
    </footer>

</body>

</html>

✅ Summary of Semantic & SEO Features

FeaturePurposeBenefit
<!DOCTYPE html>Declares HTML5 documentEnables HTML5 parsing
<header>, <footer>Defines header/footer areasImproves structure & screen reader navigation
<nav>Main navigation linksSEO & accessibility-friendly menus
<main>, <section>Groups main contentBetter layout semantics
<article>, <figure>Self-contained product infoSEO-rich content blocks
<details> & <summary>Expand/collapse specsCompact UX
<form>, <fieldset>Collects user feedbackStructured inputs
<table>Displays summarized rating dataGreat for screen readers & structured info
<meta name="viewport">Mobile-friendly scalingResponsive design
<meta name="description">, keywords, author, robotsSEO tagsBoosts search ranking & control over indexing
<meter>, <progress>Visual indicatorsModern UI components (no CSS needed)
<address>Marks contact infoImproves bot parsing & accessibility



Comments

Post a Comment

Popular posts from this blog

Interview Tips: Dot NET Framework vs Net CORE

Image
Interview Tips: Dot NET Framework vs Net CORE .NET Framework What :  It's a software development framework created by Microsoft, mainly used for building Windows applications. Why :  It has been around for a long time and is very reliable for building large, complex applications especially for enterprises. How :  You use it to build applications that run exclusively on Windows, making use of a vast array of built-in libraries and features. Why Not :  It can't be used for cross-platform applications, so if you need your application to run on other operating systems like macOS or Linux, .NET Framework isn't the right choice. .NET Core What :  It's a newer, open-source, and cross-platform framework from Microsoft, designed for modern app development. Why :  It's lightweight, high-performance, and can run on multiple operating systems (Windows, macOS, Linux). How :  You use it to build modern, scalable, and quickly deployable applications, especially cloud...
Read more

FREE Webinar: Run Your Own Independent DeepSeek LLM

Image
Faith Infotech Academy, Technopark invites you to an exclusive FREE webinar on "Run Your Own Independent DeepSeek LLM" , where you’ll learn how to deploy and manage DeepSeek LLM effectively. Speaker:  Abhilash Nelson  Trainer & Researcher in AI & Machine Learning  An expert in AI and machine learning, Abhilash will guide you through the process of setting up and running your own independent DeepSeek LLM, empowering you with insights into model deployment, fine-tuning, and real-world applications. What You’ll Learn: ✅ Understanding DeepSeek LLM and its capabilities ✅ Setting up DeepSeek LLM on your own infrastructure ✅ Fine-tuning and optimizing the model for various applications ✅ Use cases and practical demonstrations Key Takeaways: ✅ Mastering DeepSeek LLM for Developers ✅ Boost Your VS Code workflow ✅ Learn to Run DeepSeek locally for AI assistance 📅 Date: 6 February 2025, Thursday 🕒 Time:  10.00 to 11.00 AM 📍 Mode: Online (Webinar link will be shar...
Read more

Delegates and Events

1. What are Delegates in C#? Explain: Delegates are type-safe function pointers. They act as a placeholder for methods that have a specific signature (return type and parameters). Analogy: Imagine a delegate as a contract. It specifies the "shape" of the method it can hold. Any method that fits that shape (same return type and parameters) can be assigned to the delegate. Example: public delegate int MathOperation(int x, int y);  // Define a delegate // Methods that match the delegate signature public int Add(int x, int y) { return x + y; } public int Subtract(int x, int y) { return x - y; } // Use the delegate MathOperation operation = Add; // Assign the Add method to the delegate int result = operation(5, 3); // Call the method through the delegate 2. What are Events in C#? Explain: Events are a mechanism for broadcasting notifications to interested parties (subscribers). They are built upon delegates. Analogy: Imagine an event as a doorbell. When someone presses the d...
Read more