Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Ok, we all have our definitions for "semantic". Now, here's another problem I'm trying to solve. Feel free to add your own opinions.

    If I wanted to attach a pseudo-fieldset - a box with a label positioned on the top-left border, commonly used for grouping User-Interface controls in applications. What would be the best markup? I thought something like this...

    HTML Code:
    <div class="field">
      <h1>Label</h1>
      <p>
        Content goes here
      </p>
    </div>
    However a friend insisted that the label isn't of importance equal to a header, and said that it actually has less importance then the content inside the box. The CSS of that markup would be pretty straightforward. How should I do this?
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I don't think you should be using h1, but other than that it looks like a reasonable way to mark it up. Unless you're actually putting field data in there, in which case fieldset is far more appropriate. I didn't quite get your friend's complaint. How would he mark it up, exactly?

    Do bear in mind that it's mildly annoying to achieve the fieldset label effect with containers that aren't fieldsets, though.

  4. #3
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Well of course the heading would need to be set to the appropriate level. My friend was more for something like a definition list, with the definition title as the label and the detail as the content. My problem was this that it looked odd for a <dl> with only one entry in it.

    Are we allowed to just use the fieldset and label tag outside of forms?

    As for styling, I find it relatively simple. In the above markup:
    Code:
    .field{
    background: #fff;
    border: 1px solid #ccc;
    margin: 10px 5px 0 5px;
    padding: 10px 5px 5px 5px;
    }
    
    .field h1{
    position: relative;
    top: -1em;
    background: #fff;
    border: 1px solid #ccc
    }
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Many people do use fieldset+legend outside of forms... Because it's such a useful grouping mechanism, it sort of makes sense, but it definitely grates against being semantic.

    I don't like the idea of a definition list, just because, as you said, that implies a *list*, which does not exist in this case.

  6. #5
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    If it's not a heading, and it's not part of a definition list, and it's not a legend, and it obviously shouldn't be a paragraph, I would just use a span. I don't know what else it would be if it's such an arbitrary little thing.

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, it's a heading for that section, so using a heading tag makes sense.

  8. #7
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I'm debating about the importance of the label. Some say that the label is critical and acts like a heading, while some say that the label is just the "grouping qualifier", ie the similarity between the grouped items to why they're grouped.

    It does have to do with how we actually use them. I usually label them with something like "Information" or "Warning". What should I use then?

    I think there's nothing wrong with using a paragraph,though. It could also be done without the paragraph, which would imply the typical "fieldset-label" tag pair.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Any chance you could provide a more concrete example? For example, here's something I have on one of my sites:
    HTML Code:
    div class="school section" id="school9">
      <h2 class="name header">Port Charlotte</h2>
    
        <div class="hideable_information">
            <div class="address subsection"><label>Address:</label>
                PLACE<br>
                LOCATION<br>
                United States
            </div>
    
            <div class="advisors subsection"><label>Advisors:</label>
    
            <div class="advisor">
                <div class="name">PERSON</div>
                <div class="email"><a href="mailto:EMAIL">EMAIL</a>
            </div>
        </div>
    </div>
    EDIT: As a side note, those label tags should be h3s or something of the sort.

  10. #9
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Lets just take a quick example - the notice about the Virginia Tech tragedy above. Say filburt wants to add the label "Community notice".

    I'd think that the header should be set to the appropriate level. But then again...

    Are we allowed to use the label tag standalone like that?
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I'd agree in that context on using the header. The way I used the label tag is something I was unsure about. Especially in my case, it's one of those things where it seemed mildly more appropriate to call it a `label' as opposed to an actual heading. I don't think I've made up my mind 100% yet, but I'm leaning towards using headings for those purposes, too. Not sure whether it's standards-compliant, now I think of it... Reading the Doctype would definitely tell us whether labels were required to be in forms, but I doubt they are.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com