I want to render a profile user container that contains a list of labels and their associated values.
Here is an excerpt of information and layout I'd like to display:
First Name.......MyName
Age...................MyAge
email................MyEmail
I know that there are tons of examples available but the problem is that it seems that there is no commonly accepted solution.
So far I have seen the following usage :
What is the most semantically correct? What is the easiest to display (in a 2-columns layout)? What do you advise me to use and for what reasons?
(html/css code snippets are more than welcomed)
There are two ways to associate a text label and the form to which it belongs: Set the identifier (id) inside the <input> element and specify its name as a for attribute for the <label> tag.
The HTML <label> for Attribute is used to specify the type of form element a label is bound to. Attribute Values: It contains the value i.e element_id which specify the id of the element that the label is bound to. Example: This Example that illustrates the use of for attribute in <label> element.
I think the most semantically correct would be <dl>
, <dt>
and <dd>
, since what you're displaying are effectively definitions of first name, age and e-mail.
<dl> <dt>First Name</dt> <dd>Dominic</dd> <dt>Age</dt> <dd>24</dd> <dt>E-mail</dt> <dd>[email protected]</dd> </dl>
However, obviously, the easiest way to display it in a table is using <table>
, <th>
and <td>
. You could hack together a table-layout using definition lists using something like this:
dt { float: left; clear: left; width: 6em; font-weight: bold; } dd { float: left; }
<dl> <dt>First Name</dt> <dd>Dominic</dd> <dt>Age</dt> <dd>24</dd> <dt>E-mail</dt> <dd>[email protected]</dd> </dl>
More info on the <dl>
tag available here.
Wow. We really have scared everyone off with the “Table layouts are evil! Use CSS!” stuff, haven't we?
A table — with <th>
for the labels and <td>
for the values — is perfectly applicable to this kind of content, gives you the rendering you want, and is at least as semantically correct as a definition list, arguably more so. Either are preferable to semantics-free divs.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With