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

Question

In HTML forms, input fields and their headers are declared as label and input , but which tags should be used to display the same data?

I consider either dl , dt , dd or label tags and disabled input tags, but both solutions are not very correct.

Of course, there are many ways to “somehow” display the data, but I was wondering if they have a preferred way of doing this.

Answer 1

I think it depends on what the data is and how you described it.

If you display a list of names with corresponding reference data, the list of definitions seems to correspond to the score. (Since it maintains a semantic connection between title and reference data).

This will be similar to how the label is directly connected to your form fields using the for attribute, which makes it not only a visual link, but also a data link and a relation.

Usually I ask myself the question: "What am I trying to say here?" and "How my data relate to each other."

Answer 2

Keep in mind that label / input is simply a user-modifiable change to the concept of key / value pairs (or name / value). What you want is just something that represents a key (label) and value (text) in such a way that the two can be different from each other. The input performs the visual function “value” and forces the user to consider the label as the name of the value. Without a visual input prompt, you can still make the name / value relationship obvious by striking out the name, placing it in a different color, different font, spacing, etc.

Even if you have to use <dd> and <dt> and the like, you still need to make sure that the name / value difference was visually distinctive. (Especially if you used the reset stylesheet, which canceled any built-in difference between tags in the browser.)