Standard way to approach a webpage structure

Monday, January 28, 2019

When I opened a webpage in 1998, I always wondered what it is made of. From my birth till today's date I always wondered that all the changes that happened on the internet at my age happened so quickly. But No matter how much the internet has evolved, the approach on the structure of the site has been similar since the first usage of JavaScript on a website.

We will concentrate majorly on the basic structural implementation for any webpage regardless of its content. The topic is divided into the following topics for better understanding:
  • Declaration
  • Base HTML Elements
  • Essential head tags
  • Responsiveness
  • CSS implementation
  • JavaScript application
  • SEO
  • Layout
  • Accessibility
  • Compatibility
  • Optimization
  • Offline mode
  • Final Result


There are three different declarations in HTML 4.01. In HTML5 there is only one.


<!DOCTYPE html>

HTML 4.01 Strict

This DTD contains all HTML elements and attributes but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional but allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "">

Base HTML Elements

The basic HTML elements that are always there even if you load an empty document which is html, head, and body tag. The head tag does not contribute visible content of the site however body does. Below is a sample output of a blank document

Essential head tags


The most basic is the title tag whose label is viewable on the title bar of the window in an older generation or tabs of the modern browser. It is adaptive with the change. It usually starts with a topic and ends with company name with a separator in between.
<title>Sample Site - Brand Name</title>

Charset Meta

The charset attribute specifies the character encoding for the HTML document
<meta charset="utf-8">

Description Meta

Defines the description of the site, Good for SEO purposes.
<meta name="description" content="Some description for the sample page would be lovely.">


It is a small logo found in front of the visited URL, it can be seen in Address Bar, and is used to promote a company or a trademark. On the other hand, it is useful for the user so that e can quickly locate the URL he wants to click in his bookmarked sites. It can be 16×16, 32×32, 48×48, 64×64 or 128×128 pixels.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">


The basic responsiveness of a webpage is achieved by using a viewport meta tag. The browser's viewport is the area of the window in which web content can be seen. 

Normal tag

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

No Zoom tag

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

CSS implementation

Cascading Style Sheet is the base for theming an entire blank HTML canvas. It can be written inline with style attribute, internal with style tag or external with the link tag. Except for PWA, It is recommended to always use an external file with a link tag. the link tag variation is given below


<link rel="stylesheet" type="text/css" href="style.css">


<link rel="stylesheet" type="text/css" href="print.css" media="print">

JavaScript application

Generally, there are two locations where script related to javascript can be placed. The first one is before the end of the head tag called by pre-DOM load tag and second before the end of body tag denoted by post-DOM load tag. Usually, HTML page loads from top to bottom there pre and post really make a huge difference while rendering the website

pre-DOM load tag - Global Setters

script tags with javascript that have global variables for page or external file script tag with the async attribute can be placed before the head tag. The async attribute allows HTML parsing and the script will be executed as soon as it’s ready. The best example of such code is the analytics tag.
    var globalVar = "Hi. I am a global variable.";
<script type="text/javascript" src="analytics.min.js" async></script>

post-DOM load - DOM Manipulators

The script tag added before the end of the body tag allows the HTML and CSS content to rendered and process before their execution in the browser. You may have multiple sources or third party vendors of JavaScript files however it recommends to just have one file to reduce error scenarios and increase the performance of the site.
<script type="text/javascript" src="main.js" ></script>


Most of the heavy load for SEO is lifted by title tag and description meta tag. However, there are additional meta tag to keep your site more relevant.


The Robots Meta tag is an HTML tag that provides instructions to web crawlers on whether to index or noindex a web page.

The Robots Meta tag has four main values for search engine crawlers:

FOLLOW –The search engine crawler will follow all the links in that web page
INDEX –The search engine crawler will index the whole web page
NOFOLLOW – The search engine crawler will NOT follow the page and any links in that web page
NOINDEX – The search engine crawler will NOT index that web page
A simple example is
<meta name=”robots” content=”index, follow”>


By implementing the Canonical tag in the code, we are telling search engines that this URL is the main page and avoid indexing other duplicate page URLs
<link rel=”canonical” href=”” />


Open Graph Tags: Open Graph Meta tags are designed to promote integration between Facebook, LinkedIn, Google, and the website URLs that you shared on these platforms.
Twitter Cards: Twitter cards work in a similar way to Open Graph, except you add these special Meta tags only for Twitter. Twitter will use these tags to enhance the display of your page when shared on their platform.
<meta property=”og:type” content=”article” />
<meta property=”og:title” content="TITLE OF YOUR POST OR PAGE" />
<meta property="og:description" content="DESCRIPTION OF PAGE CONTENT" />
<meta property="og:image" content="LINK TO THE IMAGE FILE" />
<meta property="og:url" content="PERMALINK" />
<meta property="og:site_name" content="SITE NAME" />

<meta name="twitter:title" content="TITLE OF POST OR PAGE">
<meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT">
<meta name="twitter:image" content="LINK TO IMAGE">
<meta name="twitter:site" content="@USERNAME">
<meta name="twitter:creator" content="@USERNAME">


The presentation of a webpage has become very common with a header on top and a dark or light footer and main content with either of three columnar layouts.


Since the birth of the internet there has been three approach to deal with the layout of the main sections.
  • Three Column: This is the one of the oldest layouts adopted by website. More commonly the are followed by major sites like, or where there is sidebar with an aside tag and 2 columns with a responsive grid.
  • Two Column: This layout is mostly favour by blog articles where the sidebar provides options regarding the blog site. Many ecommerce site go for this layout to favour a affix characteristic to a "Buy Now" or "Add to Cart" button
  • Single Column Grid: This layout covers up the entire container size and segmentation of section and cards is made by a responsive grid system, a common approach for ecommerce home page.


Although the header tag is not used by all site, a header is essentially used in every single site. The usage of header have been observed with 12 structural variant as per my understanding. Commonly a header section can have following items in it:
  1. Brand Logo
  2. Navigation Menu
  3. A Search Box
  4. Quicklinks or Masthead


aside is a special tag defined by w3c standards that act as a complementary information serving section. Usually developers denote it as a sidebar for their site.


This is the area where major content of the site is written. Two tags are associated with it depending on the type of site. The section tag is used by marketing site where each section defines a particle marketed item of the site. While article tag is mostly used by blogging sites


Footers tag accept generic site information. During early day of internet, the footer were simple with a inline list divided by separator. Now a days they adopted a generic darker, lighter or primary colored full width section with several site navigation links.


Before responsiveness, there was only a single container size supposedly a screen width lower than 1024 px that was based on CRT monitors. They were denoted by wrapper or page-wrapper in early days. With the revolution of LCD panels the resolution of standard shifted towards 1366 px width for better visibility. During those time CSS framework adopted a container size that met requirement of such resolution. Furthermore, adoption of mobile device with of 320 px also became popular during that time. Now a day, the screen size are achieving a new resolution aspects scaling upto 8K. However a standard of 1920 px has become more prominent as a satisfactory resolution for a workstation. Hence, container sizes are adopted in following manner that meet both user and site owners requirements. Below described are the vartiants of containers that are evolved by time

  • Breakpoint fixed width containers: These containers standard inclusion in most of the CSS frameworks. For mobile devices they have a screen width of 100% while in rest of the cases the container size is bit smaller than their respective breakpoint size.
  • Smooth Container: These container has an initial first fixed width and whenever the screen size go below their fixed width value they switch into 100% width container
  • Fluid Containers: These containers are 100% width small pixel based padding at both ends. These are basically used for dashboards that contain card based compartmentalization. 
  • Smooth Container with percentage padding: These containers are pseudo container fluid in nature as the fixed with of the container is beyond a standard 1366 px resolution. However screen beyond 1500 px resolution, the tend apply a fixed width around 1500 px with percentage padding in certain case. This is currently evolving container size and can be seen on several ecommerce and enterprise sites like and


The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
- Tim Berners-Lee, W3C Director and inventor of the World Wide Web 

Best way to provide access to everyone on your site is to use role and aria attributes. Please visit to learn more.


All latest browsers are caught up with new standards but there are older systems that still use internet explorer. Hence the compatibility tags are given below to make our page work on older browsers as well.

html5shiv: This script is the defacto way to enable the use of HTML5 sectioning elements in legacy Internet Explorer.
respond.js: A fast and lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src=""></script>
    <script src=""></script>


Developer's role play is strongly associated with the performance and optimization of the site. There are several DOM manipulation techniques like virtual DOM and shadow DOM to make the site more efficient. However, the topic is out of focus as these suggestions are made by JavaScript frameworks. The real optimization of any site relies on network traffic. Lower the traffic, better is the performance. The site with an efficient HTML structure delivers better performance as well as a better development experience as it reduces the DOM trees and CSS specification becomes less clunky. 

I would recommend to only use one CSS and one development JS file for maximum performance.

CSS Minification

It is better to use a minified version of CSS and concatenate all vendor CSS (Except Fonts) in a single file to quickly process and render the desired theme. You can find online tools to minify or else minify them using bundlers/Task runners

JavaScript Uglification

Uglify, as it names suggest is used to uglify the javascript ie, remove white spaces, change the big variable names to small ones and compress the file hence reducing the size of the file and helping with performance.

Server Improvements

The basic change on web server would be to gzip enable the resources and enable HTTP 2.0 Protocol to quickly deliver resources in one request.

Offline mode

Currently, Offline mode opportunities are still evolving and require to mature before suggesting it on standards. Basic implementation goes like below:
if ('serviceWorker' in navigator) {
A sample for a basic implementation is provided by chrome developers from here:
PWA style sites mostly use this feature by using a file named service-worker.js. however, you can read further here: and

Final Result

1 comment:

Anonymous said...

Thanks for kind information, Its really help me to start learn new things.