DEV Community

Raizo-03
Raizo-03

Posted on • Edited on

DAY 8 OF HTML

Introduction

This is a brief introduction to other important HTML tags that are commonly used in web development.

📋 HTML Tags Overview

<meta> Tag

Description:

  • Defines metadata about an HTML document, such as character set, author, and viewport settings
  • Placed within the <head> section of the document
  • Commonly used for setting the character encoding and viewport for responsive design
  • Used to provide information to search engines and browsers
  • Helps for SEO and ensures proper rendering of the page

Usage Examples:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

<link> Tag

Description:

  • Defines the relationship between the current document and an external resource
  • Commonly used to link to stylesheets (CSS) and icons
  • Placed within the <head> section of the document
  • Helps browsers understand how to handle the linked resource

Usage Examples:

<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
Enter fullscreen mode Exit fullscreen mode

<script> Tag

Description:

  • Defines a client-side script, such as JavaScript
  • Can be placed in the <head> or <body> section
  • Commonly used to add interactivity and dynamic content to web pages
  • Can link to external script files or contain inline scripts

Usage Examples:

<script src="script.js"></script>
<script>
  alert("Hello, World!");
</script>
Enter fullscreen mode Exit fullscreen mode

<iframe> Tag

Description:

  • Defines an inline frame, which is used to embed another document within the current HTML document
  • Commonly used to embed videos, maps, or other web pages
  • Can specify the size and border of the iframe

Usage Examples:

<iframe src="https://www.example.com" width="600" height="400" title="alternative-title"></iframe>
Enter fullscreen mode Exit fullscreen mode

<progress> Tag

Description:

  • Represents the progress of a task, such as file upload or download
  • Can display a value between 0 and 1, or a range of values
  • Commonly used to show the completion status of a process

Usage Examples:

<progress value="0.5" max="1"></progress>
Enter fullscreen mode Exit fullscreen mode

Interactive Example:

<button id="progress-btn">Toggle Progress Bar</button>
<progress id="progress" value="0.5" max="1" hidden></progress>

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("progress-btn").addEventListener("click", function() {
        const progress = document.getElementById("progress");
        progress.hidden = !progress.hidden; // Toggle visibility                                                
    });
});
</script>
Enter fullscreen mode Exit fullscreen mode

💡 Key Takeaways

  • Meta tags are essential for SEO and proper page rendering
  • Link tags connect external resources like CSS and favicons
  • Script tags add interactivity with JavaScript
  • Iframe tags embed external content seamlessly
  • Progress tags provide visual feedback for ongoing processes

Top comments (0)