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">
<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">
<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>
<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>
<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>
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>
💡 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)