YouTip

## HTML `` `content` Attribute The `content` attribute of the `` tag specifies the value associated with either the `name` or `http-equiv` attribute. It provides metadata about the HTML document, which is used by browsers, search engines (for SEO), and other web services to process and display the page correctly. --- ## Browser Support The `content` attribute is universally supported by all modern and legacy web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer * Apple Safari * Opera --- ## Definition and Usage The `` tag defines metadata about an HTML document. The `content` attribute is mandatory whenever the `name` or `http-equiv` attribute is defined. It holds the actual value or text associated with those properties. * **When paired with `name`:** The `content` attribute provides information for page classification, search engine indexing, and viewport configuration (e.g., author, description, keywords, viewport). * **When paired with `http-equiv`:** The `content` attribute provides instructions to the browser that mimic HTTP response headers (e.g., content-type, default-style, refresh). --- ## HTML 4.01 vs. HTML5 There are no differences in the behavior or syntax of the `content` attribute between HTML 4.01 and HTML5. However, HTML5 introduces several new standard values for the `name` attribute (such as `viewport`) which rely heavily on the `content` attribute. --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *text* | The value or information associated with the `name` or `http-equiv` attribute. | --- ## Code Examples ### 1. Basic SEO Metadata This example demonstrates how to use the `content` attribute to define a page description and keywords for search engines: ```html

The metadata defined in the head section is not visible on the page, but is read by search engines and browsers.

``` ### 2. Responsive Viewport Configuration The `content` attribute is crucial for responsive web design. It controls the page's dimensions and scaling on mobile devices: ```html ``` ### 3. Page Refresh / Redirect (http-equiv) You can use the `content` attribute alongside `http-equiv` to automatically refresh the page or redirect the user after a specified number of seconds: ```html ``` --- ## Key Considerations 1. **SEO Best Practices:** Keep the `content` of your `description` meta tag under 155–160 characters. This ensures search engines do not truncate your page description in search results. 2. **Character Encoding:** While the `content` attribute was previously used to define character sets in HTML4 (e.g., ``), HTML5 simplifies this to ``. 3. **Accessibility and Zooming:** When configuring the `viewport` meta tag, avoid setting `user-scalable=no` or limiting `maximum-scale` in your `content` attribute, as this prevents visually impaired users from zooming in on your content.