How to Display Form Data?

HTML & CSS
21

As I recall, DeathShadow will slap you for even thinking of putting a Heading in a List. (If you think about it, semantically, his stance on that makes sense, because that is like saying “Heading squared”.)

Well, unless someone gives me a compelling reason otherwise, I’m going to mimic what I did for my Facts…

BTW, what do I need to do so if a User types in 3 paragraphs into a TextArea, that the “paragraphs” get carried over so when I go to output things I have…


	<!-- Fact #1 -->
	<h3><span>Fact #01:</span>Small-Businesses represent 99.7% of all employer firms.</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat.
		Vestibulum ante ipsum primis in faucibus orci luctus et ultrices</p>

	<p>Posuere cubilia Curae; Fusce ultrices lacus nec leo mattis
		vestibulum. Donec pharetra luctus nisl et sollicitudin. Aliquam
		faucibus tellus at orci pretium faucibus.</p>

	<p>Duis malesuada, enim ac luctus auctor, metus libero dictum nunc, 
		vitae imperdiet est massa eget massa.</p>

:-/

Debbie

22

Nah. I believe he’d use similar structure if he were, for example, translating terms and conditions from some sh*tty PDF to HTML. Lots of lists, but within each list is so much content that itself has its own structure, including headings, subheadings, etc.

I dunno, your PHP looking for empty lines and assuming those are paragraph delimiters?

23

I honestly don’t see terms and conditions as lists. You really need to take… a vacation from lists! LOL

I believe the section element is really what you’re looking for for that. If not HTML5, that surely no complex content is going to be called ‘item’ for the sole purpose of being fit for a li.

24

Why do you think they’re all prefaced with numbers for? :slight_smile: Maybe decoration though. Lawyerly pretties.

listie mclists!

Man, I can’t wait til user agents actually add meaning to those.

25

We need a section list element!

26

Well, when you put it like this… then no. :slight_smile:

Chapters in a book have numbers before them, but you don’t put them contents in lists, when going from PDF to HTML, do you?! Just because you can get an automatic numbering out of it, it doesn’t mean that listie mclists is your best friend.

A li has an item in it. Now, I know women, when they say ‘I want me this dress’ or ‘I want me this deux-piece’, they really mean to say ‘Get me the whole dressing store’. But the fact is that the dress is certainly an item, and so is the deux-piece, while the whole dressing store is a wee bit big to call it that.

EDIT: It just occurred to me. I’m not suggesting to use a section element for each number…

A few of them have. For the others, <div> was a bad solution, anyway. I’m better off with sections, anonymous or specific.

27

Thank God. I’d consider it since each of them is a subsection, but I’d never use the SECTION element in the first place since it’s either redundant to DIV, or redundant to the markup inside it like say… lists, paragraphs, heading tags and horizontal rules.

I think some of what’s going on in this thread can be boiled down to a tendency I see amongst developers to want to find one answer and then use it for EVERYTHING. We saw this in the old days where table was the answer to EVERY layout question – today when it comes to semantics a lot of people go “DL for two columns” or “DL for pairs” without thinking about what the content actually is; The same can be said for lists; you have a menu, a list of short choices – that’s a list. Simple. Often lists lack punctuation to make it clear what’s going on, so semantic tags like LI to separate the choices make sense.

But on the flip side of things you have – and itmitica is right on this to an extent – a tendency to start wrapping everything in lists just because it’s a list; that’s when it falls into the same trap as Tables for layout; eventually you’re throwing it at everything. Take a look at a vBull forum skin for an example of that type of asshattery in action.

The examples I made here so far don’t fall into that, but people are reading it as such. Let me explain – when you have single line short questions and answers, numbered and ordered; REGARDLESS of how they are stored on the server and are simply numbering them for ease of use on the page, then a OL/LI and maybe a few BR should be all that’s needed.

But that is not, nor did I mean it as the be-all end-all answer, because CONTENT SHOULD DICTATE THE MARKUP, not the other way around. If those questions end up two or three sentences or worse, the answers drag on into multiple paragraphs, I’d put the question in a heading tag and the answer in paragraphs; in that case, there would be no reason to have any other markup except as semantically neutral styling hooks (div). The moment you have numbered heading tags you shouldn’t NEED any extra idiocy like SECTION, or LISTS, or ARTICLE, or TABLE, or any other tag except as styling hooks… and if all it’s there for is as styling hooks, that’s DIV and SPAN’s job!

That of course is my problem with SECTION – if you’re bothering to have numbered headings and/or horizontal rules to indicate beginning/end of sections, what in blazes purpose does it serve other than to justify adding a unnecessary wrapper around tags that already deliver the meaning JUST FINE!!! After all, that’s the entire point of numbered heading tags, to mark the start of of a new sub-section of the higher order heading preceding it… just as a horizontal rules job is to mark the start of a new subsection unrelated to the headings preceding it. (except of course the H1, under which ALL content on the page is supposed to be a subsection, which is why using H1 for the topic of the content column is usually WRONG!)

Naturally the “content should dictate the markup” is part of what makes answering questions like the one in this thread difficult; People usually post incomplete information or not the true data being marked up, leaving you to guess wildly as to what the HTML should be since you’re guessing wildly as to what the content is. Then you get the people quoting you out of context because you said to do it differently, on an entirely different type of data, as if there’s magically one answer to all types of content.

There isn’t.

28

Well, here is some content to go off of…

1.) Why did you decide to start your own business?
I decided to start my own business because I want to be my own boss!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat congue urna, a semper est sollicitudin eget. In quam nulla, porttitor sit amet convallis vitae, faucibus et sapien. Aenean tortor ante, elementum nec volutpat a, pretium ullamcorper lorem.

Cras varius ante quis mauris posuere cursus at vitae nulla. Etiam elementum, urna vel volutpat gravida, metus ipsum gravida augue, et semper sapien erat quis sapien. Etiam vel ante mauris, ut adipiscing orci. Sed pellentesque volutpat nisl. Donec sed nisl quam, a ornare quam. Praesent vel laoreet lectus.

2.) What advice would you share with others on what NOT to do?
Curabitur porta aliquam libero, vitae adipiscing risus molestie ac. Fusce luctus magna diam, et posuere risus. Donec et nisi erat, sit amet mattis dolor. Praesent mattis erat a orci euismod in venenatis nibh lobortis.

Vestibulum sed suscipit ligula. Praesent neque leo, elementum non luctus eget, consequat id urna. Ut pulvinar imperdiet sem, ac bibendum nulla blandit at. Cras aliquam tortor et ligula pretium fermentum. Quisque bibendum libero lorem. Aliquam gravida, tortor at sollicitudin mollis, nibh massa pharetra metus, eget iaculis ante ipsum sed dolor.

Suspendisse cursus bibendum viverra. Sed turpis sapien, placerat at iaculis non, tincidunt posuere enim. Quisque faucibus imperdiet ante eu blandit. Donec quis bibendum ante. Donec posuere volutpat lacus, non commodo turpis venenatis.

And I decided to stick with the basics, and use the following mark-up…


<div id='thoughts'>
<h4>1.) Why did you decide to start your own business?</h4>
<p>I decided to start my own business because I want to be my own boss!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat congue urna, a semper est sollicitudin eget. In quam nulla, porttitor sit amet convallis vitae, faucibus et sapien. Aenean tortor ante, elementum nec volutpat a, pretium ullamcorper lorem. </p>
<p>Cras varius ante quis mauris posuere cursus at vitae nulla. Etiam elementum, urna vel volutpat gravida, metus ipsum gravida augue, et semper sapien erat quis sapien. Etiam vel ante mauris, ut adipiscing orci. Sed pellentesque volutpat nisl. Donec sed nisl quam, a ornare quam. Praesent vel laoreet lectus.</p>

<h4>2.) What advice would you share with others on what NOT to do?</h4>
<p>Curabitur porta aliquam libero, vitae adipiscing risus molestie ac. Fusce luctus magna diam, et posuere risus. Donec et nisi erat, sit amet mattis dolor. Praesent mattis erat a orci euismod in venenatis nibh lobortis.</p>
<p>Vestibulum sed suscipit ligula. Praesent neque leo, elementum non luctus eget, consequat id urna. Ut pulvinar imperdiet sem, ac bibendum nulla blandit at. Cras aliquam tortor et ligula pretium fermentum. Quisque bibendum libero lorem. Aliquam gravida, tortor at sollicitudin mollis, nibh massa pharetra metus, eget iaculis ante ipsum sed dolor.</p>
<p>Suspendisse cursus bibendum viverra. Sed turpis sapien, placerat at iaculis non, tincidunt posuere enim. Quisque faucibus imperdiet ante eu blandit. Donec quis bibendum ante. Donec posuere volutpat lacus, non commodo turpis venenatis.</p>

Sincerely,

Debbie

29

My only question on that wouldn’t be the choice of tag type – it’s what are you doing that got it all the way down to a h4?

30

I just KNEW you’d ask that!!! (:

Okay, let the knives start flying…

<h1> Company Name in header (DeathShadow co-created and approved, so leave it alone!!!)

<h2> DoubleDee’s Profile (again, DeathShadow recommended here)
—> child to Company/Website

<h3> Contact, My Friends (top), My Visitors (in the left column)
—> children to DoubleDee’s Profile

<h3> About Me, My Thoughts, My Friends (all)(tabs in center of Member Profile page)
—> children to DoubleDee’s Profile

<h4> My Thoughts Questions
—> children to DoubleDee’s Thoughts

Sincerely,

Debbie

31

2.) should be 2. or 2) not with both ‘.’ and ‘)’.

I know you’re DoubleDee but still…

32

[ot][QUOTE=itmitică;5116458]2.) should be 2. or 2) not with both ‘.’ and ‘)’.

I know you’re DoubleDee but still…[/QUOTE]

That’s a cultural/country thing…

In the U.S., what I have is the right way to do it… :wink: [/ot]

33
Off Topic:

It’s all a matter of preference and/or convention. My only reference for the U.S. is the Chicago Manual of Style, and that uses either a period or a right parenthesis (with a preference for the period), but not both together. It’s overkill, really. :slight_smile:

34

I’ve yet to encounter this type of marker: 2.) for numbering in any word processor or in CSS specs. That’s why I assume it’s a personal choice, not a standard one.

35

Regardless, let’s not highjack the thread…

36

Actually, I’m with Mitica on the double-punctuation thing… but that’s just because I hate redundancy – it’s like “© copyright” – which you see all the time, doesn’t make it right.

<h3> About Me, My Thoughts, My Friends (all)(tabs in center of Member Profile page)
—> children to DoubleDee’s Profile

<h4> My Thoughts Questions
—> children to DoubleDee’s Thoughts

Why bother with the h3 at that point? Looks like you have multiple subsections that are kin, what makes them be nieces and nephews of your other h3?

Though if you have legitimate direct-child content under said H3, then I get it; otherwise it’s just a wasted header. As a dearly departed friend once told me, “If all you have under a heading is sections started by sub-headings, what purpose does that parent heading serve?”

Took me a bit to see what he meant.

37

I get what your friend was saying, and he make an interesting point.

But in my case, this is why I would say that doesn’t apply…

<h1> describes my Company

<h2> describes the User’s Profile (DoubleDee)

<h3> describes “Contact” (okay, I admit I need a better name for this section, but just stay with me?!)
<h3> describes some of “My Friends” related to My Profile (i.e. <h2>)
<h3> describes “Last 10 Visitors” to My Profile (i.e. <h2>)
<h3> describes a biographical sketch “About Me” related to My Profile (i.e. <h2>)
<h3> describes “My Thoughts” to 10 Questions (i.e. <h4>) related to My Profile (i.e. <h2>)
<h3> describes a listing of all “My Friends” related to My Profile (i.e. <h2>)

I agree that all of my <h3>'s are siblings, but the key concept here is that they are tie into the User’s Profile and NOT the Company…

The “Company” doesn’t have “About me” or “My Thoughts” or “My Friends”…

So, while it would be ideal if my <h2> had content of its own, I think it logically stands on its own without any content at this point, because it logically ties together all of the <h3>'s.

Furthermore, it is possible that I will have content that falls under this <h2> with time…

Sincerely,

Debbie

38

Ok, I misunderstood how you worded it – you’re saying that this:
<h3> About Me, My Thoughts, My Friends (all)(tabs in center of Member Profile page)

is MULTIPLE H3, I read that as saying it was just one.

I thought you were saying this:
<h3> About Me, My Thoughts, My Friends</h3>
<!-- multiple H4’s –>

and not:
<h3>About Me</h3>
<!-- multiple H4’s –>

<h3>My Thoughts</h3>
<!-- multiple H4’s –>

<h3>My Friends</h3>
<!-- multiple H4’s –>

If it’s the latter, then it’s fine.

39

Glad to hear!

BTW, DeathShadow, many of the good habits you’ve been lecturing me on are slowly but surely starting to stick!

There is hope for me… :wink:

Thanks for everything!!!

Debbie