Introduction

Welcome to Welkup's How to Build a Great Website series. This series doesn’t aim to be a definitive guide on syntax. The web is already full of great resources for that. Instead, it focuses more on the intangibles- good practices that may not be evident to the new web developer.  Not every term will be elaborated on, so you are encouraged to discover through research as appropriate. At the end of the road, you will have all of the tools necessary to unleash a great website. That road starts with great markup.

In part one of Welkup's How to Build a Website series, we will delve into the world of angle brackets, double quotes, and slashes. We are talking about web page markup, where Hypertext Markup Language (HTML) is the vernacular. In upcoming articles, we will add flare with Cascading Style Sheets (CSS) (Part 2) and interactivity with JavaScript (Part 3).

Markup defines the structure of the web page. Whether your web page is a document or an interactive application, markup is the framework, the skeleton that houses your content. It splits your page into sections like the header, body, and footer. Great markup has important implications on maintainability, performance, search engine optimization (SEO), and accessibility.

Maintainability

The most important implication of great markup is maintainability. Your HTML source code will need to be maintained by you and possibly other developers, so it should be easy to manipulate. Maintainable markup is readable markup; readable markup is consistent, sensible, and minimal.

Consistency in markup will make your document easier to read by creating a familiar flow of characters. Type your tags in lower case, and use double quotes around attributes. Be mindful of your use of white-space. Consistent indentation is crucial to aiding the reader in visualizing the nested nature of the page. Use tabs or blocks of four spaces, but try not to mix them. Tag use should be consistent, as well. For example, with text that is to be read, do not use <p> tags in one section and a <div> (or no tag at all) in another. Above all, the tags you do end up using should make sense.

Sensible tag selection means using appropriate tags in the appropriate contexts. When deciding what tag to use in a given context, it may be helpful to think of HTML as a word processor. A word processor has rules it respects. When you start typing in Microsoft Word, the software does not run all of the text together. It separates text into paragraphs. When you key in a list, your list items are marked with a bullet or number. In general, you should format your HTML document like a word processor would format it. For instance, surround your paragraphs in paragraph tags, organize tabular data into tables, and enumerate items with ordered lists. Be as expressive as possible with the available tags. The best reference for available tags is the HTML specification. This may be a bit overwhelming for most cases, though. For a more manageable reference, check out W3Schools.com.

Good markup means concise markup. The number of tags should be kept to a minimum. You should become a tag miser and make every tag serve a purpose. The fewer tags, the easier it is for the developer to “take it all in.” As a bonus, we'll be bettering the performance of the website. (This is what is known as a “win-win.”)

Performance

Controlling the tag count not only makes the document easier to read, it also improves performance. Your raw file size will be smaller, meaning faster downloads and lower bandwidth usage. The size of the Document Object Model (DOM) in memory will also decrease, meaning a lower memory footprint and faster processing of changes. Every time a style is changed on an element in the DOM, the entire web page is redrawn. The more tags, the bigger the DOM tree, and the longer it takes to redraw.

How you write your markup will affect the way browsers render web pages, and there are a few common pitfalls to avoid. For instance, <script> tags for your JavaScript will cause the browser to initialize a synchronous (blocking) connection to download the script. This means that the browser will stop rendering the page until it gets back that JavaScript and executes it. To prevent this, <script> tags should be placed as close to the bottom of the file as possible (still inside the <body> tag, of course). Sometimes, it is desirable to have the script loaded prior to rendering the page. In this case, the <script> tag would go into the <head>.

Another common hazard in web page creation is the use of HTML tables for layout. Tables can hurt performance because their default layout algorithm requires all of the content to be loaded before it can be drawn. You can circumvent this by specifying a fixed width layout algorithm in CSS and by specifying widths on each column, but the better approach is to use CSS grids. (We will cover the importance of CSS grids in Part 2.) Speeding up page load time is critical because the quicker the page loads, the more likely the user will stick around. Incidentally, page load times will also affect your site's SEO score.

Search Engine Optimization

Search engines like to index high quality web pages. In general, whatever you can do to better the quality of your markup will boost your website ranking. What we've covered on performance and sensible tags is all highly relevant.

Being expressive with the available tags will help you with SEO, but this expression is meaningless if you do not adhere to your declared DOCTYPE. The DOCTYPE definition at the beginning of the HTML document tells the browser what dialect of HTML you are using. W3C provides an online validation service that will test the correctness of your markup according to your DOCTYPE. You can raise your site's SEO score by ensuring it passes this test.

Being a good Internet citizen will only get you so far with SEO- you must also understand the concept of keywords. SEO associates certain keywords or phrases with your site, and sites compete to gain relevance with respect to those keywords. When search engines look for keywords in the tags of your site, not all tags are created equally. One of the most important tags for SEO is the <title> tag in the head section. Keywords in the title will be treated with more respect. The header tags like <h1> and <h2> also have greater impact. <meta> tags for keyword and description were originally intended for search engines, but have been so ritually abused, search engines (to my knowledge) no longer use them when calculating the SEO score.

Accessibility

Great markup can be used to make our websites more accessible. By accessibility, I’m referring to how easy it is for a diverse audience to experience your web page. In most cases, the web page should be usable by non-techies, navigable by the blind, accessible with the keyboard, and functional without JavaScript.

When developing a web site, we may need to keep in mind those users that do not use computers often. By keeping it simple and using common design patterns, these users will be less intimidated and run into fewer issues. While it's always fun to innovate, some aspects of the web experience should probably be left alone. These will already be the default behavior in the browser, so the trick is to avoid meddling.

The following are just a few examples of how to keep it simple. Hyperlinks should use the pointer cursor (hand with the index finger pointed outward) and should be underlined or have a hover effect. If you use icons on the page, use the title attribute for an explanatory tooltip, but avoid tooltips that simply reiterate information. When a link or form control has focus, it should be highlighted in some manner. You should try to avoid scroll bars within elements (so called, inline scrollbars) and have the scrollbar positioned on the right hand side of the page (assuming left-to-right text direction, of course). The tab flow of the page should be logical, following the natural flow of the page. Maintaining tab flow is especially important when developing for the blind.

Blind users will work with a screen reader to read your web page. A screen reader is highly dependent upon good markup to function properly. Bad markup can make a page difficult to navigate or make the screen reader super annoying. Users use keyboard shortcuts to navigate around a page, many of which are focused on traversing specific tags, such as header tags, form elements, and links. Of special importance is connecting <label> tags to input controls using the label's for attribute. This ensures that the label will be announced when the form control gains focus. Another important consideration is avoiding links such as Click Here that make no sense out of their surrounding context.

If your markup is awesome and your web page is a document to be read, it will usually work fine for screen readers. In the world of web applications, however, screen readers need a little extra help. Accessible Rich Internet Applications (ARIA) is a standard set of attributes that can be added to your tags to help screen readers accommodate complicated widgets common in web applications. Widgets are created through a combination of HTML, CSS, and JavaScript, and include such interfaces as dialogs, trees, tabs, and sliders. With ARIA, you can even make drag and drop work with the keyboard!

Anything that you can do with your mouse, you should be able to accomplish using only the keyboard, too. It should also be easy and natural. If your page has a ton of links in its menu, it should be possible to tab past the menu easily to get to the main page content. Instead of tabbing across every single link, you can tab into the section, and then use the arrow keys to further navigate within the section. Use the tabindex attribute to give you finer control over tab flow, but be careful not to abuse it. For something like drag-and-drop, you may need to provide an alternative method for performing the same function.

You can use JavaScript to enhance your website, but the website should still function if JavaScript is disabled. This probably means a severe degradation in the experience, but users that disable it in this day and age take that risk. Loading a basic version of your site, and then jazzing it up with JavaScript and/or CSS is a concept called progressive enhancement. For instance, you may begin with a normal HTML button, but your JavaScript and CSS will transform that button into a richer, DHTML button. If JavaScript is disabled, the button still works!

Final Words

When it comes to website development, it is common for developers to focus on CSS and JavaScript and perhaps not spend due diligence on markup. In Part 1 of this series, we have covered some important benefits gained by writing great markup. We've seen improvements in maintainability, performance, SEO score, and accessibility. In the next installment of this series, we will look more closely into the world of CSS.