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">