CODEWITHSUNDEEP
htmlsemantic-markup
user2847429
user2847429

Reputation:

HTML semantics for displaying form like data

I have to display elements like:

First Name : (Fetched from Database)

Last Name  : (Fetched from Database)

User Name  : (Fetched from Database)

Address    : (Multiple line of Data Fetched from database)

My question is according to semantics which HTML elements are to be used here?

dt dd are block level element. I have to display label and its value inline.

Upvotes: 2

Views: 461

Answers (3)

albert
albert

Reputation: 8153

i could argue for both given answers, <table>, and <dl>, and even argue pro/con about <ol>, as well as <ul> because thats semantics. either route you chose, you should be empowering your markup with microformats, or microdata, or rdfa, or combos of them. i'm going to focus on microformats because they are very easy to implement, are the most widely used semantic web technology deployed on the web, and i've used them in nearly the exact situation you are in right now.

posh markup + microformats = real world semantics.
or posh markup + microdata = real world semantics.
as well as posh markup + rdfa = real world semantics.

whichever element(s) you chose to markup your content in, give it real semantics, while making it more accessible and portable, by applying html classes (microformats) to them. they also double as easy style/interaction hooks. in your case, i would mark up each user with an hcard, then provide a way for the user to access/view/save the vcard, instead of it just saving to your desktop as most vcard implementations poorly do. check them out:
http://microformats.org

Upvotes: 0

BlueCacti
BlueCacti

Reputation: 10820

Example taken from here: http://www.onextrapixel.com/2009/05/13/how-to-use-dl-dt-and-dd-html-tags-to-list-data-vs-table-list-data/
You can find the result (demo) over here: http://www.onextrapixel.com/examples/dl-tags-vs-table/

Using dl, dt and dd; you could have a code like this:

HTML

<dl>          
    <dt>Name: </dt>
    <dd>John Don</dd>

    <dt>Age: </dt>
    <dd>23</dd>

    <dt>Gender: </dt>
    <dd>Male</dd>

    <dt>Day of Birth:</dt>
    <dd>12th May 1986</dd>
</dl>

CSS

/*DL, DT, DD TAGS LIST DATA*/
dl {
    margin-bottom:50px;
}

dl dt {
    background:#5f9be3;
    color:#fff;
    float:left; 
    font-weight:bold; 
    margin-right:10px; 
    padding:5px;  
    width:100px; 
}

dl dd {
    margin:2px 0; 
    padding:5px 0;
}

Using the ordinary table to display this data, you would have:

HTML

<table>
    <tr>
        <td class="title">Name: </td>
        <td class="text">John Don</td>
    </tr>
    <tr>
        <td class="title">Age: </td>
        <td class="text">23</td>
    </tr> 
    <tr>
        <td class="title">Gender: </td>
        <td class="text">Male</td>
    </tr>     
    <tr>
        <td class="title">Day of Birth:</td>
        <td class="text">12th May 1986</td>
    </tr>
</table>

CSS

/*TABLE LIST DATA*/
table {
    margin-bottom:50px;
}

table tr .title {
    background:#5f9be3;
    color:#fff;
    font-weight:bold;
    padding:5px; 
    width:100px;   
}

table tr .text {
    padding-left:10px;
}

table vs dl, dt and dd

Upvotes: 1

Sergey Metlov
Sergey Metlov

Reputation: 26301

As for me it's totally depends on you. It can be ol for example as it is in starter ASP.NET MVC 4 project or, as you mentioned dl-dt-dd or just divs.

Upvotes: 1

Related Questions