50 HTML Best Practices & Guidelines to Build Better Web Projects

Image for post
Image for post

Check Other Best Practices List

1 — Avoid Inline Style

2 — Add critical style first the rest later

3 — Avoid Script tag with code when possible

4 — Script Tags go at the bottom

5 — Reduce the number of external links

// tell the browser which links to prioritize
<link rel="preload" ... />
<link rel="prefetch" ... />
// tell the browser to fetch while parsing the page
<script async />
// tell the browser you need this after parsing
<script defer/>

6 — Always add an alt tag to images

7 — Don’t forget the Page Title

<title>Before Semicolon - About Page</title>
<title>Before Semicolon - Tech Videos & Blog</title>
<title>My Super Cool Article Tittle</title>

8 — Some elements tags require a title

<link href="reset.css" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" title="Default Style">
Alternate stylesheet
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">
<abbr title="Cascading Style Sheets">CSS</abbr>
<input type="password" id="pwd" name="pwd"
pattern=".{8,}" title="Eight or more characters">

9 — One h1 tag per page?

10 — Include meta tags

// tells the browser about the charset you want to use
<meta charset="utf-8">
// Tells the browser to redirect to
// beforesemicolon.com after 3 seconds
<meta http-equiv="refresh" content="3;url=https://beforesemicolon.com">
// tells twitter about your twitter acount
// when someone share your site link
<meta name="twitter:site" content="@beforesemicolon">
// tells the browser your site is responsive
<meta name="viewport" content="width=device-width, initial-scale=1">

11 — Add prefetch font links to the head

12 — Always use responsive meta tags

<meta name="viewport" content="width=device-width, initial-scale=1">

13 — Custom component needs to be accessible

14 — Prefer default role and built-in accessibility

// these are semantic tags
// they don't need role
<nav role="navigation">...</nav>
<button role="button">...</button>
// you may need to do this if your link
// works like a button
<a href="" role="button"/>

15 — Avoid adding HTML tags for styling purposes

16 — Avoid formatting the text yourself

17 — Use appropriate containers tags (div vs section vs article)

18 — Always go for semantic tags

19 — Dont use the IMG tag for non-content imagery

20 — Always close or self-close the tags

21 — Add favicon file to the root directory

22 — Add a manifest

23 —Always specify the DOCTYPE

<!DOCTYPE html>

24 — Page language

<html lang="en">

25 — Escape special chars (‘&<>”)

26 — Use data-* correctly

27 — Add DateTime to time tag

<time datetime="20:00">20:00</time>

28 — You can omit the “for” and “placeholder” attribute when used together

First Name:
<input type="text"/>

29 — Stop using <hgroup/> tag

30 — Follow a consistent HTML format

31 — Avoid SIBU tags

// Don't
<i class="icon-name"></i>
<p>A simple equation: <b>x</b> = <b>y</b> + 2 </p>
// Do
<span class="icon-name" aria-hidden="true"></span>
<p>A simple equation: <var>x</var> = <var>y</var> + 2 </p>

32 — Omit boolean attribute values

<button type="button" disabled/>
<input type='checkbox' checked/>

33 — You can put social links inside the address tag

34 — Dont put block tags inside inline tags

35 — Beware the base meta tag

<base href="https://www.beforesemicolon.com/">
<base href="/">

36 — Continue to use tables

37 — Get in the habit of using role and aria attributes

38 — Comments?

<section> ...
</section><!-- about section -->
</main><!-- main section -->

39 — Always specify multiple backup sources for media

<audio controls>
<source src="myAudio.mp3" type="audio/mpeg">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio.</p>
<video controls width="250">
<source src="flower.webm" type="video/webm">
<source src="flower.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video.</p>

40 — Prefer picture over images where it applies

<source srcset="surfer-240-200.jpg" media="(min-width: 800px)">
<img src="painted-hand-298-332.jpg" alt=""/>

41 — Stop supporting IE

42 — Avoid too much HTML

43 — Lazy load images

<img src="image.jpg" alt="..." loading="lazy">

44 — Always specify preload option for video

<video controls preload="none" poster="simple-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">

45 — Videos are better than gif at times

Image for post
Image for post

46 — Always specify the button type

<button type="button">My Button</button>
<input type="text"/>

47 — Blockquote wraps the tag containing the text and the q tag is almost useless

<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
"some quoted text"
// same as
<q>some quoted text</q>

48 — Avoid Div and Span tags

49 — Minify your HTML

50 — Validate your HTML


Blog & YouTube Channel for Web, UI & Software Development - beforesemicolon.comyoutube.com/c/BeforeSemicolon

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store