YouTip

## HTML <hr> width Attribute The `width` attribute of the `

---

` tag is used to specify the horizontal length (width) of a thematic break or horizontal rule. > **⚠️ Deprecation Notice:** The `width` attribute is **deprecated** in HTML 4.01 and is **not supported** in HTML5. Modern web development standards require using CSS to style the width of `

---

` elements. --- ## Quick Example Below is an example of a horizontal rule with its width set to 50% using the legacy HTML attribute: ```html

---

``` --- ## Browser Support | Attribute | Chrome | Edge/IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`width`** | Yes | Yes | Yes | Yes | Yes | *Note: Although the `width` attribute is deprecated, all major modern browsers still support it for backwards compatibility.* --- ## Definition and Usage The `width` attribute defines the horizontal span of the `

---

` element. It can be specified either as an absolute value in pixels or as a relative value in percentage (relative to its containing element). ### Why you should avoid it: * **HTML5 Compatibility:** HTML5 aims to separate structure (HTML) from presentation (CSS). The `width` attribute is purely presentational, which is why it has been removed from the HTML5 standard. * **Best Practice:** You should always use the CSS `width` property instead. --- ## Syntax ```html

---

``` ### Attribute Values | Value | Description | | :--- | :--- | | *pixels* | Specifies the width in pixels (e.g., `100` or `100px`). | | *%* | Specifies the width as a percentage of the containing element's width (e.g., `50%`). | --- ## Modern CSS Alternatives Instead of using the obsolete `width` attribute, you should style your `

---

` elements using CSS. This can be done via inline styles, internal stylesheets, or external stylesheets. ### Inline CSS Example ```html

---

``` ### External/Internal CSS Example ```css /* Style all horizontal rules in your stylesheet */ hr { width: 300px; /* Fixed width in pixels */ margin-left: auto; /* Center the horizontal rule */ margin-right: auto; } ``` Using CSS not only keeps your HTML code clean and compliant with modern standards, but it also gives you greater control over other stylistic properties of the horizontal rule, such as `border`, `height`, and `background-color`.