Best Semantic Layout for Customer Detail Layout

Hello everyone and thanks for your help in advance. I need to create a resuable header that contains customer Name, Address, Phone, email. Obviously, there are many ways to do this including using unordered lists, tables, dt, etc. but I am not sure what is really the best way to do this. A google search seems to produce no real standard which is surprising given the millions of sites that need to have a masthead with this type of data. I would appreciate some feedback on others experiences and best practices. Any insight would be appreciated.

It may depend on exactly what data you are showing and how.
Will there be data for just one person at a time, or multiple rows for several people?
Does each piece of data stand alone, or does it have a heading or label to identify what it represents?
For example, something like:-
john@example.com
…is obviously recognisable an email address.
But in some cases you may want to label the data.
Email: john@example.com

Whilst not the whole answer, particularly given the ‘semantic’ aspect of the question, and @sama74’s queries above, but this thread from a day or two back, may guide you on how to achieve the ‘re-usable’ requirement, as well as making things easier to update. It just needs adapting to the header, rather than a menu, or maybe it would help for both.

Thanks for the response. Its really not a menu, but actual data for the customer, for example:

Name: John Doe
Address: 123 Anywhere St.
City: Somewhere, CA 123456
Phone: (999) 999-9999
Email: someone@anyone.com
Current Balance: $99.99
Last Service: 11/07/2016

Each page is specific to the customer and will dynamically load the appropriate data. There are more fields that will be displayed for the header specific to the customer. So the issue is the most semantically correct way to display this. Its really not tabular data. A datalist might work, but that’s really not what it is used for. An unordered list could be used, perhaps with a label. But it would be preferable to separate the label from the text.

I’m thinking it looks like a Definition List <dl>.

See section the on Metadata.

Thanks for the response. Is that what most commercial sites that have this kind of data use?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.