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.
