Amanda Olsen

Front End Developer User Experience Enthusiast

Blog

Thoughts on the industry

Principles of Selecting Tags

  1. Divs should be used as a last resort.
  2. Divs are not evil.
    1. Feel free to use them. As a last resort.
  3. How do I know when to use a div?
    1. When no other tag will do.
  4. How do I  know when no other tag will do?
    1. By learning what those other tags do.
      1. Please go here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
  5. But it’s all so amorphous! Everything is so unclear! We don’t know exactly when to use these tags!
    1. First, calm down.
    2. Second, they are intentionally broad in scope. This is called flexibility.
    3. Third, this is where your team comes in.
      1. Decide how you plan to use the tags.
      2. Leaving some flexibility is ok and probably preferable.
      3. Giving your team time to learn is ok, in fact, it’s expected.
    4. Fourth, to some small extent, the standard is still being developed.
      1. This is normal in web development and does not negate the value that using the standard provides.
    5. Fifth, this is not moral.
      1. This is not a situation of right and wrong. No one dies if you do this “wrong” (primarily because there is no wrong). These are HTML tags for crying out loud!
  6. Do I replace all divs with sections?
    1. No!
    2. A section is a set of elements you wish to group.
      1. Most likely your section will contain many divs.
  7. Are these nestable? How many times can I use them?
    1. All are nestable (although probably not nav and button).
    2. There is no limit to how many times you can use them.
      1. Why? You probably have  more than one nav, more than one article or section, etc.
    3. Principle of the matter: each set of content is wrapped in something which accurately describes the purpose of the content inside.
  8. What about header tags?
    1. Inside sectioning elements (article, aside, section, and nav), these restart (i.e. you start over at H1).
    2. They should still be used.
    3. Didn’t they provide structure before?
      1. No, they didn’t. Read the smashing magazine article below.
  9. Just make it easy for me so I don’t have to read anything:
    1. Article – stuff about one topic and where it can stand alone and still make sense
    2. Aside – peripheral information
    3. Header – stuff that is not main content that goes at the top
    4. Footer – stuff that is not main content that goes at the bottom
    5. Nav – self explanatory
    6. Button – self explanatory
    7. Section – stuff you wish to group which doesn’t fit any of the above tags
  10. Why does this matter?
    1. We have a worthless DOM otherwise.
      1. A primary purpose of the DOM is to communicate the meaning of the content. Since, by definition, divs mean nothing, making divs the backbone of your page means your DOM is communicating nothing.
    2. With a non-worthless DOM, we give parsers what they’ve always needed: a DOM which actually communicates the meaning of primary parts of the page.
    3. There’s also CSS and JS benefits we can get into later.
  11. It still doesn’t make sense!
    1. Give yourself time to learn (and also fix anything I may have gotten wrong above).
    2. Please read: http://www.smashingmagazine.com/2013/01/18/the-importance-of-sections/

Share your thoughts


five × = 45

Your email address will not be published.