Front-end web development could once be described as a waking nightmare, what with the variety of browsers, use of proprietary syntaxes, lack of compliance, etc… Fast forward to 2016, in many ways, things have only gotten worse. Now we have a gazzilion screen resolutions to contend with, a lot of bleeding-edge technologies emerging, and an environment that is in constant evolution. All of this makes producing clean, semantic, and cross-browser code a hard job indeed. Over the next two months, I’ll be presenting a few guidelines for coding, testing, debugging, and profiling your websites. After today’s article on coding, expect one on testing within a few weeks; the following two parts will be posted next month.
ABC – Always Be Closing (Tags that Is)
Like Alec Baldwin said in his classic Glengarry Glen Ross scene, Always Be Closing (warning: clip contains strong language)! You can get away with a lot of missing closing tags, but it’s not recommended because different browsers often interpret the incomplete markup in their own way. In some cases, it will arrange elements in a strange way. It might even omit some elements completely!
To make each element’s start and end tags easily discernible in the markup, borrow a page from programming standards and indent each nested element.
<div id="container"> <div id="header" class="first center"> ... </div> </div>
Another trick is to including a comment beside each closing tag that identifies the element that it belongs to.
<div id="container"> <div id="header" class="first center"> ... </div><!-- #header.first.center --> </div><!-- #container -->
Declare the HTML5 DOCTYPE
The DOCTYPE tag goes at the very top of the page before the opening HTML tag and tells the browser whether the page contains HTML, XHTML, or a mix of both. Using an older DOCTYPE tag can cause the browser to interpret the markup incorrectly. All you need to declare HTML5 content is this:
For more information on the HTML5 DOCTYPE check out this article I wrote a little while ago.
Separate Structure, Presentation, and Behavior, with some Divergence
The maxim of keeping structure, presentation, and behavior separate has been around a while, but it bears revisiting, especially since the rules have changed a bit in recent years.
In recent years, the lines have begun to blur. CSS now includes behaviors like :hover and animations as well as structure with the ::before and ::after pseudo elements. HTML has similar overlap: its new <input> types include aspects of both behavior and presentation. Where one of the structure, presentation, and behavior content types encroaches into another’s realm, that is divergence. There’s nothing wrong with a little divergence as such, just be cognizant of where and why you are using it. I myself introduced divergence into my content in my Create a Chart Plot Line Using a Pure HTML and CSS Solution article when I employed the ::after pseudo element to draw a horizontal line.
If you’ve only got a couple of minified scripts, placing them in the head won’t be a deal breaker, but once you’ve got more than that, it might be time to move them to the bottom. If you do have variables that need to be initialized right away, you can always leave those in the HEAD:
Robert Nyman discussed this idea on his site way back in 2008, while managing to make it all sound rather sexy!
Got any favorite coding standards of your own that weren’t included here? Fear not, I plan on adding to this list at some point. Just add your suggestions to the comments and they may be included.