HTML5 Introduction (original) (raw)

Last Updated : 13 Dec, 2025

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.

• Provides multimedia support by embedding audio and video without plugins.
• Adds new form controls like date and email input types.
• Enables web storage to store data offline for better performance.
• Uses semantic elements such as
  and
• Delivers improved performance, especially on mobile devices. HTML `

<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>

`

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

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:

• ****
  :** The

  tag represents independent, self-contained content like articles or posts.
• ****
• ****
• ****

  :** The

  tag groups self-contained media such as images, diagrams, or code.

• ****
  :** The

  tag contains introductory content like headings or navigation links.
• ****
• ****
  :** The

  tag defines the central, most important content of the webpage.
• ****:** The tag highlights or emphasizes specific text.
• ****
• ****
  :** The

  tag organizes related content into thematic blocks.
• ****
  :** The

  tag creates expandable or collapsible content sections.
• ****
  :** The

  tag provides the clickable heading for a

  element.
• ****:** The tag represents dates or times in a readable and machine-usable format.
• ****:** The tag isolates text with unknown or mixed text direction.
• ****:** The tag adds an optional line-break position in long words.
• : The tag provides autocomplete suggestions for an element.
• ****:** The tag generates key pairs for secure authentication (deprecated).
• ****:** The tag displays results of calculations or script actions.
• ****:** The tag visually represents the progress of a task.
• ****
• ****:** The tag draws dynamic graphics using JavaScript.
• ****:** The tag embeds audio content like music or sound effects.
• ****:** The tag inserts external resources such as media players or apps.
• ****:** The tag defines media sources for and
• ****:**The tag provides captions or subtitles for videos.
• ****

Deprecated Elements in HTML5

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

• The tag is removed; use .
• The tag is outdated; use .
• The tag is removed; use CSS for font styling.
• The tag is removed; use CSS font-size.
• The tag is not supported; use CSS text-align.
• The tag is removed; use
  .
• The tag is removed; use CSS for all text styling.
• The , , and tags are removed with no replacements.
• The tag is removed and no longer needed.
• The tag is removed; use CSS, , or .
• The tag is removed; use CSS or for monospace text.

HTML5 Advantages

HTML5 offers several benefits that enhance modern web development like:

• Works on all major browsers and devices (cross-platform).
• Lets websites access user location (geolocation).
• Supports offline use through Web Storage or AppCache.
• Uses semantic tags for cleaner, simpler code.
• Optimized for smooth performance on mobile devices.

HTML5 Disadvantages

Despite its strengths, HTML5 comes with some drawbacks:

• Older browsers may not support all HTML5 features (browser inconsistencies).
• Some older mobile devices struggle with HTML5 (mobile compatibility issues).
• Web Storage and similar features can pose security risks if misused.
• Advanced APIs introduce complexity for beginners.
• IE 8 and below show poor support for HTML5.

Example of HTML5

Here are demonstration of some HTM5 elements:

Adding a Video Using the

HTML `

`

• The
• The controls attribute adds play, pause, and volume control buttons.
• The tag specifies the video file and format. If the video is not supported, the text inside the

Using the Element for Drawing

HTML `

`

• The 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 Element to Show Task Progress

HTML `

HTML5 Progress Bar Example

`

• The 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
  ,
• **Ensure Cross-Browser Compatibility: Test your code across multiple browsers, especially older versions.
• **Use : Always specify the character encoding at the start to avoid encoding issues.
• **Mobile Responsiveness: Use the tag for mobile-friendly designs.

Introduction to Client Side and HTML