SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: HTML Convention

  1. #1
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Convention

    Basically I am looking for the best solution for a naming convention schema that eliminates page specific names while keeping my html modular...

    Ideally the designs I work with consist of:
    Code:
    Header
    
    Main Navigation
    
    Content Main
        Section - Main
        Section - Features
        Section - Entries
    
    Content Related
        ....
    
    Footer
    The pages for example could include:
    about.html
    news.html
    work.html
    hobbies.html
    Last edited by cooper.semantics; Apr 25, 2009 at 22:46. Reason: Cleaned up thread :-D

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    How about using the following...

    Code HTML4Strict:
    <div id="section-main">
       <div id="about">...</div>
       <div id="news">...</div>
       <div id="work">...</div>
       <div id="hobbies">...</div>
    </div>

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I've been finding the patterns here nice and practical.

  4. #4
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Yum XML <3
    Code XML:
    <?xml version="1.0"?>
    <bucket xmlns="http://xmlns.org/logic/super/markup">
        <section type="about">
            <header>About whatever...</header>
            <intro>
                <para>Some long winded intro...</para>
                <para>Some long winded intro...</para>
            </intro>
            <para>Continue on with the paragraphs.</para>
        </section>
    </bucket>
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,787
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    And then just use XSL to parse it into something web browsers can display.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by logic_earth
    <?xml version="1.0"?>
    <bucket xmlns="http://xmlns.org/logic/super/markup">
    <section type="about">
    <header>About whatever...</header>
    <intro>
    <para>Some long winded intro...</para>
    <para>Some long winded intro...</para>
    </intro>
    <para>Continue on with the paragraphs.</para>
    </section>
    </bucket>
    The advantages of that approach don't seem to out weight the disadvantages. Although in theory it does seem like a good solution. The practicality seems very low. Bucket… really,lol

  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    ...Bucket… really,lol
    Felt to lazy to come up with a better root element. So *shrugs*
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    naming… seems so easy in theory,lol

  9. #9
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would not use either of those naming schemes.

  10. #10
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure I understand the problem, but: have you considered multiple classes on one element? <div class="hobbies section-main obj">
    Simon Pieters

  11. #11
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I might not be understanding what you want to do, but won't this work:

    .section-main {...}
    .work{...}
    .hobbies{...}
    .features{...}

  12. #12
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    Not sure I understand the problem, but: have you considered multiple classes on one element? <div class="hobbies section-main obj">
    I can't use any page specific naming conventions because each block can be dropped into any page...
    Here is a solution I came up with that will make my html modular and not page specific while reusing the same naming conventions. Again this could turn into a nightmare:

    Code HTML4Strict:
    about.html
    <div id="document">
    	<div class="section-main-obj1">...</div>
    	<div class="section-features-obj1">...</div>
    	<div class="section-entries-obj1">...</div>
    </div>
     
    work.html
    <div id="document">
    	<div class="section-main-obj2">...</div>
    	<div class="section-features-obj2">...</div>
    	<div class="section-entries-obj2">...</div>
    </div>
     
    news.html
    <div id="document">
    	<div class="section-main-obj3">...</div>
    	<div class="section-features-obj3">...</div>
    	<div class="section-entries-obj3">...</div>
    </div>
    I could even interchange these if I want as well...
    Last edited by cooper.semantics; Apr 25, 2009 at 22:53.

  13. #13
    SitePoint Addict
    Join Date
    Feb 2007
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Basically I am looking for the best solution for a naming convention schema that eliminates page specific names while keeping my html modular...

    Ideally the designs I work with consist of:
    Code:
    Header
    
    Main Navigation
    
    Content Main
        Section - Main
        Section - Features
        Section - Entries
    
    Content Related
        ....
    
    Footer
    Sounds like you have your names. Assuming these blocks appear once and once only on a page, convert the names you used to ids on div tags and you're done.

    Don't make things harder than they need to be. Overthinking will almost always bite you back.

  14. #14
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Arlen View Post
    Sounds like you have your names. Assuming these blocks appear once and once only on a page, convert the names you used to ids on div tags and you're done.

    Don't make things harder than they need to be. Overthinking will almost always bite you back.
    These blocks can appear how ever many times on a page or another page. That's why I am using the class design pattern...


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
  •