HTML Coding Style - Poised Solutions

Poised Solutions HTML Coding Style

Poised Solutions has developed an HTML coding style over the years that helps reduce error, and increase flexibility when coding in HTML. This style is not suited for all, and at times Poised Solutions doesn't use this style, but over the years the style has evolved to be quite powerful for understanding and maintaining HTML code.

HTML Coding Style Example

<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html
dir  = "ltr"
lang = "en"
><head
>
<title
>HTML Coding Style - Poised Solutions</title>
</head><body
id    = "html_coding_style"
title = "HTML Coding Style"
><div
title = "HTML Coding Style"
class = "page"
><h1
title = "HTML Coding Style"
>HTML Coding Style</h1>

<p
title = "HTML Coding Style"
><b
title = "Poised Solutions"
>Poised Solutions</b> <i
title = "HTML Coding Style"
>HTML Coding Style</i> ...</p>

<h3
title = "Much Ado About Nothing Act 5"
>Much Ado About Nothing Act 5</h3>

<p
title = "Much Ado About Nothing Act 5"
>I pray thee peace, I will be flesh and blood;<br
>For there was never yet philosopher<br
>That could endure the toothache patiently,<br
>However they have writ the style of gods,<br
>And made a push at chance and sufferance.</p>

<div
class = "hr"
><hr
></div>

<h6
title = "Anatomy of an HTML Tag"
>Anatomy of an HTML Tag</h6>

<div
title = "Anatomy of an HTML Tag"
class = "diagram"
><img
src    = "/img/anatomy-of-an-html-tag.png"
alt    = "Anatomy of an HTML Tag"
title  = "Anatomy of an HTML Tag"
width  = "531"
height = "304"
></div>

</div>
</body>
</html>

HTML Coding Style Explained

The above HTML Coding Style requires a degree of explanation, it is not radically different from what you would normally see, but it uses some of the flexibility inside of the opening tag, and it pays homage to the problem of unintended white space.

HTML Tags are made up of a number of different parts, the diagram below shows the naming conventions used to describe an HTML tag.

Anatomy of an HTML Tag

Attributes on Separate Lines

By placing attributes on separate lines, it makes it much easier to introduce and remove attributes. By moving the closing angle bracket on the opening tag to a new line that flexibility of attribute introduction is maintained. It is a common problem in most programming languages, the placement of the terminating mark with lists, and if possible moving it to a new line is best, even if no attributes are initially expressed (head opening tag).

Line Length 60 Characters

Setting a line length of 60 characters max (soft maximum), allows around 3 to 4 HTML documents to be opened at once and split horizontally in an editor. The attributes on separate lines helps this style, as the introduction of an inline tag generally moves more to a new line. A new line is a space in standard HTML, so the lines will generally be slightly less than 60 characters a piece. This is a soft guideline as URIs (normally href or src attribute values), should not really be split.

No Tabbing to Show Enclosure

A lot of HTML developers have a programming background. In most programming languages the developer is encouraged to tab to show enclosure of code, this is a good practice when showing how a conditional or a function extends, but in a markup language where closing tags exist it is a bit of an overkill. The disadvantages are extending beyond the 60 character limit, and the introduction of white space into the actual document render. HTML on render reduces white space characters to one, not none.

No Space Before Enclosed Block Tags

Only block tags can be enclosed by other block tags, that is an HTML guideline, so this refers to block tags in block tags. The jury is out a little on this guideline as most browsers accommodate the breaking of this guideline. But, if white space is left then a space can be rendered. An example is the h1 tag above, but a more complicated example is the positioning of the head and the body opening tags. Once the tags is opened then the this guideline can be relaxed to aid readability. In fact if readability is desired more than adhering this guideline may not be wise, but if you do notice a pixel shift then applying this guideline can get get rid of that (it can occur because the margin is less than the line height generated by the white space).

Align Attributes on Equals Sign

By aligning attributes on the equals sign it makes it simpler to spot problems such as missed quotes, or even spelling mistakes.

Order Attribute by Name Length

Ordering attributes by name length just makes the document look a bit neater, and neater markup makes it easier to spot any mistakes. By using this method ordering in the same size attributes tends to also take on some meaning to the code, for example alt is 3 characters and title is 5, by keeping alt at the bottom of the threes and title at the top of the fives the values can easily be kept together (see the img tag above).

Coding Style Conclusion

The above are just guidelines, using them makes page creation quite simple, and flexible but of course the best guidelines to use are the ones that work for you and a given project.

For those who take a peek at the source code on this site, maybe shocked to see markup not follow all the above guidelines, in most instances though that will due to auto generated code, using a third party system. The code display is a good example of this, and at some point the system will be replaced with a bespoke solution, and most likely follow the above guidelines. Templating systems can also change the code layout a bit, the important thing is render and the real source code though. So, if you wanted to speed up delivery a bit, then removing excess whitespace could be done, but working from source code that adheres to the guidelines can still be achieved.

Beyond Basic Coding Style

Coding style for some of the other major HTML constructs have also been done. These go beyond the basic coding style and look at the more complex HTML structures.