Why are some names, like none vs. hidden and href vs. src so inconsistent in CSS and HTML?

Question

Hi, this is more a conceptual question. How did the W3C decide to use hidden vs. none? I'm asking because I'm an ESL person (English as a second language). If I'm using overflow: hidden, overflow: none could just as well be used. The same goes for display: none and visibility: hidden. Couldn't it just have been display: none and visibility: none, because what really make the difference is the properties display and visibility and not their value. This is more a request for an explanation. Similiar "weird" things happens for example:

<script src="file.js">

and

<link href="file.css">

Why are they different? I understand how all of this works technically, I'm just curious about how they decided the names of the attributes.

Thanks.

Answer 1

The reason these entities (elements, properties, attributes, etc.) are named different things is because they serve different purposes. Let's start from the top and go through your examples.

Display vs. Visibiliy

display: none;
visibility: hidden;

As you can see from the CSS 2.1 specification, the value none is used for many different properties to indicate that the property's visual aspect should not be shown. So if the property is float, none means the element isn't floating. For the property display, none means it's not displaying.

For visibility, hidden is different, since it unlike display, doesn't affect element flow. The element's box will still be rendered, but it will be invisible. If you gave the value none to visibility, it would semantically mean the exact same thing as display: none, which it isn't.

Overflow

overflow: hidden;
overflow: none;

These mean different things. hidden says that the content that overflows the size of the element will be clipped, while none says that there is no overflow control; in effect turning overflow off. none is not a valid value for overflow, but in this case, visible has the same effect.

Src vs. href

<script src="file.js">
<link href="file.css">

The difference between script and link is that while a script's main purpose is to embed (either inline, or through reference via the src attribute) a script inside the HTML document, the purpose of link is to refer to other URIs on the world wide web. The fact that you use link to refer to a CSS stylesheet is not very intuitive; a more intuitive solution might be:

<style src="file.css" />

I don't have the details on why the HTML Working Group chose to use link and not style, but from a little bit of digging, it seems that the link element was already present in HTML 1.0 and HTML 2.0 and that style wasn't introduced until HTML 3.0.

As discussions around a style sheet language started as early as in 1993 (the same year HTML 1.0 was completed) and HTML 3.0 wasn't done until 1995, it makes sense that they found a way to embed stylesheets before the style element was invented.