DIVs vs. ULs
So it’s official: my first week of HackerYou’s 9-week long coding bootcamp is now complete! Having taken their part-time HTML & CSS courses almost 2 years ago, the bootcamp is definitely providing a much needed refresher of a lot of important concepts and fundamentals.
One concept that really stood out for me so far was brought up during a discussion on structuring the layout for galleries. Our instructor, Kristen, explained that galleries should be built using unordered lists rather than with div tags. With the reasoning she provided in mind, I decided to do a bit more digging on the topic, and came up with a the following list of reasons why:
Reason #1: Good semantics
As Kristen mentioned in her lesson, structuring a gallery with an unordered list rather than with div tags is a more semantic approach. I decided to use this as the starting point of my research. First, I read an article written by Chris Coyier (co-founder of CodePen and creator of CSS-Tricks, one of my top go-to web development resources), where he explains the difference between good and bad semantics. The concept of good semantics essentially means using tags that “make sense” and actually describe the content. On the flip side, bad semantics do the opposite of that, and do not provide any information on a given topic’s content. While you can still have clean code that will work either way, the latter approach brings up the issue of improper syntax.
Next, upon sifting through various other articles and forums on the use of div tags vs. unordered lists for galleries, it became abundantly clear that using unordered lists was the way to go in order to adhere to the best practices of good semantics. Simply put, lists communicate more clearly to the readers of your code, and is the convention when grouping items together. Readers should be able to understand the purpose of the code structure without knowing the actual text of the elements. This is the key to good semantics!
As an example, here is a snippet of the code that I had originally written for a gallery section that I had to create for my first assignment:

As you can see, there a ton of div tags nested within other div tags. While sometimes it is unavoidable to use div tags when you want to target a lot of sections for different styling, it is important to not go overboard with them when they can be avoided, especially when they don’t make sense semantically to use. In my example, it would make more sense to use an unordered list to nest my content:

Although I still have two div tags nested in my new unordered list, my code is more readable overall, and shows the readers that this section contains a list of gallery items that all share a similar structure.
Reason #2: Performance — Less is more
There are also other reasons as to why it is better to use an unordered list in place of div tags for a gallery. One good reason is that you will potentially avoid a lot more work. Say I have a lot of other content in the above section that’s structured with div tags. If I create a gallery with div tags as well, this may mean adding a lot more classes and/or ids, which could have been avoided if I had gone the unordered list route. A good rule of thumb is to always keep code as clear and concise as possible, especially from a performance perspective.
Reason #3: Search Engine Optimization
Search Engine Optimization (SEO) is also an important factor to consider as well. It is definitely more “SEO friendly” to be semantic with code, and avoiding the use of div tags truly helps with that. I’m not going to get too much into SEO, as that topic alone warrants its own post, but here is an interesting article on how lists can influence the semantics of a web page, as well as how they affect search result rankings: http://www.pitstopmedia.com/sem/list-items-seo
