Standards and best practices

HTML best practices

Document type

Use HTML5 for all HTML documents: <!DOCTYPE html>. Do not use XHTML.

HTML validity

Use valid HTML where possible. Validate your markup using the W3C HTML validator.

Semantic HTML

Use HTML according to its purpose. Using native HTML elements to do the job they have been created for is important for accessibility. They give you a lot of browser functionality out of the box: if you choose to use custom elements, you are responsible for recreating all of that functionality.

It is also worth noting that browsers build the accessibility tree by making assumptions about page elements and the sort of content they are likely to contain. Using the correct HTML elements helps the browser (and assistive technology) make sense of your page.

Separation of concerns

Separate structure (markup) from presentation (styles) from behaviour (scripts) and try to keep the interaction between the three to an absolute minimum.

Documents and templates should contain only HTML, solely for serving structural purposes. Move everything presentational into style sheets and move everything behavioural into scripts.

Type attributes

Do not use type attributes for style sheets (unless you are not using CSS) or for scripts (unless you are not using JavaScript). They aren't necessary because HTML5 implies text/css and text/javascript as defaults.

<!-- Recommended approach -->
<link rel="stylesheet" href="/dist/styles/core.css" media="screen">

<script src="/dist/js/main.js" defer></script>

Quotation marks

Use double ("") rather than single ('') quotation marks for the value of attributes.

<input type="submit" value="Search" name="searchSubmit">