Dreamweaver - semantic header question/puzzler

Author

semantic header question/puzzler

darrel

2004-04-21, 2:47 pm

Any thoughts on this?:

I have a table. It will have photos in one column, and, in the other, a
title, description, and link.

How should I mark up the text in that other column? I could do this:

<p><b>title</b><p>
<p>description</p>
<p><a>link</a></p>

But there isn't any semantic value in the title then.

Alternatively, I could do this:

<h2>title</h2>
<p>description</p>
<p><a>link</a></p>

I like that, as the header is truly that. The problem is that this table may
appear under a H1, but it could also appear under a H2, or H3 even. Is that
an issue? (In terms of proper semantics and document structure?)

Any other thoughts?

-Darrel

David B

2004-04-21, 2:47 pm

darrel wrote:

> Any thoughts on this?:
>
> I have a table. It will have photos in one column, and, in the other, a
> title, description, and link.
>
> How should I mark up the text in that other column? I could do this:
>
> <p><b>title</b><p>
> <p>description</p>
> <p><a>link</a></p>
>
> But there isn't any semantic value in the title then.
>
> Alternatively, I could do this:
>
> <h2>title</h2>
> <p>description</p>
> <p><a>link</a></p>
>
> I like that, as the header is truly that. The problem is that this table may
> appear under a H1, but it could also appear under a H2, or H3 even. Is that
> an issue? (In terms of proper semantics and document structure?)
>
> Any other thoughts?

I think I recall getting an error when I validated a page that used
headers incorrectly. You could make a page with <h2> following <h3>, and
validate it, just to make sure.

But I think I'd leave header tags out of the table, if it's going to be
confusing. Also...

1. I think <strong> is preferred to <b>.
2. Why use <p> tags if each bit of information is going to be inside a
table cell?
3. Could you link the title or description, eliminating the need for a
third "link" cell?

<table>
<tr>
<td>title</td>
<td>description</td>
<td>link</td>
</tr>
</table>

Murray *TMM*

2004-04-21, 2:47 pm

Darrel:

I don't think it's an issue to have an h2 under an h3. That's how I would
do it.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"darrel" <notreal@hotmail.com> wrote in message
news:c5n1mv$r6h$1@forums.macromedia.com...
> Any thoughts on this?:
>
> I have a table. It will have photos in one column, and, in the other, a
> title, description, and link.
>
> How should I mark up the text in that other column? I could do this:
>
> <p><b>title</b><p>
> <p>description</p>
> <p><a>link</a></p>
>
> But there isn't any semantic value in the title then.
>
> Alternatively, I could do this:
>
> <h2>title</h2>
> <p>description</p>
> <p><a>link</a></p>
>
> I like that, as the header is truly that. The problem is that this table
may
> appear under a H1, but it could also appear under a H2, or H3 even. Is
that
> an issue? (In terms of proper semantics and document structure?)
>
> Any other thoughts?
>
> -Darrel
>
>

James Shook

2004-04-21, 2:49 pm

There is nothing that forces you to nest <h[n]> tags in numerical order.
You could have:

<h5>This text is too small</h5>
<h1>This text is too large</h1>
<h3>And this text is just right</h3>

And no browser or validator would complain.

For any headline or title, use the size header that corresponds to the
text's place in the information hierarchy.

--James M. Shook
http://www.jshook.com

darrel

2004-04-21, 2:49 pm

> 1. I think <strong> is preferred to <b>.

I'm not sure in this case. Yes, I suppose a header is 'stronger' than body
text, so STRONG makes some sense here, but it's really just a label more
than anything (hmm...maybe I should use the label attribute?)

> 2. Why use <p> tags if each bit of information is going to be inside a
> table cell?

Because they're paragraphs?

> 3. Could you link the title or description, eliminating the need for a
> third "link" cell?

I could. I prefer an actual link though for usability's sake. FYI, the
title/desc/link are all in one cell.

-Darrel

darrel

2004-04-21, 2:49 pm

> For any headline or title, use the size header that corresponds to the
> text's place in the information hierarchy.

I guess that's the problem. These headers would obviously be 'one less' than
the parent header. However, there's no way to know what the parent header is
as this table may be used in different areas of the site under any level of
headers.

But, maybe I'm overthinking this, too. ;o)

-Darrel

darrel

2004-04-21, 2:49 pm

> I don't think it's an issue to have an h2 under an h3. That's how I would
> do it.

OK...I'm going to play with that and see if it causes any issues.

-Darrel

Gary White

2004-04-21, 2:50 pm

On Fri, 16 Apr 2004 09:08:26 -0500, "darrel" <notreal@hotmail.com>
wrote:

>But, maybe I'm overthinking this, too. ;o)

That could be. However, semantically speaking, it really looks more like
a definition list to me.

Gary

Joe {RoastHorse}

2004-04-21, 2:50 pm

why not use table heading tags?
eg:

<tbody>
<tr>
<th scope="rowgroup">Title</th>
<td rowspan="3"><img></td>
</tr>
<tr>
<td>Description</td>
</tr>
<tr>
<td><a>Link</a></td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup">Title</th>
<td rowspan="3"><img></td>
</tr>
<tr>
<td>Description</td>
</tr>
<tr>
<td><a>Link</a></td>
</tr>
</tbody>

there is loads of great information about properly marked up semantic,
accessible tables at the w3c (obviously):
http://www.w3.org/TR/html4/struct/tables.html

joe

darrel wrote:

> Any thoughts on this?:
>
> I have a table. It will have photos in one column, and, in the other, a
> title, description, and link.
>
> How should I mark up the text in that other column? I could do this:
>
> <p><b>title</b><p>
> <p>description</p>
> <p><a>link</a></p>
>
> But there isn't any semantic value in the title then.
>
> Alternatively, I could do this:
>
> <h2>title</h2>
> <p>description</p>
> <p><a>link</a></p>
>
> I like that, as the header is truly that. The problem is that this table may
> appear under a H1, but it could also appear under a H2, or H3 even. Is that
> an issue? (In terms of proper semantics and document structure?)
>
> Any other thoughts?
>
> -Darrel
>
>

David B

2004-04-21, 2:50 pm

darrel wrote:

>
>
> I'm not sure in this case. Yes, I suppose a header is 'stronger' than body
> text, so STRONG makes some sense here, but it's really just a label more
> than anything (hmm...maybe I should use the label attribute?)

I'm not familiar with the label attribute, but <strong> and <b> mean the
same thing, though I believe <strong> is preferred, for some reason or
another.

But if you're using style sheets, you could skip both. Instead, apply a
style:

td.one { font-weight: 800; }

>
> Because they're paragraphs?

OK, if there will be multiple paragraphs, or if they're going to be
indented. But if each entry is just a short snippet of information, you
probably don't need paragraphcs.

James Shook

2004-04-21, 2:51 pm

The problem with going about this in a rational way--i.e., deciding
which tags to use for various types of content--is that the tags we are
still using were originally developed for research papers that generally
take a hierarchical outline form. But so few web pages map well to this
sort of structure that the application of the classic tags must be, to
some extent, arbitrary.

--James M. Shook
http://www.jshook.com

Barry Pearson

2004-04-21, 2:51 pm

James Shook wrote:
> The problem with going about this in a rational way--i.e., deciding
> which tags to use for various types of content--is that the tags we
> are still using were originally developed for research papers that
> generally take a hierarchical outline form. But so few web pages map
> well to this sort of structure that the application of the classic
> tags must be, to some extent, arbitrary.

Yes!

With few exceptions, you *can't* just look at a document and "discover" what
tags apply to which bits of content. (And exception might be to apply <i> to
Grapsus grapsus, which is a species name and so there is a globally-defined
typographic convention).

Instead, you have to turn it round the other way, and say: "treat this as type
X, and don't argue with me". It's a paragraph because the author says it is,
and ditto a heading 1 or heading 5. There is no one on this planet with the
authority to rule otherwise. The author's responsibility is to communicate
with the audience, not to try win the annual mark-up prize for utter pedantry.

Pedants probably still believe that web pages can be structured in a simple
hierarchic fashion. But the instant you enter the real world, with banners &
navigation bars and administrative footers, etc, all of that becomes largely
irrelevant.

Use the tags we have so that, if the user isn't using CSS, it will still look
plausible. Then use CSS to get the best out of it.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

darrel

2004-04-21, 2:51 pm

> I'm not familiar with the label attribute, but <strong> and <b> mean the
> same thing, though I believe <strong> is preferred, for some reason or
> another.

They don't mean the same thing. B means to make something bold. Strong means
to make something strong. B is a presentational tag...ie, it can only affect
a browser that can show bold text. Strong is a semantic tag, meaning that a
whole variety of browsers can 'style' strong differently (ie, a text browser
can all-caps it, a visual browser can bold it, and an audio browser can say
the word louder).

Typically STRONG is better, but there are times when you'd still want Bold.

> td.one { font-weight: 800; }

That won't work in this case.

> OK, if there will be multiple paragraphs, or if they're going to be
> indented. But if each entry is just a short snippet of information, you
> probably don't need paragraphcs.

True.

-Darrel

darrel

2004-04-21, 2:51 pm

> why not use table heading tags?

Because my table is actually a bit simpler:

<td>thumbnail</td><td>Description</td>

The description, in turn, has sub-elements (title, description, link).

Otherwise, I agree with you completely. And your method would work
too...though I think that's maybe more than I need in this case.

and this goes back to the suggestion of using a DL instead.

-Darrel

darrel

2004-04-21, 2:51 pm

> That could be. However, semantically speaking, it really looks more like
> a definition list to me.

Yea, I'm toying with a DL too...

-Darrel

James Shook

2004-04-21, 2:52 pm

Barry Pearson wrote:

> Use the tags we have so that, if the user isn't using CSS, it will still look
> plausible. Then use CSS to get the best out of it.

But what about things like the current fad of using CSS to turn <ul>s
into menus and nav bars? Sometimes these are so transformed by CSS that
the menu items display horizontally! Not very list-like....

I know an argument can be made that any group of similar items is a
list, a menu is such a collection, and so it is legitimate to use <ul>
to make a nav bar. But this feels to me like stretching HTML beyond
comfort. But what else can we do? There is no <navbar> tag so at some
point someone recognized a menu's list-like qualities and used CSS to
transform the <ul> tag unto unrecognition.

Now take away the CSS. Still make sense?

--James M. Shook
http://www.jshook.com

Barry Pearson

2004-04-21, 2:53 pm

James Shook wrote:
> Barry Pearson wrote:
[snip][color=darkred]
> But what about things like the current fad of using CSS to turn <ul>s
> into menus and nav bars? Sometimes these are so transformed by CSS
> that the menu items display horizontally! Not very list-like....
>
> I know an argument can be made that any group of similar items is a
> list, a menu is such a collection, and so it is legitimate to use <ul>
> to make a nav bar. But this feels to me like stretching HTML beyond
> comfort. But what else can we do? There is no <navbar> tag so at some
> point someone recognized a menu's list-like qualities and used CSS to
> transform the <ul> tag unto unrecognition.
>
> Now take away the CSS. Still make sense?

That is the key question. If it does, use it. If it doesn't, use something
else.

Looking around my pages, I have buttons based on: unordered lists;
single-column tables; lots of divs. (And I could probably find paragraphs
somewhere!) I recently made a table of contents from nested ordered lists. And
I used the CSS to remove the numbers with { list-style-type: none }! In other
cases, I have used a real table.

We have pushed what we are trying to do far beyond the original meanings &
intentions of the various elements. When we write a simple article, using
headers of the appropriate levels, and paragraphs, lists, etc, makes sense.
But we don't just put an article onto such a page. We put things on that are
really to do with the web site, such as navigation bars, admin, banners, etc.
In a sane world those would not even be in the same document. We would have a
better implementation of frames, or something.

I believe many of the people who pine for a pure world of semantic mark-up
haven't got their minds round the fact that a page is rarely just a
linearly-structured article. It is often perhaps 4 or 5 things, each of which
could be as complex as a full document-body, and each of which has to be
presented to the user within seconds so that the user knows what is where.
Where is the article, where is the navigation, etc? And a simple table is
perfect for that!

To get back to the subject of this thread, I believe the ISO version of HTML
insists on headers being in sequence: h1 > h2 > h3, etc.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/