This exercise discusses the `scope` attribute. What is the purpose of the scope attribute and are row and col the only values this attribute can have?

Question

This exercise discusses the scope attribute. What is the purpose of the scope attribute and are row and col the only values this attribute can have?

Answer

The scope attribute is used by screen readers to enhance accessibility for visually impaired users. In addition to the row and col values shown in this exercise, the scope attribute can also have the following values:

  1. rowgroup: used for table headings that group multiple rows.
  2. colgroup:used for table headings that group multiple columns.
  3. auto: the default value

In lessons 8 and 9 you will learn how to create cells that span multiple rows or columns. For improved accessibility, we should use the appropriate rowgroup and colgroup values within these headings.

39 Likes

Then can we say that scope attribute is an optional attribute? The browser creates the columns even without adding scope attribute.

5 Likes

Almost everything about HTML is optional. There are dozens of attributes that may be applied to any particular element. If there are none, the user agent is left to follow its own assumptions based on the namespace and how it compares to the specifications.

Take for instance a TABLE element. If there are no attributes, the browser will look to the style sheet and follow the cascade from the UA defaults, then the imported/embedded and inline styles down to the User styles. It will glean whatever information it can to help it calculate how to draw the element.

<html>
<head>
  <style>
  table { border: 5px solid orange }
  </style>
</head>
<body>
  <table></table>
</body>
<html>

We could comment on how much required stuff is missing, but this will still render perfectly in most modern browsers. Some other user agents, such as search engines and screen readers may find their hands tied and decide not to index the page, or make a mess of rendering the page for the listenerā€¦ Who knows?

More to the point, what do we see on the screen? Answer: Nothing.

The TABLE element does not have a width or height attribute unless we give it one, either in the markup or in the style sheet. So an empty table element, even with a border, does not render.

Recall that by the default box model the border is drawn inside the element. Pretty hard to draw the border when there is no room. The browser does nothing that it shouldnā€™t be able to do.

Replace the selector rule with this,

  table {
    border: 5px solid orange;
    width: 10px;
    height: 10px;
  }

Now you should see the tiny orange block on your screen.

But enough of that. Certainly scope attributes are not required. If ever you are in doubt, refer to the W3C element list for HTML5. Each element is described, and all the required or allowed attributes are listed. Dig a little deeper and we can find a complete list of all the attributes, both global and element specific. The latter group is where we find scope as it pertains only to TH elements (as far as I know without actually checking; correct me if Iā€™m wrong).

Some attributes are about position and size, while others are about semantics. They add meaning, just as their element type gives information and meaning.

At the core of standards and guidelines is well-formedness, a term that every serious web developer knows very well. They treat their HTML creations like the work of art they are. All manner of expert knowledge is applied to the creation of a well formed web document. Standards and Accessibility Guidelines are there to help us all reach that height.

scope is an attribute that has a specific purposeā€¦ To paint the target so the user agent doesnā€™t have to rely upon any of its own assumptions. Scope gives a row or column group meaning. However indistinct and unrelated the data may be, they have that one thing in common. The same TH.

Off on a tangentā€¦ Letā€™s say we have an IMG element with only a src attribute. How will that image render? No surprise there, the browser will render what it takes down from the server in its exact dimensions. However in order to do that it had to wait for the image to download (hence the image placehoder) and then read the imageā€™s header to find the dimensions, then add them into its calculations (are scrollbars needed, for instance) then finally draw it on the screen. During the whole waiting process, other objects are being drawn to the screen, but they are going to jump into new positions when the image pops in.

When we furnish the dimension information in attributes (markup or CSS), the browser does not need to wait for the image to download. It just reserves the screen space and continues drawing the rest of the page elements to the screen. When the image finally arrives it will just pop onto the screen and nothing will be shifted. Itā€™ll be like it was meant to be.

This is where well-formedness shines at its best. It informs the user agent so less assumptions and fallbacks come into play. Thatā€™s another aspect to attributes.

164 Likes

This is no doubt the best explanation of the ā€˜scopeā€™ attribute I have seen so for anywhere on the Web. Thank you!

14 Likes

Hi,

Iā€™ve been trying to work this out for an hour and am lost. I have tried scope=col and scope=row combinations and itā€™s not working.

This is my code:

Company Name Number of Items to Ship Next Action
Adam's Greenworks 14 Package Items

As someone who is trying to get into coding, I find these experiences frustrating and disheartening. Why is the solution code not readily available to review and troubleshoot rather than wasting so much time?

1 Like

Each of those THā€™s would be given COL scope as they head the respective column groups.

1 Like

Thanks for your help. Eventually I really donā€™t know what fixed itā€¦ CodeAcademy seems to have a lot of problems and isnā€™t particularly user friendly.

2 Likes

The scope attribute for table data is not supported by HTML5: ā€œThe

scope attribute is not supported in HTML5.ā€

Why is it being included in Codecademy? Should we not use the attribute ā€œscopeā€ for table data cells?

(Also, is this the right spot to post my question? This is my first post on Codecademy.)

2 Likes

While the statement may be correct in terms of TD, it is not correct in terms of TH.

4.9.10 The th element ā€” HTML5: Edition for Web Authors

TD is not intended as a header element, by a data element. Data does not have or need scope, only headers need this.

3 Likes

Thank you very much for your reply with the clarification!

(Also, I found the w3schools article on TH scope: ā€œhttps://www.w3schools.com/tags/att_th_scope.aspā€, which doesnā€™t mention any issue with HTML5.)

Have a great day.

1 Like

I would suggest bookmarking the w3.org site, and also MDN which is the site that W3C shares their information with. Not really a big fan w3schools, given we have much better and genuine authorities to whom we can turn to for reliable information.

9 Likes

A post was split to a new topic: Not even a markup language

You are the Best! Please keep giving explanations like these!

3 Likes

So long as you keep verifying. Be one of those who challenge information and keep it updated.

7 Likes

I will definitely get into the habit of doing that. Thanks for the advice.

1 Like

Thanks for the thorough reply mtf :smiley:

1 Like

Man youā€™re awesome :star_struck:

1 Like

Well explained, as usual, thank you!

1 Like

Thank you Roy. I have learnt a lot from your replies in this forum.

1 Like

Iā€™m wondering if itā€™s possible to nest table headings inside of other table headings? For instance, if I wanted to name each row individually, then group them together using ā€˜rowgroupā€™.