**Course Title:** HTML & Web Development Fundamentals: Building Modern Websites **Section Title:** Advanced HTML Techniques **Topic:** Enhance a webpage with advanced HTML elements like `<details>`, `<meter>`, and `<iframe>` (Lab topic) **Objective:** In this lab, you will learn how to use advanced HTML elements like `<details>`, `<meter>`, and `<iframe>` to enhance a webpage and create interactive content. By the end of this lab, you will have a solid understanding of how to use these elements to improve the user experience and create a more engaging webpage. **Lab Overview:** In this lab, we will be working with three advanced HTML elements: 1. `<details>`: This element creates a collapsible section that can be expanded or collapsed by the user. 2. `<meter>`: This element represents a scalar value within a known range, such as a progress bar or a rating system. 3. `<iframe>`: This element represents an inline frame, which can be used to embed an external webpage or other online content directly into your own webpage. **Using the `<details>` Element:** The `<details>` element creates a collapsible section that can be expanded or collapsed by the user. Inside the `<details>` element, you will typically find a `<summary>` element, which provides a summary or title for the content within the collapsible section. **Example:** ```html <details> <summary>About Us</summary> <p>Welcome to our website! Here you can learn more about our company and what we do.</p> </details> ``` In this example, the `<summary>` element provides a title for the collapsible section, which can be expanded or collapsed by the user. **Using the `<meter>` Element:** The `<meter>` element represents a scalar value within a known range, such as a progress bar or a rating system. This element is typically used to display a value within a specific range, such as a percentage or a rating. **Example:** ```html <meter value="50" min="0" max="100">Half Complete</meter> ``` In this example, the `<meter>` element displays a progress bar that is half complete (50%) within a range of 0-100. **Using the `<iframe>` Element:** The `<iframe>` element represents an inline frame, which can be used to embed an external webpage or other online content directly into your own webpage. **Example:** ```html <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3710.137205444593!2d-123.1174991844118!3d49.28272977932836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5485c79ea0e1e6e9%3A0xb8a0ae29cc6e05e4!2sThe+University+of+British+Columbia!5e0!3m2!1sen!2sca!4v1496974902473" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> ``` In this example, the `<iframe>` element embeds a Google Map directly into the webpage. **Conclusion:** In this lab, you learned how to use advanced HTML elements like `<details>`, `<meter>`, and `<iframe>` to enhance a webpage and create interactive content. You should now have a solid understanding of how to use these elements to improve the user experience and create a more engaging webpage. **What's Next:** In the next topic, we will cover 'Understanding HTML for email: Key differences and limitations' from HTML Email Development. [Read the next topic here](link). **External Links:** * Mozilla Developer Network (MDN) Documentation on the `<details>` element: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details> * Mozilla Developer Network (MDN) Documentation on the `<meter>` element: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter> * Mozilla Developer Network (MDN) Documentation on the `<iframe>` element: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe> **Leave a comment or ask for help:** If you have any questions or need help with this topic, please leave a comment below.