homepage Welcome to WebmasterWorld Guest from 54.226.235.222
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS/HTML 4 Sematics
Document structure semantics
aspr1n




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved