HTML scope Attribute

Description

The scope attribute is a vital feature in HTML used to specify the scope of header cells in a table. It plays a crucial role in enhancing table accessibility, particularly for screen readers, by providing context about how each header cell relates to other cells in the table. The attribute can be applied to th (table header) elements, and its value indicates whether the header is for a row, column, or a group of rows or columns.

The scope attribute enhances table accessibility by providing screen readers with the necessary context to interpret the table structure correctly. It helps users understand the relationship between headers and data cells, making tables more navigable and understandable, especially for visually impaired users. Proper use of the scope attribute contributes to creating web content that's more inclusive and accessible to a wider range of users.

Syntax

<th scope="col | row | colgroup | rowgroup">

Values

colSpecifies that the header cell applies to a column of data cells in the table.
rowIndicates that the header cell applies to a row of data cells in the table.
colgroupDenotes that the header cell applies to a group of columns in the table.
rowgroupDenotes that the header cell applies to a group of rows in the table.

Applies To

The scope attribute can be used on the following html elements.

<th>

Example

HTML

<table border="1">

  <tr>

    <th scope="col">Name</th>

    <th scope="col">Age</th>

    <th scope="col">City</th>

  </tr>

  <tr>

    <td>John Doe</td>

    <td>30</td>

    <td>New York</td>

  </tr>

  <tr>

    <td>Jane Doe</td>

    <td>25</td>

    <td>Los Angeles</td>

  </tr>

</table>