Open In App

HTML5 | Introduction

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

HTML5 is the fifth version of Hypertext Markup Language (HTML), a standard language used to structure webpages. It defines how content on a webpage should be structured and displayed. Here are some key points of HTML5

  • Multimedia Support: Embeds audio and video without plugins.
  • New Form Controls: Includes input types like date and email.
  • Web Storage: Stores data offline for better performance.
  • Semantic Elements: Uses tags like <header> and <footer> for better structure.
  • Improved Performance: Faster and more efficient, especially on mobile.

Here is a simple HTML5 example

HTML 
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Page</title>

</head>
<body>

    <header>
        <h1>Hello, World!</h1>
    </header>

    <main>
        <p>This is a simple HTML5 page.</p>
    </main>

    <footer>
        <p>@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved</p>
    </footer>

</body>
</html>
  • It defines a simple HTML5 page with DOCTYPE, <html>, <head>, and <body> tags.
  • Includes a character set (UTF-8) and viewport settings for mobile responsiveness.
  • Contains a header, main content, and footer with basic text content.

Evolution of HTML

HTML has gone through several changes over the years to keep up with the growing needs of web development. These changes have helped improve website design, functionality, and accessibility. Here's an overview of how it has evolved.

Early Web Browser Development:

  • In the early days of the web, major browser creators like Microsoft Internet Explorer and Mosaic Netscape introduced browser-specific elements to improve the appearance of web pages for their browsers.
  • This led to the creation of distinct versions of websites tailored for Internet Explorer and Netscape by the late 1990s.

HTML 3.2 (1996):

  • The World Wide Web Consortium (W3C) recommended the creation of HTML 3.2 in 1996.
  • This standard included commonly used HTML elements and introduced presentational extensions, like the <center> and <font> elements, which were developed during the browser rivalry between Internet Explorer and Netscape.

HTML 4.0 (1998) and HTML 4.01 (1999):

  • HTML 4.0, released in 1998, and its update HTML 4.01 in 1999, focused on separating content structure from presentation.
  • These versions emphasized improving accessibility and moving presentation elements to the newly introduced Cascading Style Sheets (CSS) standard.

New Added Elements in HTML 5

HTML5 introduced several new elements that help structure a webpage better and make it more interactive. These elements not only improve the design but also make the code more readable and accessible. Here are some key elements of HTML5:

  • <article>: The <article> tag is used to represent an article. More specifically, the content within the <article> tag is independent from the other content of the site (even though it can be related).
  • <aside>: The <aside> tag is used to describe the main object of the web page in a shorter way like a highlighter. It basically identifies the content that is related to the primary content of the web page but does not constitute the main intent of the primary page. The <aside> tag contains mainly author information, links, related content and so on.
  • <figcaption>: The <figcaption> tag in HTML is used to set a caption to the figure element in a document.
  • <figure>: The <figure> tag in HTML is used to add self-contained content like illustrations, diagrams, photos or codes listing in a document. It is related to main flow, but it can be used in any position of a document and the figure goes with the flow of the document and if it is removed it should not affect the flow of the document.
  • <header>: It contains the section heading as well as other content, such as a navigation links, table of contents, etc.
  • <footer>: The <footer> tag in HTML is used to define a footer of HTML document. This section contains the footer information (author information, copyright information, carriers etc.). The footer tag is used within body tag. The <footer> tag is new in the HTML 5. The footer elements require a start tag as well as an end tag.
  • <main>: Delineates the main content of the body of a document or web app.
  • <mark>: The <mark> tag in HTML is used to define the marked text. It is used to highlight the part of the text in the paragraph.
  • <nav>: The <nav> tag is used to declaring the navigational section in HTML documents. Websites typically have sections dedicated to navigational links, which enables user to navigate the site. These links can be placed inside a nav tag.
  • <section>: It demarcates a thematic grouping of content.
  • <details>: The <details> tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it. This tag is used to create interactive widget which user can open or close it. The content of details tag is visible when open the set attributes.
  • <summary>: The <summary> tag in HTML is used to define a summary for the <details> element. The <summary> element is used along with the <details> element and provides a summary visible to the user. When the summary is clicked by the user, the content placed inside the <details> element becomes visible which was previously hidden. The <summary> tag was added in HTML 5. The <summary> tag requires both starting and ending tag.
  • <time>: The <time> tag is used to display the human-readable data/time. It can also be used to encode dates and times in a machine-readable form. The main advantage for users is that they can offer to add birthday reminders or scheduled events in their calendars and search engines can produce smarter search results.
  • <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiates a text from other text that may be formatted in different direction. This tag is used when a user generated text with an unknown direction.
  • <wbr>: The <wbr> tag in HTML stands for word break opportunity and is used to define the position within the text which is treated as a line break by the browser. It is mostly used when the used word is too long and there are chances that the browser may break lines at the wrong place for fitting the text.
  • <datalist>: The <datalist> tag is used to provide autocomplete feature in the HTML files. It can be used with input tag, so that users can easily fill the data in the forms using select the data.
  • <keygen>: The <keygen> tag in HTML is used to specify a key-pair generator field in a form. The purpose of <keygen> element is to provide a secure way to authenticate users. When a form is submitted then two keys are generated, private key and public key. The private key stored locally, and the public key is sent to the server. The public key is used to generate client certificate to authenticate user in future.
  • <output>: The <output> tag in HTML is used to represent the result of a calculation performed by the client-side script such as JavaScript.
  • <progress>: It is used to represent the progress of a task. It also defines how much work is done and how much is left to download a task. It is not used to represent the disk space or relevant query.
  • <svg>: It is the Scalable Vector Graphics.
  • <canvas>: The <canvas> tag in HTML is used to draw graphics on web page using JavaScript. It can be used to draw paths, boxes, texts, gradient and adding images. By default, it does not contain border and text.
  • <audio>: It defines the music or audio content.
  • <embed>: Defines containers for external applications (usually a video player).
  • <source>: It defines the sources for <video> and <audio>.
  • <track>: It defines the tracks for <video> and <audio>.
  • <video>: It defines the video content.

Features of HTML5

HTML5 introduces several new elements and attributes to improve web development:

  • Semantic Elements:
    • New tags like <article>, <aside>, <nav>, <header>, <footer>, and <section> provide meaning and structure to the content, improving both accessibility and SEO.
  • Multimedia Support:
    • Native support for <audio> and <video> tags removes the need for third-party plugins like Flash.
  • Canvas API:
    • Allows drawing graphics, animations, and games directly in the browser using JavaScript.
  • Geolocation API:
    • Provides access to the user's geographical location (with permission), enabling location-based services.
  • Web Storage (localStorage and sessionStorage):
    • Local storage (localStorage) and session storage (sessionStorage) provide client-side data storage, improving performance and enabling offline functionality.
  • Web Workers:
    • Allows background processing of JavaScript, improving performance by preventing blocking of the main thread.
  • Form Enhancements:
    • New input types (e.g., date, email, number) and form validation make forms easier and more efficient to create.
  • Drag and Drop API:
    • Allows users to drag and drop elements within a web page or between applications, enhancing interactivity.
  • SVG Integration:
    • Improved support for Scalable Vector Graphics (SVG), allowing for resolution-independent vector graphics to be embedded directly into HTML.
  • WebSocket API:
    • Enables real-time, bidirectional communication bet.

Deprecated Elements in HTML5

HTML5 has removed several outdated elements, replacing them with newer, more flexible solutions:

Removed ElementsUse Instead Elements
<acronym><abbr>
<applet><object>
<basefont>CSS
<big>CSS
<center>CSS
<dir><ul>
<font>CSS
<frame> None
<frameset> None
<noframes> None
<isindex> None
<strike>CSS, <s> or <del>
<tt>CSS

HTML5 Advantages

  • Multimedia Support: Native audio and video tags for easier media embedding.
  • Better Performance: Faster loading times with fewer dependencies.
  • Cross-Platform: Works across all major browsers and mobile devices.
  • Geolocation: Access users’ location for location-based features.
  • Offline Capability: Works offline with Web Storage and AppCache.
  • Simplified Code: New semantic tags for cleaner, more readable code.
  • Mobile-Friendly: Optimized for a smoother mobile experience.

HTML5 Disadvantages

  • Browser Inconsistencies: Older browsers may not fully support HTML5 features.
  • Mobile Compatibility: Some older mobile devices may struggle with certain HTML5 features.
  • Security Risks: New features like Web Storage can potentially expose user data if not handled properly.
  • Complexity: Advanced features like WebSockets and APIs can be challenging for beginners.
  • Lack of Support in Older Internet Explorer Versions: Some older versions of IE (like IE 8 and below) do not support HTML5 at all.

More Example of HTML5

Adding a Video Using the <video> Tag

HTML 
<html>
<body>
    <h1>HTML5 Video Example</h1>
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>

In this example,

  • The <video> tag is used to embed a video in the HTML page.
  • The controls attribute adds play, pause, and volume control buttons.
  • The <source> tag specifies the video file and format. If the video is not supported, the text inside the <video> tag will be displayed.

Using the <canvas> Element for Drawing

HTML 
<html>
<body>
    <h1>HTML5 Canvas Example</h1>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "blue";
        ctx.fillRect(50, 50, 100, 100);
    </script>
</body>
</html>

In this example,

  • The <canvas> tag is used to create an area for drawing graphics using JavaScript.
  • The getContext(“2d”) method is used to set up a 2D drawing context on the canvas.
  • The fillRect method draws a blue rectangle within the canvas.

Using the <progress> Element to Show Task Progress

HTML 
<html>
<body>
    <h1>HTML5 Progress Bar Example</h1>
    <progress value="70" max="100"></progress>
</body>
</html>
  • The <progress> tag is used to display a progress bar on the webpage.
  • The value attribute sets the current progress, and the max attribute defines the maximum value.

Best Practices of Using HTML5

  • Use Semantic Tags: Improve SEO and accessibility by using tags like <header>, <footer>, <article>, and <section>.
  • Ensure Cross-Browser Compatibility: Test your code across multiple browsers, especially older versions.
  • Use <meta charset=”UTF-8″>: Always specify the character encoding at the start to avoid encoding issues.
  • Mobile Responsiveness: Use the <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> tag for mobile-friendly designs.

Browser Support for HTML5

  • Apple Safari, Google Chrome, Mozilla Firefox, and Opera (latest versions) provide extensive support for HTML5 features.
  • Internet Explorer 9.0 supports some HTML5 functionalities, although it is considered outdated.
  • Mobile browsers on iPhones,iPads, and Android devices offer excellent HTML5 support.
  • These mobile browsers ensure smooth access to modern web apps and features, providing a smooth experience on smartphones and tablets.

Introduction to Client Side and HTML

K
kartikgoel1999
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox