HTML Secrets – Web Application Architecture Design Tips


Whatever site or web application you’re working on, you probrably going to use HTML.

These are the tips I’ve learned over time:


Declare the document doctype. before your html tag.

for HTML 5:

<!DOCTYPE html>
<!DOCTYPE html>

for older Doctypes like HTML 4.01 Strict/Transitional/Frameset etc… you can browse here.


Declaring Encodings

For HTML or XHTML served as HTML, you should always use the


tag inside


. Example:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

For XHTML, you need a slash at the end:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />


Declare Sections

Use the HTML Tags to declare your sections:

<nav>, <section>, <article>, <aside>, etc



Test your html against validators.

Validate your html(s): The W3C Markup Validation Service

Check needed pages Against Facebook developer: Debugger – Facebook Developers

Scan your website using Microsft modern.IE for IE compatibilty.



Use CSS Styling only! Never style inside your html. don’t use depreceated tags like <Center> or align=x inside your divs. your html without style should be like a flat document. default style. all the styling should and must be declared using css.

I like to include all the styles inside the <head> tag. I’ll link to a .css file only when it’s really neccesery (mostly when it’s outside library).



Always declare images width & height (where possible) in your css. add alt tag.
I prefer png, but whatever format, try for interlaced, and pre-crop them to needed size (if possible).



Use some tracking system on everyone of your pages (like google analytics)



Don’t use deprecated syntax!

Don’t use frames, <center>, <font>, align=center or any depreceated html tags. it WILL make you trouble later.

for Example: new mobile browsers will change it’s display with align=center for compatible mode, which you don’t want. use CSS for styling only!



Develop with mobile i7n mind! your HTML should viewed correctly on mobile, a-grade mobile, tablets and desktops. There are many ways to implement this, I like this method (using CSS Media Queries):

[code lang=”xml” inline=”yes”]
<link href=”css/default.css” rel=”stylesheet” media=”screen, handheld, print, projection”>
<link href=”css/a-grade-mobile.css” rel=”stylesheet” media=”screen and (min-device-width:320px)”>
<link href=”css/desktop.css” rel=”stylesheet” media=”screen and (min-device-width:768px) and (min-width:768px), print, projection”>

<!–[if lt IE 9]>
<link href=”css/desktop.css” rel=”stylesheet” media=”all”>

<!–[if lt IE 8]>
<link href=”css/ie_7.css” rel=”stylesheet” media=”all”>

<!–[if lt IE 7]>
<link href=”css/ie_6_and_below.css” rel=”stylesheet” media=”all”>

You can use JQuery either.

check this list of Media Queries Templates

You can also use the @media meta to create different css for each device, but I like this method less.

[code lang=”xml” inline=”yes”]<link rel=”stylesheet” type=”text/css” media=”screen” href=”screen.css” />
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />
<link rel=”stylesheet” type=”text/css” media=”handheld” href=”handheld.css” />

Also, add those two meta for set the page width as the device.

[code lang=”xml” inline=”yes”]<meta name=”HandheldFriendly” content=”true” />
<meta name=”viewport” content=”width=device-width, height=device-height, user-scalable=no” />[/code]


Unobtrusive JavaScript

Seperate the behavior from markup.

instead of:

[code lang=”xml” inline=”yes”]<input type=”text” name=”date” onchange=”validateDate()” />[/code]

Use this:

[code lang=”js” inline=”yes”]<input type=”text” name=”date” id=”date” />

window.onload = function() {
document.getElementById(‘date’).onchange = validateDate; };[/code]

use namespaces for your js objects to avoid difficult to debug problems.

[code lang=”js” inline=”yes”] org.example = {};[/code]

read more here.



Use tables for only what they are for: display data in a table style. don’t use it (borderless) to arrange your html. this is CSS task.



It’s important to test your css on several (if not all popular) browsers while developing.

html shiv

new tags like <nav> or <article> aren’t supported and css won’t effect for this tags in IE 8 or lower.
to solve this issue just add to any html5 you need, right after the styles:

[code lang=”php” inline=”yes”]<!– Pulled from –>
<!–[if lt IE 9]>
<script src=”//”>


Dynamic App Links

Telephone (Dial) Link

Did you knew you can link phones on your site to: dial on mobile and skype on pc?

[code lang=”xml” inline=”yes”]<a href=”tel:1234567890″>Call (123) 456-7890</a>[/code]
for handheld devices


Add Windows-8 Meta

Read about adding Meta tags to your website to support Windows-8.


Have fun HTML-ing…

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.