Web design and development emerged as a full time career option in 1990s (the famous “dotcom boom” era). In the two decades gone by since, a number of newer, faster and innovative technologies have evolved for web designing but HTML CSS continue to hold fort. Initially released in 1993 and 1996 respectively, HTML CSS gained worldwide popularity in a short time. In this article we explore their importance in modern web page design and list out the factors that make them globally accepted languages for website design.
Importance of html for web design
What is HTML?
HTML (HyperText Markup Language) is often viewed as “another programming language” but it is not. It is a markup language rather than a programming language, which makes it easy to learn and implement. Developers use it to create the basic skeleton for all websites, irrespective of the technology they are coded in. Once the skeleton is ready, different elements are fed to it and responsive, contemporary and interactive websites are formed. Modern websites demand a number of elements such as images, objects, documents and media files that needs to be embedded within and HTML accomplishes the task with ease.
What makes HTML popular with web design and development?
HTML’s popularity can be attributed to a number of factors. At a fundamental level, it forms the backbone of every website. It is required to place almost everything that you see (and sometimes things you don’t see) on a website, other than plain text. It is essential when it comes to determining its structure and layout. Loading a website with content is no good if it is not organized for easy readability. Other than a few basic tags, you don’t need to use everything at once. This lends a degree of modularity and makes it easier to learn, as you have the option of not jumping into the sea straightaway. Rather, you get to test the waters from the shores and go deeper as and when you have the confidence.
No HTML code fragments with necessary tweaks. This feature has made it a hit among programmers of all backgrounds. No matter what technology you use to program your website, you can always save effort by using (and re-using) your existing layout.
As it is not a programming language, it does not need a separate compiler or a particular platform to execute upon. HTML codes can easily be interpreted by all browsers. It is available freely which makes it easy for everyone to learn and use.
Salient features of HTML:
- Easy to learn
- Simple to understand
- Supported by all browsers
- Very similar to XML syntax
- It is free
- Highly flexible and scalable
- Is designed to promote interaction between web pages
- Web pages get loaded faster
- It is search engine friendly
HTML – Keeping abreast with technology
HTML has existed for over two decades and it has been revised at regular intervals since then. Its most recent version, HTML5 was published in October 2014, making it the fifth major revision since introduction. It has introduced a number of new features that makes it relevant for today’s web technology landscape. As has been the norm with previous releases, it again struck gold by introducing a slew of modern, contemporary and easy to use features which allows users to design web pages more easily, make them more content rich and enhance their adaptability.
Mobile devices are the future and all of them have embraced HTML5. As adobe has already announced withdrawal of Flash for mobile devices, HTML5 is where mobile web action will be. All web browsers new and old (yes, even Internet Explorer 6!) can interpret it, which goes a long way in resolving those cross browser compatibility issues once and for all.
Salient features of HTML5
- Forward/backward compatible with all browsers
- Introduction of 'canvas' tag- a playground for mobile game development
- Most of the interactive animations that could be done with platforms like Flash can be done with HTML.
- Replaces generic "object" tags with the new 'video', 'audio' and 'canvas' elements and integration of scalable vector graphics (SVG)
- New page structure elements(such as main,section,article,header,footer,aside, nav and figure to make page structure more developer friendly.
- APIs and Document Object Model (DOM) are integrated more deeply with HTML5 specification rather than appearing as an afterthought
CSS for web design
Why use CSS when we already have HTML?
Imagine a website having large number of pages. HTML’s primary purpose is to describe what the page elements as is, which is achieved by its tags ( h1 for heading, p for paragraph, etc.). However, it doesn’t have the capability to describe how the text would appear. For example, if you wanted to increase/decrease the font size and/or color, the earlier HTML versions did not have a provision to do this. With HTML 3.2, different attributes like 'font' and 'color' were introduced which enabled developers to decide upon the appearance then and there but a bigger problem arose – what if a website runs into 50 or 100 pages? Including the 'font' attribute was no longer feasible. Besides being a time taking task, it also made the files bulky (which would eventually slow down the websites). From the development and debugging point of view it was an absolute nightmare.
This is why the World Wide Web Consortium (W3C) created CSS. It took the formatting away from HTML files so that developers could focus on the structural aspect. By adopting CSS, entire formatting of huge websites could be controlled by one external file (having .css extension) and could be changed just by replacing it with another file. This saved a lot of effort.
A CSS file is a set of rules governing the appearance of different elements that form an HTML page. The following image shows how the formatting of different elements is controlled by a set of property – value pairs, stored in css files:
Source : w3schools.com
Factors that make CSS web design popular:
- Bandwidth reduction
- Search engine friendly, clean coding technique
- Enhanced browser compatibility
- Flexibility – the same website can be made to look different on a laptop and a tablet
- Easier to maintain and update
HTML CSS will always be the building blocks for website design and that is not likely to change in the near future. Having HTML CSS skills are becoming essential for anyone working in a role that is closely tied to the digital world. Marketing professionals, content writers, freelancers, visual designers can all learn HTML CSS skills to augment their careers. Come join us in designing a fun, interactive website!