5 Best Practices for HTML Beautification and Content Enrichment

Utilize the shortest URI possible.

Should you use a relative URI, an absolute URI, fully-qualified URIs, or something else whenever you create a link, include an image, or write anything else that refers a separate file on the Web? URI variations are so widespread that it's understandable for folks to wonder, "Which one should we use? ”

Use the shortest value you can, is a straightforward rule of thumb. Shorter URIs provide advantages for optimization as well as being more portable. When /my-page/ will do, there is minimal need to encode a link with a URI like http://example.com/my-page/. You will have a broken link if a fully-qualified URI was used and your domain name changes in the future. If you're connecting to a distant domain, you may even safely skip the scheme part of the URI unless your own content will be published using several protocols (like https: in addition to http:).

Consistently use markup patterns

Patterns are a very potent method that enhances functionality, code reuse, and clarity. Microformats are really just established and well-known markup patterns. Actually, the ability to submit groups of these patterns to processing tools is what gives them their utility.

Using your own patterns regularly will help you even if you don't utilize microformats in your markup. Imagine the hassle of having to cope with a site's logo being marked up differently on each page for a dramatic illustration. You may have h1 id="logo">.../h1> on the home page and image id="sitelogo"... /> on an article page. In an effort to be unobtrusive, you'll probably wind up combining CSS rules to cover both scenarios and adding extra code to scripts. That is terrifying!

Therefore, a pattern might start off simply by utilizing the same markup for a site's logo, but it can grow in value to you as you adhere to other rules. You shouldn't use div id="ftr"> if you're going to utilize div id="Header">. At SitePoint, for instance, blocks of code are consistently marked up the same manner (using pre>code>.../code>/pre>), allowing style and behavior to be applied uniformly site-wide on top of those components.

Utilize class and id attributes as little as possible

One advantage of patterns that is simple to ignore is that, when properly created, they significantly enhance the structure of your markup. As a result, you won't need to style as many components using IDs or classes, which keeps your markup concise. Additionally, because your CSS selectors will leverage the structural context of the HTML to offer the same context in CSS files, it keeps your style sheets simpler to grasp.

In fact, refraining from using IDs or classes at all can be a really illuminating experience. If your markup is properly organized, you may use the simple descendant combinator to do a surprising amount of the style you want. There is less need for arbitrary style hooks as support for CSS selectors that leverage structural context (like:last-child and:only-child) increases.

This has a conflict with the preceding suggestion because if you rely too much on the structural context of your markup, you can end yourself adding more components to make room for your style sheet. Making well-structured, semantic markup is a problem since it requires balancing these two extremes.

Enhance material by including title elements and other metadata.

HTML offers a variety of ways by which you may include metadata or additional material into your markup, despite its constraints. The user is given to rich, layered interaction on web sites that do fully use them, using nothing fancier than basic HTML elements and properties. This is best illustrated via the title attribute.

Not just links (or anchors or an elements) can have a title property applied to them. It may be used with a variety of components, including blockquote, ul, and pre. When a user hovers their mouse over an element, title attributes frequently appear as tooltips, much like they do for links, and they are always meant to give the element with further information.

This metadata may be used in a number of contexts, including semantics and interaction possibilities, of course. Consider using markup similar to this if you're quoting from a speech, for instance:

The tooltip "Text of Barack Obama's Inaugural Address" that appears when the user's cursor hovers over this passage on your website gives them more context for their interaction. It appears as though you are encouraging people to actively investigate and learn more about your stuff. Additionally, you can extract the metadata from the title element and graphically display it using a CSS rule like the one below.

The rel property is an additional option you have. For instance, a straightforward pattern to designate connections to distant sites is rel="external." You may also utilize the rel property within a link element in your page's head to offer suggestions for proper sequential navigation if you've produced a piece that has been divided up into numerous separate pieces, like a series of articles:

These extra components will activate interfaces like Opera's Navigation Bar.

To improve readability and make maintenance easier, use comments and white space.

One of the most discouraging things to see is difficult-to-read code, regardless of the scale of the project. The ability of your fellow humans to read your code is maybe more crucial than the ability of your computers. As a result, it's really important to pay attention to both what you write and how you code.

HTML comments are rarely used, yet they may have a significant impact. Using them to indicate the closing tags of items is one straightforward application. For instance, a lot of popular blog layouts have nested div components, as shown in the extremely simple example below:

Of fact, in practice closing tags seldom follow their initial tags, making it challenging to identify which closing tags shut which parts right once. You could scroll up in the file for 30 seconds to find out. Even while it may not seem like much, if you repeat this process 100 times every day, you will spend over an hour (50 minutes) scrolling up through text files.

If your templates are spread over numerous files and a tag is opened in one file but closed in another, the problem is made even worse. Your time spent looking for opening tags has increased. A situation like this is ideal for using HTML comments:

Whitespace that is consistent is also crucial. This is not a tab vs. space issue; rather, it is an illustration of how to choose (or create) a convention that works for you and your team and then adhere to it steadfastly over the course of the project. Finally, keep in mind that if you utilize intelligent/automated build systems, any whitespace you use in a source template can be compressed in a production version.

In the end, you wouldn't even notice all the "small things" that separate excellent code from amazing code since they are constantly done correctly. If you don't already write markup in accordance with any of these suggestions, you should start!