SitePoint Sponsor

User Tag List

Page 1 of 6 12345 ... LastLast
Results 1 to 25 of 137
  1. #1
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Useful HTML elements that 90% of all developers are unaware of

    This week I "discovered" the <fieldset> element, which has been around for several years, but was completely unknown to me - until now (thank you beetle ! )

    I really like this way of creating something similar to a GroupBox/Frame control in a WinForms application (<legend> == Text/Caption)
    Think I will use it very extensively to group related fields in the future

    Another element, that I knew existed, and also have used a lot in my forms is the <label> element
    However, I've noticed that using <label>s next to form elements is unusual, I guess it can't hurt to talk about that one too

    In fact, why not encourage you all to resurrect "unknown" elements, attributes etc that you believe are useful but rarely used by the majority?


    Finally, a little example, how to use <fieldset> and <label>
    Code:
        ...
        <form action="">
          <fieldset>
            <legend>My favourite thing is...</legend>
            <input type="radio" id="optFav0" name="optFav">
            <label for="optFav0">Raindrops on roses</label><br>
            <input type="radio" id="optFav1" name="optFav">
            <label for="optFav1">Whiskers on kittens</label><br>
            <input type="radio" id="optFav2" name="optFav">
            <label for="optFav2">Bright copper kettles</label>
          </fieldset>
          <p><input type="submit"></p>
        </form>
        ...

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got two, one is an HTML attribute, the other is a CSS gem.

    Well, I just recently finished writing an XHTML/CSS frontend to a SQL Server database at work, and one of the requirements was to print out coversheets for documents contained in the database. This usually isn't too hard, the catch was that my boss wanted several records printed out at once, and all on seperate pages.

    At first I thought I'd have to do some fancy JavaScript or use some kind of messy browser plugin, when I realized through the magic of CSS and XHTML, that I could use the page-break-after which automatically breaks to a new page after the closing tag of the container element!

    A nice little HTML element that's been around for awhile, but I haven't seen used often is the NOWRAP attribute, which is a lifesaver when you just can't have that table cell wrap.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Forgotten elements/properties:

    HTML tags:
    <abbr>
    <acronym>
    <caption>
    <col>
    <colgroup>
    <th>
    <thead>
    <tbody>
    <tfoot>


    CSS Properties:
    text-transform
    white-space
    position: fixed;
    margin: auto; seems to be unknown too

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about the HTML <blink> tag? That's one you don't see being used too often these days.

  5. #5
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mattjacob
    What about the HTML <blink> tag? That's one you don't see being used too often these days.
    Useful HTML elements!

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mattjacob
    What about the HTML <blink> tag? That's one you don't see being used too often these days.
    It's now covered in CSS, unfortunately:
    Code:
    .annoying {
         text-decoration: blink;
    }

  7. #7
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jofa
    Useful HTML elements!
    OK, OK, fair enough. Nobody mentioned using <strong> and <em> in place of <b> and <i>. As far as CSS goes, I've found the following to be pretty useful as of late:
    Code:
    form.oneLineForm {
    display: inline;
    }
    I had to use that for a project at work where the client wanted a text blurb ('Enter your email address'), followed immediately by an input field, followed by a 'Go' button... all on the same line.

  8. #8
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Patriarch
    A nice little HTML element that's been around for awhile, but I haven't seen used often is the NOWRAP attribute, which is a lifesaver when you just can't have that table cell wrap.
    NOWRAP is deprecated. You should use the word-space property in CSS.
    Wayne Luke
    ------------


  9. #9
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    90% of developers ? hmmm....i must fall into the 10% then...

    but while i'm here...any of you ever use the <q> tag ?
    redux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  10. #10
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    but while i'm here...any of you ever use the <q> tag ? [img]images/smilies/smile.gif[/img]
    If I have, I certainly can't remember it! What do you personally use it for?

  11. #11
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    90% of developers ? hmmm....i must fall into the 10% then...
    Lucky you

    Quote Originally Posted by Poll in HTML and XHTML Forum
    The label element - ever use it?
    Always/often [ 1 ] 11.11%
    sometimes/rarely [ 0 ] 0%
    Never [ 8 ] 88.89%
    OK, now I see that total votes is only 9 , but I still think the number 90% is correct
    For example; does this forum use the <label> tag?

  12. #12
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And I still think this thread is a good idea, and Vinnie posting e.g. the <th> is excellent, beacuse a lot of people don't know that it exists, another lot of people never uses it etc etc

  13. #13
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jofa
    Lucky you



    OK, now I see that total votes is only 9 , but I still think the number 90% is correct
    For example; does this forum use the <label> tag?
    No this forum doesn't. However when vBulletin 3.0 final is released, the default templates will use the label tag appropriately. They will also use the fieldset and legend tags.

    <th> is one of my favorite tags. I use it whenever I create a table for the column headers. Makes formatting so much easier because I can apply it directly to the tag instead of a class to differentiate the column headers from standard data cells.

    What about <tfoot>? I see a lot of people use <tbody> but hardly ever see <tfoot> used. While we are on the subject of tables, I haven't seen many people use the caption, colgroup or col elements in the past either. Does anyone use any of these?
    Wayne Luke
    ------------


  14. #14
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i use <label> all the time...i'm required to make my work site (uk university) accessible to at least W3C WAI Level A or better...so labelling my form elements is a must...and it has a huge number of "coincidental" advantages (e.g. checkboxes with a proper label associated can be ticked by clicking on the label text itself, and not just the box...making them a lot easier to "hit" )
    redux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  15. #15
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    checkboxes with a proper label associated can be ticked by clicking on the label text itself, and not just the box
    And if you want to get crafty about it, you could do something like this:
    Code:
    <label for="email" accesskey="e"><span class="underline">E</span>mail address:</label> 
    <input name="email" type="text" id="email" />
    I also usually apply the pointer cursor to <label> via CSS:
    Code:
    label {
    	cursor: pointer;
    }

  16. #16
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I'm a heavy user of <fieldset>, <legend>, and <label> . The first time I used fieldset and legend at work people thought I used some kind of CSS hack to get the "framed" appearance .

  17. #17
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mattjacob
    <span class="underline">E</span>
    Being picky; isn't "underline" a bad name for a css class, should be "initial" or something?

  18. #18
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Two well known attributes, but does everyone know what they are meant for?
    alt
    Quote Originally Posted by w3.org
    For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.
    title
    Quote Originally Posted by w3.org
    This attribute offers advisory information about the element for which it is set.
    Some browsers (read: IE) use the alt attribute as title (i.e. "tool tip") if no title is supplied
    Other browsers (read: Mozilla) display a "tool tip" only when title is set
    And then some people get it all wrong and accuse Mozilla of being wrong

  19. #19
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I've used <th> for a while now, the first time I found it was when I was modding phpBB and they used <th> and I did a search and found out what it was.

    <fieldset> and <legend>, I also knew of their existence but only because they are used at PHP and I saw them, thought they looked interesting and checked out the code.

    There is a lesson to be learned here, if you visit another site and think something there is nifty, check the source. It might just be something simple that you never knew about

  20. #20
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Also, with <strong> and <em>, I've heard somewhere (I think) that they are occasionally rendered differently in different browsers but should still be used as aural browsers and such use them to accent words and stuff.

  21. #21
    SitePoint Guru
    Join Date
    Sep 2001
    Location
    Vancouver
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mattjacob
    And if you want to get crafty about it, you could do something like this:
    Code:
    <label for="email" accesskey="e"><span class="underline">E</span>mail address:</label> 
    <input name="email" type="text" id="email" />
    I also usually apply the pointer cursor to <label> via CSS:
    Code:
    label {
    	cursor: pointer;
    }
    I don't get what the accesskey="e" does?

  22. #22
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Darin
    I don't get what the accesskey="e" does?
    It passes the focus to the label when the access key is typed. So typing e would focus the cursor at that label, and from there to the input box etc, or in this case the email client.

  23. #23
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Forgotten elements/properties:

    HTML tags:
    <abbr>
    <acronym>
    <caption>
    <col>
    <colgroup>
    <th>
    <thead>
    <tbody>
    <tfoot>


    CSS Properties:
    text-transform
    white-space
    position: fixed;
    margin: auto; seems to be unknown too
    <Q> not?

  24. #24
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hurricane.uk
    or in this case the email client.
    ...or in this case a text field.

  25. #25
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by w3.org
    ... Q is intended for short quotations (inline content) that don't require paragraph breaks.
    I guess <q> is better than adding "static" quotation marks, because quotations can be rendered in different ways in different languages etc, and it should be possible to make nested quotations behave correctly (inner/outer quotation marks using ' and ")


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •