Skip to main content

I Need to Stop Misusing Divs

I a certainly not a skilled or expert front end developer. While I'm more than capable of creating pages I lack any design magic to make them look half decent. Despite this one area where improvement can be made is in my markup itself.

Over the past few months I've spent most of my time getting to grips with recent additions and changes in the HTML5 and CSS3 space. During this one area stood out, my misuse of the division element or <div>.

Before the addition of the newer elements pages nested with div after div was normal. However this is no longer the case. From this point onwards I will be ensuring that every time I introduce a div element I question whether a more appropriate element should be used.

The HTML div element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as article or nav) is appropriate.

Semantic Meaning

Two huge side effects that are often overlooked when ignoring semantic markup is device compatibility with screen readers or other input methods and future proofing content.

Many people wrongly assume that all users are either keyboard/mouse or mobile (touch) users. By using semantic elements, users of other input methods get a much smoother experience. It is possible to jump to navigation or content without having to page through dozens of unrelated sections added only for stylistic purposes. Having used such devices first hand, the joy such simple changes make are outstanding.

Using semantic elements also helps future proof content. Screen scraping and other technologies can be simplified massively if content is correctly marked up. The thought that pages of content written now will still be used and accessible decades from now is incredible.

Lessons

The lesson here is an easy one. Every time you write a generic division element, stop and ask yourself is there an element with more semantic meaning that will do the same job?

Comments

Popular posts from this blog

Constant Object Anti Pattern

Most constants are used to remove magic numbers or variables that lack context. A classic example would be code littered with the number 7. What does this refer to exactly? If this was replaced with DaysInWeek or similar, much clarity is provided. You can determine that code performing offsets would be adding days, rather than a mysterious number seven.Sadly a common pattern which uses constants is the use of a single constant file or object. The beauty of constants is clarity, and the obvious fact such variables are fixed. When a constant container is used, constants are simply lumped together. These can grow in size and often become a dumping ground for all values within the application.A disadvantage of this pattern is the actual value is hidden. While a friendly variable name is great, there will come a time where you will want to know the actual value. This forces you to navigate, if only to peek at the value within the constant object. A solution is to simple perform a refactor …

Three Steps to Code Quality via TDD

Common complaints and problems that I've both encountered and hear other developers raise when it comes to the practice of Test Driven Development are: Impossible to refactor without all the tests breakingMinor changes require hours of changes to test codeTest setup is huge, slow to write and difficult to understandThe use of test doubles (mocks, stubs and fakes is confusing)Over the next three posts I will demonstrate three easy steps that can resolve the problems above. In turn this will allow developers to gain one of the benefits that TDD promises - the ability to refactor your code mercifully in order to improve code quality.StepsStop Making Everything PublicLimit the Amount of Dependencies you Use A Unit is Not Always a Method or ClassCode quality is a tricky subject and highly subjective, however if you follow the three guidelines above you should have the ability to radically change implementation details and therefore improve code quality when needed.

DRY vs DAMP in Tests

In the previous post I mentioned that duplication in tests is not always bad. Sometimes duplication becomes a problem. Tests can become large or virtually identically excluding a few lines. Changes to these tests can take a while and increase the maintenance overhead. At this point, DRY violations need to be resolved.SolutionsTest HelpersA common solution is to extract common functionality into setup methods or other helper utilities. While this will remove and reduce duplication this can make tests a bit harder to read as the test is now split amongst unrelated components. There is a limit to how useful such extractions can help as each test may need to do something slightly differently.DAMP - Descriptive and Meaningful PhrasesDescriptive and Meaningful Phrases is the alter ego of DRY. DAMP tests often use the builder pattern to construct the System Under Test. This allows calls to be chained in a fluent API style, similar to the Page Object Pattern. Internally the implementation wil…