开发者

What is the semantic equivalent of label/input tags for read-only data?

开发者 https://www.devze.com 2023-03-13 14:24 出处:网络
In HTML f开发者_如何学Corms input fields and their captions are declared as label and input tags, but which tags should be used for displaying the same data?

In HTML f开发者_如何学Corms input fields and their captions are declared as label and input tags, but which tags should be used for displaying the same data?

I'm considering either dl, dt, dd or label and disabled input tags, but both solutions don't feel right.

Of course there are many ways to "somehow" display the data, but I was wondering if there's a preferred way to do this.


Bear in mind that label/input is just a user-adjustable variation of the notion of key/value (or name/value) pairs. What you want is merely something that represents a key (label) and value (text) in such a way that the two can be distinguished from each other. The input performs the "value" function visually, and forces the user to regard the label as the name of the value. Without the visual clue of the input you can still make the name/value relationship obvious by bolding the name, putting it in a different color, different font, spacing, etc.

Even if you were to use <dd> and <dt> and the like, you would still need to make sure the name/value distinction was visually distinctive. (Especially if you were using a reset stylesheet that canceled out any inherent browser-generated difference between the tags.)


I think this depends on what the data is and how you'd describe it.

If you're showing a list of titles with associated reference data then a definition list seems to fit the bill. (Since it retains the semantic link between title and reference data).

This will be similar in how the label is directly linked to your form fields using the for attribute, making it not just about visual reference but also about data connection and relation.

I usually ask myself the question, "What am I trying to say here?" and "How do my data relate to one another".

0

精彩评论

暂无评论...
验证码 换一张
取 消