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:


    


        
            

 


            

 


            

  • New Features

 


   

 


    

 


    

HTML New Features

 

 

 



    

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.

 


    

Continue reading….

 


    


        

NB. This page is currently offline

 


    

 

 

 

 


    

© 2021 HTML5 Guide

 

 

 

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 an

    tag 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

    .

  • Example code:



   

 


        

 


        

  • New Features

 

 

 

 

 

 

 

  • What it is: The
    element can be used to tie together an image with a caption.
  • When to use it: Use this element to bind a cation to an object, such as an image or a video.
  • How to use it: The element contains the tag to identify an image and then a
    element to state the caption.
    is closed off with

    and the

    requires a closing

    . The text within the

    block does not need to be in quotes.
  • Example code:


    
A canvas is a new graphics element in HTML5

 

 

 

 

  • What it is: A footer in a Web page is identified by this element.
  • When to use it:  It can be contained within another element, such as
    but it cannot be contained within a
    or another
    block.
  • How to use it: The block can contain formatting elements and the section is closed off with a

    tag.

  • Example code:


    

© 2021 HTML5 Guide

 

 

 

Multimedia handlers

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.

 


    
        Good times
    

 


    

Today’s video

 


    

 


 


    

 

Important tags in this category are:

tag.

  • Example code:

 

video width=”320″ height=”240″ controls>
    

.

  • Example code:

 

  • What it is: The element creates a space in the layout of a page that can be used to [post graphics.
  • 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:


    Good times

 

  • 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 element.

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.