Basics
These five lines are essential to any site which is going work to on all devices and be accessible – every page should to begin with them.
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,user-scalable=yes">
lang=en will have to be changed if the site is in another language, so a text-to-speech reader would know how to pronounce the words.
Here are the HTML5 tags which are most frequently used within the <body> and help give your pages a meaningful structure so they can be navigated by a machine reader or someone using a screen reader.
<header>
<hgroup>
<nav>
<article>
<section>
<figure>
<figcaption>
<aside>
<footer>
This model includes all these tags and, if you look at the source, you can see how they work.
So images scale on different devices
If you use images and want them to scale on different devices, add this to your style sheet:
img{width:100%;height:auto}. The % can be varied.
And this in the body: <img src="foo.jpg"alt="foo">
Color
If you use color in your website and set it in your style sheet, don't use color names like lightslategray (hex: #789) or red (hex: #f00).
Use hex, rgb or hsl colors, for instance – #f00 or #ff0000, or rgb(255, 0, 0), or hsl(0, 100%, 50%) for brightest red ✸.
Then you can easily make changes in them ✸ ✸ (hex: #f70 and #f07) to reset the color. This matters particularly when a site is being projected and needs to be edited depending on a specific situation.