Why Can You Style Some Html Elements With Css But Not With Attributes

As I was scrolling through some w3schools documentations I came across a section about inline elements and a question I never really thought about before. The docs say the followin

Solution 1:

First you need to refer to the official specification if you want accurate information. From there you can read that there is attributes called Global attributes that apply to all the elements:

The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification) ...

And if you continue reading you find that there is specific attribute related to some specific elements. There is no magic rule and everything is well defined.

The width and height attributes on img, iframe, embed, object, video, and, when their type attribute is in the Image Button state, input elements may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. The attributes, if specified, must have values that are valid non-negative integers.

Here you can see where the height attribute can be used. The difference with the CSS property is that this one will specify the dimension that the browser should reserve to that element. You can of course change it later with CSS and if you omit it, a default value will be used (also defined in the same spec).

User agent requirements: User agents are expected to use these attributes as hints for the rendering.

The height/width attrbiutes can also be used with SVG and Canvas:

The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.

---

Well, an anwser won't be enough to talk about everything related to height attribute but in the specification you can find for each item the attributes that you can use and how they behave. From this you can find the exhaustive list of element where the height attribute is allowed.

Example:

---

When it comes to CSS, you should refer to the specification related to the height property to get more details about how it behaves with different type of elements.

Solution 2:

(copied from w3school)

Definition and Usage

The height attribute specifies the height of the element.

Note: The height attribute is used only with .

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Solution 3:

CSS stuff is generally classified as style in HTML. As HTML evolved, style lines grew longer and needed to be copied for each element. CSS solved both of those issues.

So if you don't want to use CSS, then use the following:

<inputtype="text" value="I feel so thicc :(" style="height:500px;">