SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this code snippet semantic HTML?

    There has been some discussion in our office as to what is semantic HTML and whether the following code is semantic HTML...any input would be appreciated. Thank you in advance for your advice.

    Code:
    <div id="contentWrapper">
    
    
    
    
    
    <div id="calloutBox">
    <div id="calloutSpacer"></div>
    <div id="calloutImage"><img src="http://www.domainname.com/images/callout-icon.png" alt="Breaking News" title="Breaking News" /></div>
    <div id="calloutContent">Dummy text goes here...A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</div>
    </div>
    
    
    
         
    <div id="navBoxes">
    
    <div id="navBox1">
    <div align="center" class="boxImage"><a href="../index.htm"><img src="images/features/description_icon.png"  alt="Alt Text Goes Here" title="Descriptive Text Goes Here" /></a></div>
    Describe destination of link in 70 characters or less&mdash;including spaces.
    <div align="center" class="boxLink"><a href="resources/index.htm">Anchor Text Goes Here</a></div>
    </div>
    
    <div id="navBox2">
    <div align="center" class="boxImage"><a href="../index.htm"><img src="images/features/description_icon.png"  alt="Alt Text Goes Here" title="Descriptive Text Goes Here" /></a></div>
    Describe destination of link in 70 characters or less&mdash;including spaces.
    <div align="center" class="boxLink"><a href="resources/index.htm">Anchor Text Goes Here</a></div>
    </div>
    
    <div id="navBox3">
    <div align="center" class="boxImage"><a href="../index.htm"><img src="images/features/description_icon.png"  alt="Alt Text Goes Here" title="Descriptive Text Goes Here" /></a></div>
    Describe destination of link in 70 characters or less&mdash;including spaces.
    <div align="center" class="boxLink"><a href="resources/index.htm">Anchor Text Goes Here</a></div>
    </div>
    
    <div id="navBox4">
    <div align="center" class="boxImage"><a href="../index.htm"><img src="images/features/description_icon.png"  alt="Alt Text Goes Here" title="Descriptive Text Goes Here" /></a></div>
    Describe destination of link in 70 characters or less&mdash;including spaces.
    <div align="center" class="boxLink"><a href="resources/index.htm">Anchor Text Goes Here</a></div>
    </div>
    
    </div><!-- end navBoxes div -->
            
    
    
            
    <div id="contentBox">
    
    <p>Dummy text goes here...A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
            
    <h3>News &amp; Publications</h3>
    
    <ul class="singlespaced-nondecorated">
    
    <li><a href="#">First News Item Description Link Goes Here</a></li>
    
    <li><a href="documents/placeholder.pdf" target="_blank">Second News Item Description Link Goes Here</a><img src="http://domainname.com/images/icons/icon_pdf.gif" alt="PDF" width="16" height="16" /></li>
    
    <li><a href="documents/placeholder.pdf" target="_blank">Third News Item Description Link Goes Here</a><img src="http://domainname.com/images/icons/icon_pdf.gif" alt="PDF" width="16" height="16" /></li>
            
    <li class="topMargin25">Visit the <a href="#">News & Publications</a> page for additional archived items.</li>
    
    </ul>
    
    </div> <!--END contentBox div-->
    
    
    
    
    </div><!-- end contentWrapper div -->

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hi Jayne. I've moved this from Content Reviews to the HTML forum.

    Assuming you are using a doctype declaration, there are only a few official errors in your code, as highlighted by the validator (the line numbers relate to the page I posted in the validator, which included an XHTML strict doctype):

    Line 22, Column 12: there is no attribute "align"
    <div align="center" class="boxImage"><a href="../index.htm"><img src="images/fe…

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

    Line 60, Column 48: there is no attribute "target"
    …ef="documents/placeholder.pdf" target="_blank">Second News Item Description Li…

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

    Line 64, Column 52: character "&" is the first character of a delimiter but occurred as data
    …pMargin25">Visit the <a href="#">News & Publications</a> page for additional a…

    This message may appear in several cases:

    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.
    From my own point of view, that code is not very efficient. There are too many ids, and things like

    • align="center"
    • having an <a> directly inside a div
    • having text not wrapped in a block element like <p>, such as "Describe destination ..."


    should be addressed too.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    It's hard to tell what it's supposed to be just from looking at the code, but judging by the sheer number of divs, I'd say not really.

    A div has no semantic meaning. It's essentially an empty, meaningless container used because sometimes there just isn't a better way to do it. However, often times there is.

    If you could explain what that is supposed to be, or show a live example, we can probably answer the question better.

  4. #4
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, the page is on a dev server behind a firewall but here's a screen grab of how the code snippet displays. I appreciate the discussion so far and would appreciate any additional insight people are willing to provide. Thanks!


  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jayne1986 View Post
    would appreciate any additional insight people are willing to provide.
    There's a lot covered already. Did it make sense?

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Get rid of all the align="center" references as that can never be semantic - replace it with the appropriate code in your CSS.
    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="^$">

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks for all the information everyone---much appreciated.


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
  •