HTML is a front-end language which is used to create the structure of a website. The Standards for HTML are among the earliest Web Standards announced by the World Wide Web Consortium (W3C) when it was set up in 1994. It follows a standardised set of tags that denote certain content.

With over 100 tags that can but used on websites it can be a minefield learning HTML code, uses, and best practices. These tags must be used semantically and nested correctly, making it even more tricky to build fully compliant, semantic websites. Some tags can only be used with other tags, and others can’t be used inside certain tags. As well as HTML tags, there are also attributes that can be assigned to the tags. These attributes are added to the tags to style the element, or pass data to other scripts.

1. Standards Compliant Markup

Doctype

Web browsers need to be told that the file that is being viewed is a Web page. To do this, a Doctype is declared. The Doctype used to be quite complex, but now with HTML5, it has become a lot simpler. This is an important part of an HTML page setup to ensure the page is loaded correctly.

Closing Tags

HTML is a rather forgiving language, and as such a lot of tags can be closed by browsers automatically. This however, is not Standards compliant and could lead to issues rendering the page. Due to this forgiving nature, some Web Designers and Developers pick up poor coding habits by not closing HTML tags. Closing HTML tags will prevent any errors when loading the page, and ensures that the page will load as quickly as possible.

Some tags such as <img />, <link /> and <input /> are ‘self-closing’ tags, meaning that they can be closed inside the opening tag without the need for a specific closing tag. This is because the information they hold is stored in attributes, without any data between specific opening and closing tags.

IDs and Classes

IDs and Classes are used to link the HMTL to the CSS to style particular elements. IDs are unique, and can only be used once on a page. There can also only be one ID used per element. IDs could be used multiple times within the same website, but not within the same page. On the other hand, Classes can be used multiple times within the same page to style multiple elements. They can also have multiple classes per element, separated by a space, all within the ‘class’ attribute.

Classes have no functionality within the browser, whereas IDs can be linked to in URLs. Linking to an ID allows the page to be loaded in a certain location, such as linking to a specific comment on a blog post. The example below shows comment containers, with an ID to link to, a class to style the comments, and a class to style a featured comment slightly differently. The classes describe what to expect within the element, and do not give any indication to the presentation of the comments. This is because the layout could change, and the classes no longer fit the style of the element.

Tables

Tables should only be used on websites for tabular data. Some Web Designers and Developers get tabular data confused with repeating data. This is quite a common issue in shopping carts. Tabular data is data with does not make sense without column headings. Most shopping carts have column headers for ‘Item’, ‘Price per Item’, ‘Quantity’, and ‘Total Price’. It is possible to remove these column headings, and the information still make sense, so there is no need for shopping carts to be tables.

Tables are also more difficult for screen readers to read the structure of the website, making the whole site inaccessible for disabled users. As tables are built in rows, this is how the screen reader will read the content of the page, and will often read sidebar content before the rest of the main page content.

There are however uses where tables are the only option. One of these is HTML emails. Email rendering engines lag behind Web browsers in terms of technology support. Tables are needed to create the structure of the email so that it appears the same in the majority of email clients. There are still chances where the email could not show correctly, which all depends on the email client being used.

Lowercase Markup

The markup written for websites should all be in lowercase. This is an industry standard practice that improves the readability of code. HTML that is written in capitals will still be rendered by a Web browser without any issues, but the code becomes harder to read and maintain.

Script Tags

JavaScript tags should be placed at the end of the HTML file, just before the closing </body> tag. This will allow the whole page will load before the scripts are ran. The JavaScript tag is a blocking tag, meaning the rest of the page is not loaded until after the script has loaded. If the script cannot be found, the whole page will stop loading.

Semantic Code

The correct tags must be used in the correct places. Some Web Designers and Developers use certain tags in the wrong places, because they have seen them being used incorrectly in tutorials and demos online. Some Designers and Developers think tags have certain meanings because of the form of the tag. For example, the <i> tag is used by some Designers and Developers for icons. This tag is not used for icons, and had an original semantic meaning of ‘italics’. Nowadays, the <i> tag is only to be used when there is not a more semantically correct element available for the context.

2. Minimal and Valid

Websites should use the least amount of code needed to create the layout required. This makes the code easier to maintain, and allows other developers to add new functionality to an existing website easily. Using the minimal amount of code also allows Web browsers to render the content of the page quicker, which will have a positive impact on the user experience.

Using valid, semantically structured code will allow Web browsers to correctly render the items of the page, and ensure that they are interacted with correctly, such as allowing links to open new pages.

3. Avoid Unnecessary Presentational Code

Some Web Designers and Developers have picked up poor coding practices by adding certain CSS styling to classes, and simply specifying the styles that apply to that element. This creates elements with loads of unnecessary classes to style the element. It is also impossible for search engine crawlers to tell what the element may contain, which could lead to poor SEO rankings. Search engines also crawl the HTML of the page including the attribute values, as well as the page content, title and meta tags.

When naming classes, the class should describe the element as closely as possible, rather than specifying the styles that should be applied to that particular tag. Many poor coding practices have stemmed from Web Designers and Developers using certain frameworks, such as Twitter Bootstrap, which create non-sematic code. Bootstrap uses classes such as col-md-8 and col-md-4 which are used to create a layout based on a 12-column grid. This creates a very strict layout and removes any creativity from the layout options available.  Twitter Bootstrap also uses a poor method of creating responsive websites, which will be covered in a future post.

Below is an example of code which specifies the styles which should be applied to the element, creating a number of classes on the wrapper element. The inner elements use Twitter Bootstrap classes which create a wide column and a thinner column. It’s impossible to tell what the elements contain, from a code point of view, and search engines will not be able to understand the elements either.

Whereas below is a more semantically correct structure of class names. The class names describe the wrapper element as containing ‘page items’. The inner element class names describe the elements as being ‘page content’ and ‘page side’. These classes are informative, describing what the element contains, and also tells search engine crawlers what the elements contain.

4. Titles & Meta Tags

Titles and meta tags must be added to the pages of a website in order for search engines to index the content. They also provide descriptions to search engines which are displayed to the user. An example of the output on the popular search engine, Google, is shown below.

These are just a few of the wide range of Web Standards and best practices regarding HTML.