We might receive compensation from the companies whose products we review. We are independently owned and the opinions here are our own.
In this tutorial, you will learn what HTML is and how it is distinct from HTML. Find out why you should use HTML5 and what new HTML5 tricks can improve the HTML code that you use to create web pages.
About HTML
This guide isn’t about all versions of HTML, but a brief run through of how the World Wide Web Consortium arrived at the HTLM5 specification is in order.
The Hypertext Markup Language (HTML) is a foundational element of the World Wide Web. A web page is an HTML document. HTML isn’t a programming language; it is just a plain-text protocol that assigns layout meaning to keywords. Web browsers interpret those codes into a presentation.
The lack of programing language constructs and functionality in HTML puts Web developers in a category of their own. Web development requires graphic designer skills as well as programming abilities. Fortunately, it is possible to embed programming elements into an HTML document, thanks to JavaScript.
The need for HTML5
Chrome, Mozilla Firefox, Microsoft Edge, Opera, and Apple Safari include routines for parsing HTML code, identifying calls to other files, that can bring in multimedia elements, such as video, audio, and images. The ability to include calls to external processes leads to the use of APIs.
These are particularly necessary for mobile devices, such as iPhones, that don’t have much processing power. Offloading processing to remote servers means that Web developers are no longer constrained by the need to set out all of the elements that compose a Web page inline in one HTML document.
The creators of HTML5
HTML 5 was developed by the Web Hypertext Application Technology Working Group (WHATWG), which is an association of organizations that produce Web browsers.
The main members of the group are Google, Apple, Mozilla, and Microsoft. Although this group has been given the responsibility of developing and maintaining HTML, the controlling body for the protocol is the World Wide Web Consortium (W3C).
The development of HTML
Sir Tim Berners-Lee, the inventor of the World Wide Web, first defined HTML in 1990 in a project for CERN in Switzerland. The definition of the protocol was solidified and then made official through its publication by the Internet Engineering Taskforce (IETF) in 1993.
The IETF presided over a more formal development of the standard, which became the first version to be widely implement. This was HTML 2.0 which was released in 1995. The next development to add new features to the HTML standard was HTML 3.2, which was published in January 1997 under the auspices of W2C. This version integrated many of the proprietary innovations of the Netscape browser and removed all math functions, which were then developed into a separate protocol, called MathML.
HTML4 was published twice with the HTML 4.0 version number. Once in December 1997 and then again in April 1998. The major new element in this definition was the introduction of cascading style sheets (CSS).
The launch of HTML5
HTML5 didn’t emerge until 2014. The long period that HTML4 was the latest version of the standard was due to a strategy of stripping out features and web applications from the core standard of HTML. An example of this was the creation of MathML to handle mathematical functions. For more than a decade, enhancements to the development of web pages lay with parallel technology based on XML, such as XHTML1.
HTML5 represented a reversal of the W3C strategy to split out the standardization of web apps and services into separate protocols. This version updated HTML4 and added in the functionality defined in XHTML1 and also other web protocols, such as the Document Object Model (DOM). HTML 5.1 was published in 2016. The current version of the protocol, HTML 5.2, was published in 2017.
New features of HTML5
The two major syntactic changes to HTML5 are the ability to integrate multimedia processes and the integration of application programming interfaces (API) for web applications.
There are a number of other important new elements in HTML5 that weren’t available in HTML4.
Semantic additions
A number of new elements for page structure were added to HTML with HTML5. These are intended to replace generic block (
) and inline () elements.
The code below illustrates the new elements that will then be explained:
This text explains some of the elements that can be put into an HTML5 document. This section is expressed by the main element.
Get the Layout Right
Plan a Web page in advance so you know what the standard layout will be.
A canvas is a new graphics element in HTML5
Placing images at frequent intervals breaks up the page, visually.
Section Elements
You can include several sections within the main block.
Psychologists have developed rules on how to layout a Web page to make it more appealing and easier to read.
You can break up a page into sections so that it is more digestible. Choosing a CSS that includes colorful fonts and interesting layout options can make a Web page more attractive.
How to Code in HTML5
Posted on Monday, by Stephen Cooper
HTML5 introduces a number of new elements that assist in the layout of a Web page.
The following points explain each of these new elements.
What it is: This element refers to a header style within the Web page and will, therefore, become visible.
When to use it: The header should not be confused with theelement that contains the header of an HTML document. This layout element contains content that is unique to the page and isn’t intended for common features on a site, such as a site title or top navigation menu.
How to use it: The should be used within thesection of an HTML document and it is closed off with a closing tag
.
Example code:
HTML New Features
What it is: This tag can be used to indicate the dominant content of the of an HTML document.
When to use it: Its content is directly related to or expands upon the central topic of a document.
How to use it: The main section is closed off by a tag and the section it encloses can contain many other formatting tags, such as or. There can be only one section in a document and it can’t be contained by any other element.
Example code:
This text explains some of the elements that can be put into an HTML5 document. This section is expressed by the main element.
Get the Layout Right
Plan a Web page in advance so you know what the standard layout will be.
Section Elements
You can include several sections within the main block.
What it is: This element identifies a generic standalone section of a document.
When to use it: Use for a block of text that doesn’t have a more specific semantic element to represent it.
How to use it: Sections can include many other formatting tags, including a and it is closed off by.
Example code:
Get the Layout Right
Plan a Web page in advance so you know what the standard layout will be.
What it is: This element offers an alternative to the tag.
When to use it: The element contains a complete composition, which does not pertain to other content elsewhere in a document. This strategy means that the contents of the
can stand alone, and be distributed or reused.
How to use it: The contents are closed off with antag and can contain other formatting elements. The element can contain a widget, a snippet, or an entire blog post.
Example code:
HTML5 introduces a number of new elements that assist in the layout of a Web page.
What it is: This element represents a piece of information that doesn’t fit into the main flow of the page.
When to use it: The aside is a side note and is only indirectly related to the document’s main content.
How to use it: The
.
Example code:
Section Elements
You can include several sections within the main block.
Psychologists have developed rules on how to layout a Web page to make it more appealing and easier to read.
You can break up a page into sections so that it is more digestible. Choosing a CSS that includes colorful fonts and interesting layout options can make a Web page more attractive.
What it is: The
When to use it: The links in the nav block could lead to other sections within the same document or to other pages.
How to use it: The block should be closed off with a.
New tags to manage multimedia content within the structure of HTML were added to HTML. These additions became particularly important when Adobe Flash was judged to be unsafe. Flash had become a significant method used for the inclusion of video and audio content. The deprecation of other video formats, such as Microsoft Silverlight, prompted WHATWG to step up and improve video processing in HTML.
The following code illustrates the usage of these new features.
Looking to the Future
Our Leader Speaks
Happy thoughts to all.
Today’s video
Important tags in this category are:
tag.
Example code:
video width=”320″ height=”240″ controls>
When to use it: This element works in exactly the same format as the
How to use it: The tag needs to be paired with a closing
.
Example code:
What it is: The
When to use it: This element can be used to hold animation and contents can be provided through JavaScript within the block or through an API.
How to use it: The tag has height, width, and style attributes and it needs to be identified with an id attribute. The block of instructions to create contents should be terminated with .
Example code:
What it is: This element enables graphics to be drawn within the definition of the HTML document rather than being read in from a separate file.
When to use it: Use this element to bracket the codes that create a shape. following a list of tags that are defined within the HTML5 standard.
How to use it: The tag has width and height attributes and the block defining the shape should be ended with an tag.
Example code:
Managing graphics
The options over how to manage graphics in a Web page greatly expanded with the HTML5 specification. This occurred through support for SVG and the creation of the
The canvas element enables dynamic, scriptable rendering of shapes and bitmap images. It also enables 3D shapes and images to be displayed with WebGL. The canvas block can be used for games and interactive graphics.
Canvas objects are drawn in immediate mode. Once the code to create a shape has been executed, it is not stored in memory.
SVG can be used interactively by parametrizing many of the values that draw a shape. Effectively, a block of SVG that creates a shape can be replayed with different parameters to alter the shape. In the case of canvas graphics, the interaction would need to be dealt with by external processes and the redrawing of the image would need to be triggered.
Canvas graphics are raster-based and SVG is vector-based. Each element of an SVG drawing is tracked individually and can be manipulated in isolation. The image created on a canvas is treated as a sold block.
Plugins and APIs
HTML5 enables interactivity in process execution, particularly in the ability to move off processing to remote servers through APIs. This step is particularly important for mobile devices where heavy processing tends to run down the battery quickly. Integrating API access into HTML5 means it is possible to reuse microservices that were built for mobile apps into web apps and web pages.
The API model enables W3C to phase out the concept of plugins. Browser support for Active X controls, Java applets, and Adobe Flash is being discouraged, although they are still accessible for the time being to ensure backward compatibility for older web pages that pre-date HTML5.
Some pre-existing languages and methodologies, such as JSON, JavaScript, and Ajax, presented difficulties when users used the browser back button to skip back to a previous page. API methods in HTML enable Ajax programs to interact more effectively with browser history.
The specifications for HTML5 include a set of APIs that include:
Canvas
Timed media playback
Offline
Drag and drop
Web messaging
Web storage
Not all recent Web application advancements have been integrated into HTML5. For example, specifications related to geolocation, Web Audio, and WebRTC are maintained as separate specifications.
Conclusion
HTML5 has greatly increased the capabilities of HTML. However, this increased functionality has been gained at the cost of the original simplicity of the HTML philosophy. Although HTML was not originally intended to be a programming language, new features added to each version of the system mean that the HTML5 specification is getting very close to becoming a programmable system. The inclusion of APIs, in particular, open up far greater opportunities to implement programming constructs by using an HTML document more as a container with output formatting rather than as a markup language.
A big downside for Web businesses that keep increasing demand for Web development is that, as HTML becomes increasingly more complicated, the available skills pool of fully experienced developers gets smaller, and as a result, websites fall behind and become outdated. This is because the longer training lead time necessary to become fully conversant with Web technology creates a higher entry bar for new talent.
