Home / HTML & CSS / HTML – Complete Guide from Introduction to New Features

HTML – Complete Guide from Introduction to New Features

Introduction: 
HyperText Markup Language (HTML) was introduced in the year 1990. Since then, there has been continuous evolution in the technology leading to the introduction of new versions. Some features were introduced in specifications, whereas others were introduced in software releases.
W3C recommend HTML 4 as a standard in 1997. HTML5 is the next version of HTML and will be the new standard. HTML 4.01 was the previous version of HTML which was released in 1999. Since then, there have been constant evolutions and additions to the World Wide Web (WWW). Majority of the browsers support HTML5 elements and Application Programming Interfaces (APIs).

History:

HTML is a markup language used primarily to create hypertext web pages. A markup language is a set of notations that specifies how the content should look in the browser. HTML is derived from Standard Generalized Markup Language (SGML), which is the mother language of HTML. SGML is a markup language that defines the structure of other markup languages.
HTML has evolved over the years with the introduction of an improved set of standards and specifications. HTML 1.0 was the first version of HTML introduced in 1993. At that time, there were very fewer people involved in designing Web sites. Tim Berners-Lee in 1995 included the HTML 2.0 and complete HTML 1.0 specifications with additional features.

The other HTML versions are as follows:

HTML 3.0

HTML 3.0 specifications included new features for the Netscape Navigator browser as it became very popular. The new improvements did not work on any other browsers such as Internet Explorer.

HTML 3.2

Additional browser-specific features revolutionized the need for standardization of HTML. Therefore, the World Wide Consortium (W3C) organization was formed to specify and maintain the HTML standards. HTML 3.2 was the first specification introduced by W3C in January 1997 and was fully supported by all the Web browsers.

HTML 4.0

W3C introduced HTML 4.0 in December 1997 with the motive for facilitating support for CSS, DHTML, and JavaScript. However, HTML 4.0 prevailed for a short period, which led to HTML 4.01 specification in 1999.

HTML5

HTML5 is a cooperative project between the W3C and the Web Hypertext Application Technology Working Group (WHATWG).W3C was busy working with XHTML 2.0 and WHATWG was working with Web forms, new HTML features, and applications. In 2006, the two groups decided to work together and develop a new version of HTML.

Some basic rules for HTML5 that were established are as follows:

  • Introduction of new features should be based on HTML, CSS, DOM, and JavaScript
  • More markup should be used to replace scripting
  • HTML5 must be device independent
  • Need for external plug-ins, such as Flash, to be reduced
  • Better error handling capabilities
  • The development process should be completely visible to the public.

The layout of a Page in HTML5

The basic structure of an HTML5 document remains the same. Each HTML5 page consists of a head section containing unseen elements and links and a body section where the visible elements of the document are present.HTML offers different tags to build and organize the content in the body of the document. The body structure generates a visible part of the document.

One of the elements provided for the body is <table> tag. Tables help in improving the user’s experience by helping the user to visualize the Web site in an organized manner. Eventually, other elements replaced the function of tables. These elements have the lesser code and are faster, thus facilitating the creation, portability, and maintenance of an HTML5 Web site.

The <div> element was another element that was introduced in this field. With the integration of HTML, CSS, and JavaScript, and the usage of more interactive applications, the <div> tag was frequently used. Both the <div>and <table>elements did not provide information about the sections of the body that the element may be representing. Content such as scripts, images, links, text, menus, forms, and so on could be used between the opening and closing <div> tags.

HTML5 includes new elements that identify and organize each part of the document body. In HTML5, the most significant sections of a document are separated and marked. Hence, the main structure does not depend on the <div> or <table> tags.A typical HTML page would have a page header, footer, and middle page content. Within the middle page content, at the top level, it may have navigation, content, and aside columns. Also, within the content, more sections can be embedded depending on the page’s specific content.

 

The Header on the top usually has the logo, name, subtitles, and short descriptions of the Web site or Web page. After that is the NavigationBar that includes a menu that contains links for navigation. Web users can navigate to different pages or documents using the navigation bar. The most relevant content is generally shown in the middle of the page. The content presented in the Main Information part of the layout usually has a top priority. It can have a list of products, description of products, blogs, or any other important information.
The Side Bar shows a list of links that lead to certain items that may be present internally on the Web site or on an external link. For example, in a blog, the last column offers a list of links that can lead to the blog entries, information about the author, and so on. These two sections are extremely flexible. Web designers can perform a variety of actions, such as inserting more rows or splitting the columns, to edit the Web page as required. The footer at the bottom is used to represent general information about the Web site. This can include the author or the company name, links regarding rules, terms and conditions, location maps, and any other additional data.

Drawbacks in HTML 4 and XHTML

HTML 4 was a standard that was universally accepted for developing Web sites. It is a very stable coding language which ignores small coding errors. Also, HTML 4 is majorly compatible with all important browsers.

 

HTML5 adds new capabilities to the previous version of HTML. It is a revised code build on the basis of HTML 4. HTML5 provides major improvement through better interactivity, multimedia services, and application handling. For example, you can directly play a video or audio on any browser without the need to install external plug-ins such as Flash or Silverlight.

XHTML was a version of HTML 4 that was created along with XML. It was a rigid, standards-based language that allowed no room for errors. XHTML was supposed to be the next version of HTML 4 but due to interoperability problems, it took a backseat and HTML5 would be the next standard for Web site development.

New and More Flexible Approach of HTML5

There are various rumors with regards to HTML5 currently. It can help a simple Web site developer to even a game developer. HTML5 has different aspects to everyone. Some of the aspects of HTML are as follows

For a multimedia person, HTML5 gets rid of plug-ins and uses new native support for audio and video.

  • For a Web designer, HTML5 provides descriptive semantics.
  • For a programmer, HTML5 helps to create rich Internet clients. These clients can be built without using plug-ins such as Flash.  For this, you can use canvas and JavaScript to create better interfaces and animations. Canvas is a rectangular area on the Web page that uses JavaScript. A developer can control every single pixel in the area. The canvas element has several ways to draw paths, rectangles, filled rectangles, circles, images, and so on.
  • For a client-side programmer, the Web workers are one of the features provided that can make JavaScript more efficient. Web workers is a JavaScript-based API that is used to run background scripts in a Web application. This helps to mitigate the effect of the background script affecting the main process that is being executed.
  • For database administrator,  HTML5 has client-side storage and caching functionality.
  • For a design expert, CSS in HTML5 has been improved by added features such as advanced selectors, animations, drop-shadows, and so on.
  • For a mobile programmer, a lot of features are included for mobile applications.


HTM
L5 is a family of technologies that gives whole new options for building Web pages and applications.

New Features of HTML5

Some of the new features introduced in HTML5 are as follows

  • The <canvas> element is used for 2D drawing.
  • New content-specific elements, such as <article>, <nav>, <header>, <footer>, <section>, and so on helps to structure the document.
  • HTML5 has local storage support.
  • The <audio> and <video> elements is available for media playback.
  • New form controls, such as calendar, date, time, e-mail, URL, search, and so on have been provided by HTML5.
  • The Web workers API is added to support background processes without disturbing the main process. The common problems faced by Web applications are slow performance when a large set of data is processed. This is due to the fact that all the processes are executed in a single thread. Web workers help to solve this problem.
  • The Web Sockets API provides a continuous connection between a server and a client by using a specific port. Thus, the Web applications become efficient as the data can be easily exchanged between client and server without reloading the page constantly.
  • Easier access to location specific data which is made available by devices having Global Positioning System (GPS) capabilities. This improved functionality is achieved with the help of API.
  • HTML5 allows Web applications to be executed offline by storing the files and other resources required in the application cache. Web application data is saved locally using Web SQL databases.
I hope this HTML guide will help you to understand the HTML and please share this guide to others

About admin

IT Expert, Web Designer & Developer, SEO Specialist, YouTuber. Studying BS (Software Engineering) From Middlesex University Lived in Islamabad, Pakistan

One comment

  1. It’s really a nice and useful piece of information. I’m satisfied that youshared this useful information with us. Please keep us informed like this.Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *