Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the value associated with the http-equiv or name attribute in HTML?
The content attribute in HTML is used to specify the value associated with the http-equiv or name attribute in meta tags. This attribute provides essential metadata information to browsers and search engines about your web page.
Syntax
Following is the syntax for using the content attribute with the name attribute −
<meta name="attribute-name" content="value">
Following is the syntax for using the content attribute with the http-equiv attribute −
<meta http-equiv="attribute-name" content="value">
Using Content with Name Attribute
The name attribute specifies the type of metadata, while the content attribute provides the actual value. This combination is commonly used for SEO metadata, viewport settings, and page descriptions.
Example − Page Description and Keywords
Following example shows how to use the content attribute with various name attributes −
<!DOCTYPE html> <html> <head> <meta name="description" content="Learn HTML, CSS, and JavaScript tutorials at TutorialsPoint"> <meta name="keywords" content="HTML, CSS, JavaScript, tutorials, programming"> <meta name="author" content="TutorialsPoint"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Content Attribute Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h1>Welcome to Our Tutorial Website</h1> <p>This page demonstrates the use of meta content attributes for SEO and browser configuration.</p> </body> </html>
The meta tags in the head section provide information about the page that is used by search engines and browsers but not displayed to users directly.
Using Content with HTTP-Equiv Attribute
The http-equiv attribute simulates HTTP headers, and the content attribute provides the header value. This is used for controlling browser behavior, character encoding, and page refresh settings.
Example − Character Encoding and Refresh
Following example demonstrates the content attribute with http-equiv for different purposes −
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="30">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTTP-Equiv Content Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Auto-Refresh Page</h1>
<p>This page will automatically refresh every 30 seconds due to the refresh meta tag.</p>
<p>Current time: <span id="time"></span></p>
<script>
document.getElementById('time').textContent = new Date().toLocaleTimeString();
</script>
</body>
</html>
This example sets UTF-8 encoding, enables automatic page refresh every 30 seconds, and ensures IE compatibility mode.
Accessing Content Values with JavaScript
You can retrieve the content attribute values using JavaScript to dynamically read or modify meta information.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Original description for our website">
<meta name="keywords" content="HTML, CSS, JavaScript">
<title>JavaScript Content Access</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Meta Content Reader</h1>
<button onclick="showMetaContent()">Show Meta Content</button>
<button onclick="updateDescription()">Update Description</button>
<div id="output" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function showMetaContent() {
var description = document.querySelector('meta[name="description"]').getAttribute('content');
var keywords = document.querySelector('meta[name="keywords"]').getAttribute('content');
document.getElementById('output').innerHTML =
'<strong>Description:</strong> ' + description + '<br>' +
'<strong>Keywords:</strong> ' + keywords;
}
function updateDescription() {
var meta = document.querySelector('meta[name="description"]');
meta.setAttribute('content', 'Updated description with new content!');
document.getElementById('output').innerHTML = '<em>Description updated!</em>';
}
</script>
</body>
</html>
Clicking "Show Meta Content" displays the current content values, while "Update Description" modifies the description meta tag dynamically.
Common Content Attribute Values
Following table shows common uses of the content attribute with different meta attributes −
| Attribute Type | Name/HTTP-Equiv Value | Content Example | Purpose |
|---|---|---|---|
| name | description | "Learn web development tutorials" | Page description for search engines |
| name | keywords | "HTML, CSS, JavaScript, tutorials" | Keywords for SEO |
| name | viewport | "width=device-width, initial-scale=1.0" | Mobile responsive design |
| http-equiv | Content-Type | "text/html; charset=UTF-8" | Document encoding |
| http-equiv | refresh | "30" or "5;url=page.html" | Auto-refresh or redirect |
| http-equiv | X-UA-Compatible | "IE=edge" | IE compatibility mode |
Conclusion
The content attribute works in conjunction with either the name or http-equiv attribute in meta tags to provide essential metadata about web pages. It serves different purposes from SEO optimization with name attributes to browser behavior control with http-equiv attributes, making it a crucial component for proper HTML document configuration.
194 Views
