Hi Lachlan,
I think you are right, a table actually probably is the most semantic way to
go about this. I think it's easy to get turned away by all the markup needed
for a table. But my question was about having the most semantic solution,
not the most efficient to implement.
I guess I made the "Welcome Frank" a heading rather than a paragraph because
screen readers have a 'headings mode', which would allow them to easily jump
to their details if they wanted.
Thanks for the well explained reply!!!
Nathan
----- Original Message -----
From: "Lachlan Hunt" <[EMAIL PROTECTED]>
To: <wsg@webstandardsgroup.org>
Sent: Monday, February 06, 2006 10:32 PM
Subject: Re: [WSG] Most semantic XHTML markup possible - your thoughts
[EMAIL PROTECTED] wrote:
Hi All,
I quickly scanned the archive but cannot find a discussion that exactly
matches what I am trying to achieve. I want to markup some text and want
to know if I'm doing it the most semantic (and accessible) way possible.
ok, here is an example of some text and what I am trying to achieve
presentationally:
<customer-details-container>
<line1><big><bold>Welcome Frank</bold></big></line1>
<line2><bold>Customer Identification Number (CID):</bold> 100 223
578</line2>
<line3><bold>Last accessed:</bold> Feb. 12, 2006 at 9:47pm</line3>
</customer-details-container>
There's your problem right there. Like many, you're going about this all
backwards. You've decided on the presentation and now you're trying to
determine semantics from that presentation, which is virtually impossible.
So, let's take a look at the *content* and completely ignore how you want
it to look.
Welcome Frank
Customer Identification Number (CID): 100 223 578
Last accessed: Feb. 12, 2006 at 9:47pm
The first line is the greeting. Is it semantically important to emphasise
it in any way? Could it be considered a heading?
The next two lines provide meta data about Frank's customer details, and
are name-value pairs. Is there any reason to semantically emphasise
either the name or the value?
Based on that (minimal) analysis, we can begin to think about the markup.
I'm going to assume the greeting isn't a heading (as that requires seeing
this in the context of the whole page) Since there is no special markup
available for a greeting, we'll have to use an ordinary paragraph. There
are 2 ways to markup name value pairs in HTML. 1. A 2-column table. 2. A
Defintion List (although many will argue that this isn't the definition of
a term, and thus is not appropriate). I'll use the table.
<p>Welcome Frank</p>
<table>
<tbody>
<tr>
<th scope="row">Customer Identification Number (CID):</th>
<td>100 223 578</td>
</tr>
<tr>
<th scope="row">Last accessed:</th>
<td>Feb. 12, 2006 at 9:47pm</td>
</tr>
</tbody>
</table>
While that is perfectly semantic, it doesn't really provide that much
abilities in the way of styling. There's nothing to distinguish those
paragraph and table elements from any others in the document. For that,
we can use the class attribute.
<p class="greeting">Welcome Frank</p>
<table class="customer-details">
<tbody>
<tr>
<th scope="row">Customer Identification Number (CID):</th>
<td class="cid">100 223 578</td>
</tr>
<tr>
<th scope="row">Last accessed:</th>
<td class="date-time">Feb. 12, 2006 at 9:47pm</td>
</tr>
</tbody>
</table>
That class attributes on the td elements may not be necessary, but I added
them anyway, just in case it's important to distinguish each individual
type of field.
Now that we have that done, we can achieve the styling you requested using
a style sheet:
.greeting { font-weight: bold; font-size: larger; }
/* There's no reason tables need to be styled with display:table-*; */
.customer-details, .customer-details tr { display: block }
.customer-details th, .customer details td { display: inline; }
.customer-details th { text-align: left, font-weight: bold; }
--
Lachlan Hunt
http://lachy.id.au/
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
