Welcome to WebmasterWorld Guest from 54.163.40.152

Forum Moderators: not2easy

Message Too Old, No Replies

CSS/HTML 4 Sematics

Document structure semantics

     

aspr1n

8:56 pm on Sep 18, 2002 (gmt 0)

10+ Year Member



Hi all,

Originally I was under the impression that XML(xhtml specifically) was fundimentally about the separation of Content vs Presentation, however, realised eventually it is Content & Structure vs Presentation. It is the Structure part I am struggling with somewhat.

I am trying to be not just technically correct, but semantically correct as well, and guess like most, eventually want to move my entire document content/structure into a database.

I apologise in advance for the length of this post!

Currently I would layout as follows:


<h1>This is my page heading</h1>
<h2>This is a brief summary of the page</h2>
<p>
<strong>This is a paragraph heading</strong><br />
This is an ordinary para with with three or four
sentences of text<br />
<br />
This is the next paragraph, with three or four sentences
in it<br />
<br />
<strong>This is a new para heading</strong><br />
Followed by a new paragraph. Eventually I would close
the paragraph tag to show the end of the para section.<br />
</p>

This all works fine, until I want maybe a slightly different paragraph style, or postition.

The W3C recommendations didn't make it clear, but perhaps 'P' should style an individual paragraph rather than a paragraphed section. such as:


<p>This is an ordinary para with with three or four
sentences of text</p>
<p>This is another para with with three or four
sentences of text</p>

Which is cool as now I don't need line breaks everywhere, and is easier to style an individual paragraph.

This works until my para heading, should it be:


<strong>This is a paragraph heading</strong>
<p>This is an ordinary para with with three or four
sentences of text
<p>

OR


<p>
<strong>
This is a paragraph heading</strong><br />
This is an ordinary para with with three or four
sentences of text
<p>

ie. Is the heading part of the paragraph, or "introducing" it, and so outside the paragraph, which causes a line break between my heading and para start, which I can't stop unless I use CSS.

Also, now I want to float:right; an image and description in the paragraph with a margin (like a newspaper column might), but can't use another block level element such as div to do so, yet the "align" attribute is deprecated. By terminating the para before the div (as is done implicitly) I loose the semantic structure of the paragraph.

Finally, I also use six H3 in every page to define my key menu links throughout the site, the W3C says:

<cite>A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.</cite>

So that made sense for me to use H3s for my main menu, however, I've noticed Google's summary results show these H3 as if they were part of the document content, not as an indication to the document structure, who is right? The last thing I want to be accused of is "spamming" them?

Any thoughts on how I can get my head around this structure "thing" would be very much appreciated.

asp

mivox

9:11 pm on Sep 18, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I beleive <strong> is intended as an "inline" tag, which means it would be inside the "block level" <p> tag:

<p><strong>Attention getting bold line</strong><br />
blah blaah blah blah, etc. Blah, etc etc blah.</p>

That's the way I use it. Generally, I think of it this way: if the tag is designed to affect a single word or phrase's appearance, such as <strong> or <em>, it should go inside the block level tag.

A block level tag is one that is designed to contain an independent "chunk" of content: paragraph, list, blockquote, header, etc.

If you want your individual paragraph headers to stand "separately" from the paragraphs that follow them, use an <h2> or <h3> tag instead of <strong>.

Nick_W

9:30 pm on Sep 18, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Yes, I generally use an <h4> as a paragraph heading if I need one. (I also try to keep my h tags in order and not skip a level though is not always the case ;))

Just do
<h4>Paragraph heading</h4>
<p>your text block here</p>

then if you like, style it so that there is no margin between the h4 and the p

Also, why can't you put a block level element inside a block level element? I do it all the time....

Nick

mivox

9:34 pm on Sep 18, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Who said you couldn't nest block-level elements? I didn't... remember, I am the queen of the nested <div>! ;)

However, if you're looking at it from a strictly semantic point of view, it is probably bad form to nest block-level elements designed specifically for handling text content. I think you were the one Nick, who pointed out to me that having a <blockquote> inside a <p> wasn't proper...

aspr1n

9:46 pm on Sep 18, 2002 (gmt 0)

10+ Year Member



Hi guys,

Thanks for the thoughts.

Using H4 outside P, as Nick_W pointed out requires styling to be presented accurately, again I was under the impression that content should read correctly without any style sheets.

Regarding the <p> tag:
"The P element represents a paragraph. It cannot contain block-level elements (including P itself)."

From: [w3.org...]

And actually doesn't validate if you do nest a block level element in a <p> tag. <div> I guess is an exception, as the spec defines it as a "Grouping Element" - [w3.org...]

Nick_W

9:51 pm on Sep 18, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi Mivox, no didn't mean you...

...and you got the last bit the wrong way round, I said yor <blockquote> shouldn't contain <p>'s.....

Doh! ;);)

Aspr1n, so just use a div.... or live with it I guess :(

Tough call, nice post ;)

Nick

mivox

9:56 pm on Sep 18, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Using H4 outside P, as Nick_W pointed out requires styling to be presented accurately, again I was under the impression that content should read correctly without any style sheets

It should read correctly... but it may look funny. I've only ever seen a couple of instances where an unstyled <h> tag actually looked OK. However, to a text reader, or someone who doesn't know how the page is supposed to look, it should read fine.

Unless the <strong> section at the beginning of each paragraph is actually an emphasized section of the first sentence, intended to "flow" into the paragraph text without a break... in which case, using <strong> tags inside your <p> block would be exactly what you want to do, both visually and semantically.

The default appearance for <h> tags are usually hideous on any page... leaving strange gaps, and not fitting in with the rest of the page text. Styling them is almost a necessity, aesthetically.

you got the last bit the wrong way round, I said yor <blockquote> shouldn't contain <p>'s
Ahh... that's right. Hehe. Oh well, according to the quote aspr1n gave above, apparently it's a no-no either way around. ;)

aspr1n

10:10 pm on Sep 18, 2002 (gmt 0)

10+ Year Member



mivox, for me I think your statement "A block level tag is one that is designed to contain an independent "chunk" of content" help clear the concept up a lot for me.

I guess a para heading is part of that, which seems to suggest a heading is either outside a <p> or is <strong> inside as inline.

I know this is irrelevant in the big scheme of things (world peace, do goldfish sweat etc.) but I just find it annoying that it's so tricky to be "correct".

Having said all that, my floating of an image and description fails completely without a div as Nick pointed out.

Assigning a class (float:right;) to the <img> tag would work, and handles margin and border, but then centering text underneath it fails totally, unless I enclose it in a <p> runing my semantics again. I assume <span> shouldn't force a proper float as it's inline?

mivox

10:16 pm on Sep 18, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I have never found a way to stick a caption with an image properly unless it's enclosed in a single-cell table or a <div>.

Putting it in a <div> really wouldn't be a semantic faux-pas though, if <div> is defined as a "grouping element"... because you'd want to "group" an image with its caption, wouldn't you?

aspr1n

10:28 pm on Sep 18, 2002 (gmt 0)

10+ Year Member



Actually,

I think I was just being think, below validates, and works in mozilla 1.1, and IE6, and makes sense semantically as the div is outside the <p>, but still causes the <p> text to wrap to the <div> edges:

<div style="float:right;margin:10px;text-align:center;"><img src="imageurl/image.jpg" alt="stuff" /><br />centred text</div>
<p><strong>Para Heading</strong><br />
the text in this paragraph should align itself with the top edge of the div defined above it.</p>

This makes sense as the floated image isn't in the paragraph itself, again content/structure separate to presentation.

horray ;)

Nick_W

7:43 am on Sep 19, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Of course, DOH! Silly of none of us to realize that... thought that's often the way when discussing rather than doing!

Glad it worked out...

Nick

tedster

10:02 am on Sep 19, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I said yor <blockquote> shouldn't contain <p>'s.

This doesn't sound right to me. It's true that <p> tags shouldn't contain <blockquote>, but the other way round? Sometimes a block quote IS more than one paragraph.

I just fired up a test page with paragraph tags in a blockquote - and it validates with the W3C validator, even as strict XHTML 1.1.

Nick_W

10:09 am on Sep 19, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Well, this reference is a bit obscure Tedster.

It was from an stickymail session Mivox and I were having. She had something similar to this:
<blockquote>
<p>blah blah</p>
</blockquote>

My comments to her were that this was redundant, I didn't mean that you couldn't do it.... Sounds wrong to me aswell out of context ;)

Nick

tedster

10:22 am on Sep 19, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Ah, I see. I'm glad that's cleared up.

I've remember seeing some browser handle the top margin differently when a blockquote began with a p tag. There was one page where I had several blockquotes, some several paragraphs lonf. To get a consistent cross-browser look for all of them, I had to insert p tags even for the quotes that were only one paragraph long.

Must have been NN4!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month