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:
Print
Best way to provide access to everyone on your site is to use role and aria attributes. Please visit https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/ to
learn more.
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
Declaration
There are three different declarations in HTML 4.01. In HTML5 there is only one.
HTML 5
<!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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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" "http://www.w3.org/TR/html4/loose.dtd">
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" "http://www.w3.org/TR/html4/frameset.dtd">
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
<html>
<head></head>
<body></body>
</html>
Essential head tags
Title
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.">
Favicon
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">
Responsiveness
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
Normal
<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.
<script>
var globalVar = "Hi. I am a global variable.";
</script>
<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>
SEO
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.
Robots
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”>
Canonical
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=”http://example.com/” />
Social
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">
Layout
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.
Columns
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 aol.com, facebook.com or twitter.com 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.
header
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:
- Brand Logo
- Navigation Menu
- A Search Box
- Quicklinks or Masthead
aside
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.
main
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
footer
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.
Containers
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 amazon.com and microsoft.com
Accessibility
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
Compatibility
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="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
Optimization
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:
PWA style sites mostly use this feature by using a file named service-worker.js. however, you can read further here: https://developers.google.com/web/fundamentals/primers/service-workers/ and http://apress.jensimmons.com/v5/pro-html5-programming/ch12.html
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
A sample for a basic implementation is provided by chrome developers from here: https://googlechrome.github.io/samples/service-worker/basic/
PWA style sites mostly use this feature by using a file named service-worker.js. however, you can read further here: https://developers.google.com/web/fundamentals/primers/service-workers/ and http://apress.jensimmons.com/v5/pro-html5-programming/ch12.html
1 comment:
Thanks for kind information, Its really help me to start learn new things.
Post a Comment