359 reads

Evolution of Web Design: From HTML to HTML5

by Elbie MoongaFebruary 18th, 2020

Too Long; Didn't Read

HTML is the backbone of every web page document that you see on the internet today. This acronym stands for hypertext markup language, the language of webpage documents. HTML was developed by a physicist by the name of Tim Berners Lee in the 1980’s. The common tags HTML kicked off with were, heading tags, paragraphs, lists, links to mention a few. In 1995 HTML 2.0 got published and it added more functionality compared to the previous versions. As of the year 2014, HTML was released making certain previous elements obsolete.

Companies Mentioned

featured image - Evolution of Web Design: From HTML to HTML5

When most people think about evolution, what comes to mind is “the big bang”, usually describing it as way different types of living organisms developed from earlier forms during the history of the earth. Technology has also evolved over time, there are many technologies, major ones being web development, computer systems, software engineering, artificial intelligence and many more. The main focus of this article is on the evolution of Web Design. A deeper dive into HTML which is the backbone of every web page document that you see on the internet today. Yes, other supplements exist e.g. CSS, thats adds design for websites, but without HTML, displaying a webpage document is not possible.

Let us first traverse our way through this markup language. This acronym stands for hypertext markup language, the language of webpage documents. Its development was by a physicist by the name of Tim Berners Lee in the 1980’s. It first started out “HTML tags” after the1990.

In 1995 HTML 2.0 got published and it added more functionality compared to the previous versions.

HTML comprises of elements which are the building blocks of an HTML page. The identification of such elements is with tags. A starting tag “

<element attr>

” and a closing tag

</element>

. What comes between these tags is the respective content e.g. text. The common tags HTML kicked off with were, heading tags, paragraphs, lists, links to mention a few.

Stop and think for a second, there must be a way that these tags have are added into an HTML document? Yes, the structure of an HTML document has to be strictly followed to see how these tags actually work. The main elements of an HTML document are enclosed in the

<html> </html>

tag which is the main identifier.

These are the

<head></head>

and

<body></body>

tags. The head consists of the

<title></title>

tag. Second comes the links to styling resources and

<meta>

elements. The title tag generally describes the pages’ relationship with other pages. The body is where we find the main content linked to the page that is in development. Below is how the script would look in a live project

<html> 
  <head> 
    <title>abc.com</title>
  </head>
  <body>
    Main content
  </body>
</html>

Common Elements

HTML started out with some of the common elements that are still in use today. Some elements that existed in HTML have been deprecated. Better elements where developed to achieve certain goals when developing a webpage.

Let us Begin with Block Formatting Elements:

1. Headings

This element runs from <h1> to <h6> tags and are used for headings of sections in an html document. The size of text decreases from h1 — h6 respectively

2. Paragraphs

This element is represented using the <p> tag. It is generally used for writing a section of text in an HTML document. Each time you put this tag to use, you a new line of text is created.

3. Lists

There are several types of lists available in HTML. The most common lists available are an ordered list represented by the <ol> tag and an unordered list represented by the <ul> tag. A Lists usage serves the general purpose of an actual list. You have to enclose <li> tags with content in the list for results on your html documents.

4. Images

To embed images from a source of choice, you can use <img src=” ”> tag. You have to ensure you define the source of the image in order for it to appear on the webpage. Tags like this have no closing tag and others exist and are implemented by developers today.

5. Forms

The form element is represented by the <form> tag. The common use of forms is to collect data from users. A form can contain, input, buttons, selection tags for user interaction.These elements above are used for development and have proven to be very useful.

We are here to read about the evolution of this beautiful mark up language though. The mentioned information has general purpose of giving oneself a clear brief insight of HTML.

As mentioned before everything started with HTML, different versions have been released over time e.g HTML 3.0 and HTML 4.0. As of the year 2014, HTML5 was released making certain previous elements obsolete. There are a lot of different browsers being released. Some HTML features proved to be incompatible with these browsers hence the development of HTML5.

HTML5 is supported by all web browsers and that is one of the major advantages it possesses. When you look at HTML, it is a primary language used for webpage development. HTML5 brings more to the table. It is not only a markup language it has the capability of interacting with other technologies to assist in development. This can increase the dynamic sense of webpage content. JavaScript is one of the programming languages used in web development and can now run in the background. This is made possible by the JS Web worker api.

Before HTML5, HTML used browser cache memory for temporary storage. With HTML5 there are a variety of storage options like web storage and SQL database. This allows more space and makes usage of the web better.

As mentioned before, HTML5 unlike HTML has diverse browser compatibility. Before, usage of other browsers would break your content and make issues arise, with HTML5 any browser is capable of loading a pages’ content.

With HTML it was difficult to handle errors but things changed with HTML5 being development and it make the life of a developer easier. When it comes to the use of graphics, HTML needed support from external tools. One of the common tools used for vector graphic support was adobe flash. As of today, HTML5 has an inbuilt SVG and canvas which makes graphics be supported by default.

One of the most annoying things when it comes to development is bugs. With HTML it was kind of difficult to handle errors but things changed with HTML5 being development and it make the life of a developer easier.

Today we see the use of a lot of multimedia on the web, HTML5 introduced support of multimedia elements like sound and video which can be directly embedded into a webpage. This has made more websites interesting to browse through.

So, let us add on to what has changed, you might wonder what other new elements have are there to make web design easier. There are quite a number and a few include time which is used by most sites to show current date and time. The section element which is generally used to divide you page into sections for reference purposes e.g jumping to the section by the click of a link. The nav which usually appears at the top of the webpage has proven useful. Other elements include progress and aside to mention a few.

With the few things mentioned, we can see that HTML has come a long way and now HTML5 allows more added functionality to websites. With the use of this technology, you are bound to produce outstanding results on projects in the industry.

To learn more about HTML5 refer to the following resources:

Microverse school for web developers also makes it a part of the curriculum and you get to build amazing project with the use of HTML5. Interested in enhancing your career in software development ,check out more information here → https://www.microverse.org/