treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Semantics?

  • Just out of curiosity, which of the following is normally considered more semantic?

    <hgroup>

    <h1>
    heading number 1
    </h1>

    <h2>
    heading number 2
    </h2>

    <h3>
    heading number 3
    </h3>

    </hgroup>

    Or
    <hgroup><h1>heading number 1</h1><h2>heading number 2</h2><h3>heading number 3</h3></hgroup>
  • ....it's the same exact markup.
  • Chris is right, it's the exact same markup so neither would be considered 'more' semantic than the other. In terms of preference, though, mine would look something like this:
    <hgroup>

    <h1>heading number 1</h1>

    <h2>heading number 2</h2>

    <h3>heading number 3</h3>

    </hgroup>
  • The first option is more readable. Semantics is related to the elements used and both examples are using the same elements. I, like @TheDoc, would have markup looking like this:

    <hgroup>
    <h1>heading number 1</h1>
    <h2>heading number 2</h2>
    <h3>heading number 3</h3>
    </hgroup>
  • White space doesn't affect semantics outside tags. Inside tags it usually only accepts two spaces and anything more than that still only accounts for two, unless you add &nbsp;'s or something of that nature. The white space could affect file size though. And also if you are importing .txt files into Flash and other odd cases white space will affect the outcome.

    I mark mine up just like @joshuanhibbert showed.
  • Hmmm... I'd always thought that semantics was the "readability" of the code. After seeing the above, why are semantics such a big deal if the only people ever reading it is you, and a computer?
  • Good question. Too many stress over it but really it's not as important as some advocate.
  • I don't necessarily agree with this article, however it was interesting to read:

    Our Pointless Pursuit Of Semantic Value
  • @cnwtx Semantics matter for those that may not be as fortunate as us. Accessibility is always something that should be on your mind and a sound semantic structure helps screen readers and therefore those that use screen readers.
  • Make it readable - make good and useful comments where needed so when you come back after a few other projects you can know why the heck you decided to do something. As long as you stick to that idea, anything is good :)