SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)

    semantic improvments

    Hi,

    I have been reading a lot of posts here and in the archives about writing better and cleaner markup.

    I am not sure about <div class='clear'></div> clearing divs as they allow for one to see in the markup where clears are but they add additional markup.

    The wrapper <divs> that are used for floating several items together and in some cases are just necessary for the way I have done the layouts.

    Although it may not look like it, I have tried to keep the use of <divs> down in favour of using natural html selectors such as img, h2

    I still get the feeling that I am over <div>ing yet the current layout is how I could get all that is going on working.

    BTW the tabs were a real headache. I also have not optimized this yet for anything other than firefox.

    Here is the code:
    PHP Code:
    <?php
    require_once("../forms/Forms.php");
    require_once(
    "../forms/home_forms.php");
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="EN" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>El template</title>
    <meta http-equiv="content-type" content="text/html; charset='utf-8" ></meta>
    <script  type='text/javascript' src="https://www.google.com/jsapi"></script>
    <script  type='text/javascript'  charset='utf-8'>google.load("jquery", "1.4");</script>
    <script  type='text/javascript'  charset='utf-8'>google.load("jqueryui", "1.8");</script>
    <script  type='text/javascript' src='./js/home.js' charset='utf-8'></script>
    <style type="text/css" media="screen">@import "css/import_home.css";</style>
    </head>
    <body>

        <?php
            
    // Common header
            
    require_once('header.php');
            
    // Centralized main menu file
            
    require_once('menu.php');
        
    ?>
        <div id='content_wrapper' >
            <img c src='./images/home_contact/top_wide_corners.jpg' alt='top wide light grey corners'/>
            <div class='clear'></div>

            <div  id='contact_summary_box'>
                <h2>CONTACT SUMMARY</h2>
                <div class='clear'></div>
                <div  class='cs_thick_dark_blue_line '></div>
                <img  class='line_ball' src='./images/common/line_ball.png' alt='decorative ball at the end of the blue divider line' />
                <form action='home.php' method='post'>
                    <div id='contactSummaryForm'>
                        <?php
                            $post_obj 
    = new Post();
                            
    $post $post_obj->autoFill();
                            
    $contact_summary_obj = new ContactSummaryHandler();
                            
    $form $contact_summary_obj->build($post);
                             if(
    $_POST) {
                                
    $form=$contact_summary_obj->validate(&$post);
                             }

                            foreach(
    $form as $widget) {
                                
    //var_dump($widget);
                                
    if ($widget->widget->id == 'start_time_frame') {
                                    echo 
    $widget->paint() . '<div id="start_time_frame_to" class="bold sm_form_txt "> to</div>';
                                } else {
                                    echo 
    $widget->paint();
                                }
                            }
                        
    ?>
                        <div class='clear'></div>
                        <div  id='contact_summary_submit'>
                            <input type="submit" value="Submit" />
                            <img src='./images/home_contact/bottom_wide_corners.jpg' alt='bottom light grey wide corners'></img>
                        </div>
                    </div>
                </div> <?php // end contact_summary_box?>
                </form>

            <div class='clear'></div>
            <div id='schedule_tabs'>
                <h2>SCHEDULE</h2>
                <div class='clear'></div>
                <div class='button_wrapper'>
                    <div class='thick_dark_blue_line'></div>
                    <div id='schedule_buttons' class='buttons'>
                        <ul id='add_event'>
                            <li id='bn_add_event'><a href="#add_event" title="add a schedule event">Add Event</a></li>
                            <li id='bn_download'><a href="#download" title="download schedule evenst">Download</a></li>
                        </ul>
                    </div>
                </div>
                <div class='clear'></div>
                <div id='tab_all'>
                    <div id="nav1">
                        <ul>
                          <li id="all"><a href="#pane_all">All</a></li>
                          <li id="day"><a href="#pane_day">Day</a></li>
                          <li id="week"><a href="#pane_week">Week</a></li>
                          <li id="month"><a href="#pane_month">Month</a></li>
                        </ul>
                    </div>
                </div>
                <div class='clear'></div>
                <div id='schedule_body'>
                    <img class='top_corners' src='./images/common/top_dark_wide_corners.png' alt='top dark wide corners'/>
                    <div class='clear'></div>
                    <div class='home_content_wrapper'>
                        <img class='top_inside_corners' src='./images/common/inside_light_corners_top.png' alt='top inside light corners'/>
                        <div id='schedule_pane'>
                        </div>
                        <img class='bottom_inside_corners' src='./images/common/inside_light_corners_bottom.png' alt='bottom inside light corners'/>
                    </div>
                    <div class='clear'></div>
                    <img class='bottom_corners' src='./images/common/bottom_dark_wide_corners.png' alt='bottom dark wide corners'/> <?php //End  schedule_body ?>
                 </div>

                 <div class='clear'></div>

            </div><?php  // End  schedule_tabls ?>
            <!--  ********************************** -->
            <div id='messages'>
                <h2>MESSAGES</h2>
                <div class='clear'></div>
                <div class='button_wrapper'>
                    <div class='thick_dark_blue_line'></div>
                        <div id='message_buttons' class='buttons'>
                            <ul id='message_actions'> <!--  used to be add_events -->
                                <li id='bn_new'><a href="#new_message" title="add a new message">New Message</a></li>
                                <li id='bn_delete'><a href="#delete" title="delete message">Delete Message</a></li>
                            </ul>
                        </div>
                    </div>
                <div class='clear'></div>
                <div id='message_body'>
                    <img class='top_corners' src='./images/common/top_dark_wide_corners.png' alt='top dark wide corners'/>
                    <div class='clear'></div>
                    <div class='home_content_wrapper'>
                        <img class='top_inside_corners' src='./images/common/inside_light_corners_top.png' alt='top inside light corners'/>
                        <div id='message_pane'>
                        </div>
                        <img class='bottom_inside_corners' src='./images/common/inside_light_corners_bottom.png' alt='bottom inside light corners' />
                    </div>
                    <div class='clear'></div>
                    <img class='bottom_corners' src='./images/common/bottom_dark_wide_corners.png' alt='bottom dark wide corners'/> <?php //End  schedule_body ?>
                </div>
        </div>
        </div> <?php // End content_wrapper ?>
    </body>
    </html>
    and here is the link to the page in action:http://64.201.38.109:12342/el/home.php

    If you have time I would love to here feedback, critisizim or whatever that can help me working towards better semantic code in applications.

    Regards,
    Steve

    [edit] This may be more appropriate for the html forum; although it makes heavy use of CSS for the layout so I think this is the right place
    ictus==""

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,363
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can slim thinsg down a bit, here's a couple of examples:

    Code:
    <img src='./images/home_contact/top_wide_corners.jpg' alt='top wide light grey corners'/>
    <div class='clear'></div>
    Remove the "clear DIV" Apply a class/ID to the image and clear that:

    Code:
    <img src='./images/home_contact/top_wide_corners.jpg' alt='top wide light grey corners' class="topcorners" />
    
    .topcorners {clear: both;}
    ... or even better apply this type of image as a background, it's only eye candy so there's no need to display is as content.

    Same again...

    Code:
    <h2>CONTACT SUMMARY</h2>
    <div class='clear'></div>
    H2 is a block level element to clears by default, just remove the "clear DIV"

  3. #3
    SitePoint Enthusiast LadynRed's Avatar
    Join Date
    Sep 2003
    Location
    TN
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are other methods for clearing floats that don't require the use of a non-semantic div. Using overflow:auto or hidden on the container holding the floats is widely used.

    Here's a good article from Smashing Magazine:
    http://www.smashingmagazine.com/2009...loat-property/
    Web Goddess & Web Standards Evangelist

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That header code has too many divs and you have no real content in there so it would be better with an image replacement technique and more succinct code.

    This:

    Code:
    <div id="header_outer_wrapper">
        <div id="head_inner_wrapper">
            <div id="header">
                <div id="leftcol">
                    <!-- begin leftcol -->
                    <img src='http://64.201.38.109:12342/el/images/header/el_logo_header.jpg'  alt='logo'/> </div>
                <div id="rightcol"> <img src='http://64.201.38.109:12342/el/images/header/el_tagline_header.jpg'  alt='itagline'/> </div>
                <div id="centercol"> <img src='http://64.201.38.109:12342/el/images/header/el_mid_top_header.jpg' width='100&#37;' height='107px' alt='stretchable gradient' /> </div>
            </div>
        </div>
    </div>
    Could be reduced by more than half to something like this (even with loads of added text content).

    Code:
    <h1 id="header"><strong>Express Lead<em></em></strong><span><img src='http://64.201.38.109:12342/el/images/header/el_mid_top_header.jpg' width='100%' height='107px' alt='' /></span><b>technology should support your process - not define it<em></em></b></h1>
    Whether you use an h1 for the logo is a debatable issue but the code would be the same for any other element such as a p element anyway. As it is a header and you have no h1 already then it seems like a fair choice.

    The css would then be like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #header {
        position:relative;
        width:100%;
        min-width: 800px;
        height:107px;
        margin:0;
        font-size:65%;
    }
    #header b, #header b em {
        position:absolute;
        z-index:2;
        right:0;
        top:0;
        width:476px;
        height:107px;
        overflow:hidden;
    }
    #header b em {
        position:absolute;
        left:0;
        top:0;
        background:url(http://64.201.38.109:12342/el/images/header/el_tagline_header.jpg) no-repeat 0 0;
    }
    #header strong, #header strong em {
        width:293px;
        height:107px;
        position:absolute;
        overflow:hidden;
        z-index:2;
        left:0;
        top:1px;
    }
    #header strong em {
        position:absolute;
        left:0;
        top:0;
        background:url(http://64.201.38.109:12342/el/images/header/el_logo_header.jpg) no-repeat 0 -1px;
    }
    #header span {
        position:relative;
        padding:0 476px 0 293px;
        display:block;
    }
    #header img {
        display:block
    }
    </style>
    </head>
    <body>
    <h1 id="header"><strong>Express Lead<em></em></strong><span><img src='http://64.201.38.109:12342/el/images/header/el_mid_top_header.jpg' width='100%' height='107px' alt='' /></span><b>technology should support your process - not define it<em></em></b></h1>
    </body>
    </html>
    I would also do away with that stretch image and instead apply a graphic to the background of the h1 to take up the slack. Just create a graphic wider than you need and if you optimise it down it will hardly be bigger than the fie size you have already.

    That will clear even more unnecessary stuff out of the html.

    Do you need ids on all your list item menus? You don't seem to be using them and if you don't need them then don't add them.

    Where is the structure of your page? You go straight into an h2 but there is no h1 and I don't see a single paragraph tag.

    This following code:

    Code:
    <h2>CONTACT SUMMARY</h2>
        <div class='clear'></div>
        <div  class='cs_thick_dark_blue_line '></div>
        <img  class='line_ball' src='http://64.201.38.109:12342/el/images/common/line_ball.png' alt='decorative ball at the end of the blue divider line' />
    Could be reduced to this:

    Code:
    <h2>Contact Summary<span></span></h2>
    Use text-transform:uppercase to change the text into uppercase and don't type it in uppercase.

    use background image on the h2 for the underline and then apply the ball image to the span inside the h2.

    The h2 can be set to clear:both so you don;t need the clearer.

    All decorative images should be in the background and preferably in the background of existing elements. You should never have images like this in your html.

    Code:
        <img class='bottom_corners' src='http://64.201.38.109:12342/el/images/common/bottom_dark_wide_corners.png' alt='bottom dark wide corners'/>
    And don't give alt attributes to decorative images anyway or screenreaders will read out all your decorations and annoy the user Just use alt="" if you must have a decorative image in the html although there is never a need as you could just have an empty element which is less characters and less intrusive.

    In most cases you have enough background hooks for these images anyway.

    Don't run inline elements into block level elements like this:

    Code:
    <div class='clear'></div>
    <img class='bottom_corners' src='http://64.201.38.109:12342/el/images/common/bottom_dark_wide_corners.png' alt='bottom dark wide corners'/>
    That's the same as doing this:

    Code:
    <div>
    some text
    <p>some more text</p>
    </div>
    Make sure inline elements are wrapped in block level elements at the same level.

    Code:
    <div class='clear'></div>
    <p><img class='bottom_corners' src='http://64.201.38.109:12342/el/images/common/bottom_dark_wide_corners.png' alt='bottom dark wide corners'/></p>
    It's an extra tag but it keeps things tidy and fixes various bugs in various browsers.

    As mentioned above don't add unnecessary clearers in the html when you could have just cleared the element itself. In most cases you could use one of the unobtrusive clearers anyway (such as overflow:hidden or the clearfix techniques).)

    Again:
    Code:
            <div class='button_wrapper'>
                <div class='thick_dark_blue_line'></div>
                <div id='message_buttons' class='buttons'>
    Too many divs and the blue line could have been a background image in an existing element.

    In fact this:

    Code:
    <h2>SCHEDULE</h2>
            <div class='clear'></div>
            <div class='button_wrapper'>
                <div class='thick_dark_blue_line'></div>
                <div id='schedule_buttons' class='buttons'>
                    <ul id='add_event'>
                        <li id='bn_add_event'><a href="#add_event" title="add a schedule event">Add Event</a></li>
                        <li id='bn_download'><a href="#download" title="download schedule evenst">Download</a></li>
                    </ul>
                </div>
            </div>
    could be coded as this without too much trouble:

    Code:
    <h2>SCHEDULE</h2>
    <ul id='add_event'>
        <li id='bn_add_event'><a href="#add_event" title="add a schedule event">Add Event</a></li>
        <li id='bn_download'><a href="#download" title="download schedule evenst">Download</a></li>
    </ul>
    Don't add wrappers unless you need them or unless they are providing structure to the page. use background images on existing elements where possible and keep all decorative images out of the html.

    Keep the html as minimalist as it can be and it immediately becomes easier to work with and manage and also pushes up the content to code ratio.

    Hope that's given you a few hints

  5. #5
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Wow, firstly sorry for asking, for those of you that answered and me taking so long to respond! One of our bigger clients had an emergency with one of their applications. As a result we worked weeks and many 'until 5:30 a.m.s'; it left me with little time to do anything else!

    I appreciate the thoroughness!

    bluedreamer: ... or even better apply this type of image as a background, it's only eye candy so there's no need to display is as content.
    and
    H2 is a block level element to clears by default, just remove the "clear DIV"
    I will revise the decorative images to back-ground images and allow self-clearing elements to clear on their own. Thanks for the recommendation; I am also going to review all the structural html elements to see which of them are self-clearing so next time I know.

    LadynRed: Good recommendation on the overflow: auto; this will work well in many places of this and other my other web-sites.
    Wow Paul!
    This:

    Code:
    <div id="header_outer_wrapper">
    <div id="head_inner_wrapper">
    <div id="header">
    <div id="leftcol">
    <!-- begin leftcol -->
    <img src='http://64.201.38.109:12342/el/images/header/el_logo_header.jpg' alt='logo'/> </div>
    <div id="rightcol"> <img src='http://64.201.38.109:12342/el/images/header/el_tagline_header.jpg' alt='itagline'/> </div>
    <div id="centercol"> <img src='http://64.201.38.109:12342/el/images/header/el_mid_top_header.jpg' width='100%' height='107px' alt='stretchable gradient' /> </div>
    </div>
    </div>
    </div>
    Could be reduced by more than half to something like this (even with loads of added text content).

    Code:
    <h1 id="header"><strong>Express Lead<em></em></strong><span><img src='http://64.201.38.109:12342/el/images/header/el_mid_top_header.jpg' width='100%' height='107px' alt='' /></span><b>technology should support your process - not define it<em></em></b></h1>
    This is great also thanks for the css example in this case.

    I would also do away with that stretch image and instead apply a graphic to the background of the h1 to take up the slack. Just create a graphic wider than you need and if you optimise it down it will hardly be bigger than the fie size you have already.
    The customer is adamant that the gradient stay within the resized windows so I do not think that your recommendation will work here? I do agree though that in the context of my question your recommendation would be more semantically correct.

    Where is the structure of your page? You go straight into an h2 but there is no h1 and I don't see a single paragraph tag.
    Would it be better as in the case of this page having no paragraphs that I use No H1, H2 and H3 elements and instead use stylized <divs>? Those H2 are the titles of each of those sections. I guess what you are saying, that a semantically correct page a <h1> should be the document (not the page) title, the <h2> should be document sections that contain <p>,<h3>, and other block level elements. As my page uses the header and logo as a <h1> then I have already broke semantics?

    Use text-transform:uppercase to change the text into uppercase and don't type it in uppercase.

    use background image on the h2 for the underline and then apply the ball image to the span inside the h2.

    The h2 can be set to clear:both so you don;t need the clearer.

    All decorative images should be in the background and preferably in the background of existing elements. You should never have images like this in your html.

    Code:
    <img class='bottom_corners' src='http://64.201.38.109:12342/el/images/common/bottom_dark_wide_corners.png' alt='bottom dark wide corners'/>
    And don't give alt attributes to decorative images anyway or screenreaders will read out all your decorations and annoy the user Just use alt="" if you must have a decorative image in the html although there is never a need as you could just have an empty element which is less characters and less intrusive.
    All excellent suggestions that I will take when refactoring the css for this page as well as my work going forward.

    Make sure inline elements are wrapped in block level elements at the same level.

    Code:
    <div class='clear'></div>
    <p><img class='bottom_corners' src='http://64.201.38.109:12342/el/images/common/bottom_dark_wide_corners.png' alt='bottom dark wide corners'/></p>
    It's an extra tag but it keeps things tidy and fixes various bugs in various browsers.
    Very good to know and certainly not difficult to do.

    As mentioned above don't add unnecessary clearers in the html when you could have just cleared the element itself. In most cases you could use one of the unobtrusive clearers anyway (such as overflow:hidden or the clearfix techniques).)
    What is better to use overflow:hidden which is easily understood or the more robust clearfix techniques?

    Don't add wrappers unless you need them or unless they are providing structure to the page. use background images on existing elements where possible and keep all decorative images out of the html.

    Keep the html as minimalist as it can be and it immediately becomes easier to work with and manage and also pushes up the content to code ratio.
    I will be deligent about these suggestions and can see how they will reduce the complexity and increase manageability.

    I really appreciate the time you have taken to analyze this and, again am only sorry it took this long for me to address your recommendation. Thank you again!

    Regards,
    Steve
    ictus==""


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
  •