Role Attribute
Blocks and many inline elements can be assigned one or more roles using the role attribute.
The role attribute is a named attribute.
You can assign roles to blocks and inline elements using the shorthand dot (.) syntax or formal (role=) syntax for the role attribute.
Assign roles to blocks
You can assign roles to blocks using the shorthand dot (.) syntax or formal (role=) syntax for the role attribute.
Shorthand role syntax for blocks
To assign a role to a block, prefix the value with a dot (.) in an attribute list.
The dot implicitly set’s the role attribute.
[.value]
****
This is a sidebar with a role assigned to it.
****
You can assign multiple roles to a block by prefixing each value with a dot (.).
[.value.value]
****
This is a sidebar with two roles assigned to it.
****
Formal role syntax for blocks
Explicitly set role, followed by the equals sign (=), and then the value in an attribute list.
[role="value"]
****
This is a sidebar with one role assigned to it.
****
Separate multiple role values with commas (,).
[role="value,value"]
****
This is a sidebar with two roles assigned to it.
****
Assign roles to formatted inline elements
You can assign roles to inline elements that are enclosed in formatting syntax, such as bold (*), italic (_), and monospace (`).
To assign a role to an inline element that’s enclosed in formatting syntax block, prefix the value with a dot (.) in an attribute list.
This sentence contains [.value]*bold inline content* that's assigned a role.
This sentence contains [.value]`monospace text` that's assigned a role.
The HTML source code that is output from Example 5 is shown below.
<p>This sentence contains <strong class="value">bold inline content</strong> that’s assigned a role.</p>
<p>This sentence contains <code class="value">monospace text</code> that’s assigned a role.</p>
</div>