CentraTech Solutions 138 S Main St, Greensburg, PA 15601 (724) 600-0808

HTML5/CSS3 Best Practices

Declare the DocType

This is not an HTML tag, it is an instruction to the web browser about your page's HTML version. Always add the !DOCTYPE tag declaration to your HTML documents, so that the browser knows what type of document to expect.

								<!-- HTML 5 -->
								<!DOCTYPE html>

								<!-- HTML 4.01 Strict -->
								<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

								<!-- XHTML 1.0 Strict -->
								<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">     

Figures & Captions

This is an image of something interesting.

									<img src="path/to/image" alt="About image" />
										<p>This is an image of something interesting. </p>

Content Editable

  • You can edit each line.
  • You can even add new lines by pressing the enter key!
  • Try it for yourself!
								<ul contenteditable="true">
									<li> You can edit each line. </li>
									<li> You can even add new lines by pressing the enter key! </li>
									<li> Try it for yourself! </li>

Input Type Email

								<form action="" method="get">
									<label for="email">Email:</label>
									<input id="email" name="email" type="email" />

Input Type Url

								<form action="" method="get">
									<label for="url">Website URL:</label>
									<input id="url" name="url" type="url" />

Regular Epressions / Patterns

								<form action="" method="post">
									<label for="username">Create a Username: </label>
									<input type="text" name="username" id="username" placeholder="Username (4 to 10 chars)" pattern="[A-Za-z]{4,10}" required>
									<button type="submit">Go </button>

Required Form Fields

								<input id="required-email" name="required-email" type="email" required />
								<input id="required-email" name="required-email" type="email" required="required" />

AutoFocus Form Fields

								<input id="autofocus" name="autofocus" type="email" autofocus />
								<input id="autofocus" name="autofocus" type="email" autofocus="autofocus" />

Semantic Block Level Elements

Instead of staying with divs for everything, use new HTML 5 elements like <header>, <footer>, <article> and others. They work the same way but improve readability with less writing.

								/* Add support for older browsers */
								article, aside, figcaption, figure, footer, header, nav, section, menu { 
								   display: block;
								<!--[if IE]>
									<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

HTML5 Audio

								<audio autoplay="autoplay" controls="controls">
									<source src="file.ogg" />
									<source src="file.mp3" /> 
									<a>Download this file.</a>

HTML5 Video

								<video controls preload>
									<source src="/vids/CentraTech-Promo.mp4" type="video/mp4; codecs=avc1.42E01E, mp4a.40.2" />
									<p> Your browser is old. <a href="/vids/CentraTech-Promo.mp4">Download this video instead.</a> </p>

Mark Element

Search Results

Your search for "keyword" returned 0 results.

								<h3> Search Results </h3>
								<p> Your search for <mark>"keyword"</mark> returned 0 results. </p>

Input Range

								input {font-size: 14px; font-weight: bold; width: inherit;}
								input[type=range]:before {content: attr(min);}
								input[type=range]:after {content: attr(max);}
								<form method="post">
									<h1> Total Recall Awesomness Gauge </h1>
									<input type="range" name="range" min="0" max="10" step="1" value="">
									<output name="result">  </output>

File Format Icons

Using a clever combination of selectors, with CSS you can display a little file format icon next to download links of certain types.

									content: " " url("pdficon.png");

Stylize External Links

Using a clever combination of selectors, with CSS you can stylize your external links.

								a[href ^= "http"]:not([href *= "yourdomain."]) {
									background: transparent url(arrow.svg) no-repeat center right;
									padding-right: 16px;

Use Margin to Center Elements

Look ma!
I'm centered!
								.center-horizonal {
									margin: 0 auto;
								<div class="box center-horizonal">Look ma!<br>I'm centered!</div>

Use Text-transform

Text-transform is a highly-useful CSS property that allows you to "standardize" how text is formatted on your site.

RanDoM loWeR!

RanDoM uPpEr!

i was all lowercase!

								<h3 class="text-lower">RanDoM loWeR!</h3>
								<h3 class="text-upper">RanDoM uPpEr!</h3>
								<h3 class="text-proper">i was all lowercase!</h3>
								.text-lower {
									text-transform: lowercase;
								.text-upper {
									text-transform: uppercase;
								.text-proper {
									text-transform: capitalize;

Contact Us

CentraTech Solutions

138 South Main St
Greensburg, PA 15601
(724) 600-0808
[email protected]

Hours of Operation:

M - F: 9:00AM - 5:00PM
After hours & weekends by appointment