SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Coding HTML with semantics in mind

    Is there a document that I could reference every time Iím in doubt about semantics when coding HTML and CSS?

    The reason for the question is because Iím always debating if the way I think it needs to be is semantically correct.

    Thanks
    Thank you very much!!!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    My go-to reference is the SitePoint Reference. I find it really handy:

    SitePoint CSS Reference

    It covers HTML, CSS and even JS.

  3. #3
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree, I use this reference a lot but I was thinking about something that could tell you something like... never use a p tag inside an H1 tag or something like that.

    I guess I'm wishing for something I should learn by trial and error, or perhaps read more about the topic.

    Thanks
    Thank you very much!!!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Well, there is the official documentation for each language, of course. (Not that it's much fun trying to wade through all that stuff! It's like the proverbial Cone of Silence to me.)

    This is a handy HTML reference that I found out about recently in another post: HTML 4 Elements

    It gives a fair bit of info on how each element can be used.

  5. #5
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (Replying to fs_tigre)

    Laid out as a "do this, don't do this" list, it would probably end up being longer than the reference works, since there are so many permutations and combinations.

    BTW, I think you're confusing "syntax" with "semantics."

    Proper syntax refers to using language elements in the right sequence, combined in correct ways.

    In the HMTL context, "semantic" refers to whether something has "meaning," or whether it's just applied for styling purposes. So, an <li> tag has a meaning - it says, "This is a list item." An <h1> tag has a meaning - it says, "This is the main topic of this page" (or something like that - always a source of debate!).

    A <font> tag, on the other hand, has no meaning, so it's not "semantic." It's not telling you that the material that follows is a font. It's telling the browser how to style that content.

    There's a school of thought that says that all HTML tags should be semantic, and that all styling should be done in the CSS. Of course, they immediately carve out huge exceptions for tags like <div> and <span>, which don't really mean anything, so it's an ideology that isn't particularly consistent.

  6. #6
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    div and span do have some semantic meaning, if not much. A 'div' is a division of a page, a section, if you like. A 'span' is a span of text, in other words, a small selection. Those are semantic, by themselves. The problem is that they convey very little meaning because they are so general. Which is why HTML5 has introduced more semantic tags (much to the disgust of certain people on this forum).

  7. #7
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph.m
    This is a handy HTML reference that I found out about recently in another post: HTML 4 Elements
    Very good reference, thanks a lot!

    EarlyOut
    Proper syntax refers to using language elements in the right sequence, combined in correct ways.
    You are right I was confused but I really meant all, I thought syntax was part of semantics, sorry.

    Any reference for syntax?

    One more question.

    When talking about SEO what matters the most, syntax or having your elements semantically correct, or both?
    Thank you very much!!!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by fs_tigre View Post
    Any reference for syntax?
    My link above deals with syntax, such as what element can be used where.

  9. #9
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PatrickSamphire View Post
    A 'div' is a division of a page, a section, if you like.
    True in theory, but in practice....

    And let's face it, the meaning of <span> is usually, "I'm going to apply some styling to this text."

  10. #10
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EarlyOut View Post

    And let's face it, the meaning of <span> is usually, "I'm going to apply some styling to this text."
    Yeah, but it's "I'm going to apply some styling to this *span* of text".

  11. #11
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all!
    Thank you very much!!!

  12. #12
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,824
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by fs_tigre View Post
    Any reference for syntax?
    Run it through The W3C Markup Validation Service and anything that's syntactically invalid will be thrown back as an error. You'll soon get used to spotting things, like <p> inside <h1>, that get thrown back!

    When talking about SEO what matters the most, syntax or having your elements semantically correct, or both?
    Semantics are more important to SEO, as they help googlegod to understand your site. Syntax has many benefits, not least that it makes the appearance and behaviour of your site more predictable on different browsers and platforms, but SEO isn't one of those - googlegod really couldn't care less about being the W3's policeman and enforcing coding rules arbitrarily.

  13. #13
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your comments.
    Thank you very much!!!


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
  •