html tutorial - scoped Attribute in HTML - html5 - html code - html form



Scoped attribute in html

Learn html - html tutorial - Scoped attribute in html - html examples - html programs

  • The scoped attribute defines that the styles only for the parent element and that element's child elements [not for the whole document].
  • The scoped attribute is a Boolean attribute.

Syntax for scoped attribute in HTML:

<style scoped>

Difference between HTML 4.01 and HTML 5 for scoped Attribute:

HTML 4.01

  • The scoped attribute does not supports in HTML 4.

HTML 5

  • The scoped attribute is added newly in HTML 5.

Applies To:

Element Attribute
<style> scoped

Sample Coding for scoped Attribute in HTML:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML scoped Attribute</title>
        <style>
          h1 {
            color:red;}
        </style>
    </head>
    <body>
        <div>
            <style scoped>
                h1 {
                  color:blue;}
            </style>
            <h1>Learn HTML5 with our Wikitechy.com</h1>
        </div>
            <h1>Learn our Creative step by step HTML5 tutorials library</h1>
    </body>
</html>

Code Explanation for scoped Attribute in HTML:

scoped Attribute Code Explanation

  1. The <style> tag is used to specify style for specific elements.
  2. Within the style tag, the color red is given for <h1> tag.
  3. In div tag, the <style> is applied with scoped attribute, which specifies that the styles only apply to this div element.
  4. Within the style tag, the color blue is given for <h1> tag.
  5. Learn HTML5 with our Wikitechy.com is declared within the h1 tag which is inside the div tag.
  6. The sentence defined inside the h1 tag will have the style property with its font color as red.

Output for scoped Attribute in HTML:

scoped Attribute Output

  1. The output displays the Learn HTML5 with our Wikitechy.com in blue color.
  2. The red color is displayed in the output for Learn our Creative step by step HTML5 tutorials library.

Browser Support for scoped Attribute in HTML:

No No 21.0 No No

Related Searches to scoped attribute in html