HTML5 Complete Reference

Last Updated : 30 Dec, 2024

HTML (HyperText Markup Language) is the standard language used to create and design web pages. It defines the structure and layout of a webpage using a series of elements and tags.

HTML5 is the latest version of HTML, bringing significant improvements for building modern web applications.
It introduces new semantic elements like <header>, <footer>, and <article> for better content organization.
HTML5 supports APIs, improved multimedia handling with <audio> and <video>, and a more robust Document Object Model (DOM) for interactive web experiences.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Example - 2025</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        h1 {
            color: #2c3e50;
        }
        p {
            color: #34495e;
        }
    </style>
</head>
<body>
    <h1>Welcome to HTML5!</h1>
    <p>The current year is 2025.</p>
</body>
</html>

HTML5 Structure: This example shows a basic HTML5 document structure with a <!DOCTYPE html> declaration, <head>, and <body> sections.
Inline CSS Styling: The <style> block within the <head> section applies simple styles to the body, heading, and paragraph elements, enhancing the presentation without external CSS files.

Features:

Introduced multimedia support with <audio> and <video> tags for embedding audio and video.
Added new graphic elements like <canvas> for drawing shapes, and support for vector graphics.
Improved semantic structure with tags like <header>, <footer>, <article>, <section>, and <figure>.
Drag-and-drop functionality allows users to move objects within a page.
Geo-location API enables websites to access the user’s geographical location.
Web Storage API allows storage of data on the client’s browser for offline access.
Supports offline data storage with IndexedDB, a client-side SQL-like database.
Enables drawing various shapes (like triangles, rectangles, circles) on the canvas.
Better error handling for incorrect syntax, improving code resilience.
Simplified DOCTYPE declaration: <!DOCTYPE html> for cleaner document structure.
Easy character encoding specification with <meta charset=”UTF-8″>.

Complete Reference:

Title	Description	Example
HTML5 \| Introduction	HTML stands for Hyper Text Markup Language. It is used to design web pages.	Try
HTML5 \| Editors	HTML text editors are used to create and modify web pages.	Try
HTML5 \| Basics	There are various tags that we must consider and include while starting to code in HTML.	Try
HTML5 \| Attributes	All HTML elements have attributes that will provide additional information about that particular element.	Try
HTML5 \| <!DOCTYPE>	<!DOCTYPE> is used to define the document type and declare the version of HTML being used (e.g., HTML5).
HTML5 \| Paragraph	The <p> tag in HTML defines a paragraph.	Try
HTML5 \| Text Formatting	HTML facilitates the ability for formatting text just like we do in any text editing software.	Try
HTML5 \| Quotations	The Quotation elements in HTML are used to insert quoted texts in a web page.	Try
HTML5 \| Tables	HTML Table is an arrangement of data in rows and columns, or possibly in a more complex structure.	Try
HTML5 \| Lists	A list is a record of short pieces of related information or used to display the data on web pages in the ordered or unordered form.	Try
HTML5 \| Spell Check	The Spell Check feature in HTML is used to detect grammatical or spelling mistakes in the text fields.	Try
HTML5 \| Color Styles and HSL	Colors are used to make the page more attractive.	Try
HTML5 \| Geolocation	Geo-location is used to share the location with some websites and be aware of the exact location.	Try
HTML5 \| Drag and Drop	Drag and Drop is a very interactive and user-friendly concept that makes it easier to move an object to a different location by grabbing it.	Try
HTML5 \| Charsets	The character set or character encoding has different character encoding standards which assign some numbers to these character set which can be used in the internet.	Try
HTML5 \| Images	By adding images, we can make our websites more attractive.	Try
HTML5 \| Doctypes	A doctype declaration is an instruction that tells the web browser about the markup language in which the current page is written.	Try
HTML5 \| Layout	Page layout is the part of graphic design that deals with the arrangement of visual elements on a page.	Try
HTML5 \| File Paths	A file path specifies the location of a file inside a web folder structure.	Try
HTML5 \| Iframes	The ”iframe” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.	Try
HTML5 \| Links	Link is a connection from one web resource to another.	Try
HTML5 \| Deprecated Tags	The deprecated tags are those attributes which are replaced by some other attributes.
HTML5 \| URL Encoding	URL Encoding takes place by replacing all the characters that are not allowed by a % sign followed by two hexadecimal digits.	Try
HTML5 \| SVG-Basics	SVG defines vector-based graphics in XML format.	Try
HTML5 \| Canvas Basics	The HTML “canvas” element is used to draw graphics via JavaScript.	Try
HTML5 \| Computer Code Elements	The <code> tag in HTML is used to define the piece of computer code.	Try
HTML5 \| Entities	HTML provides some Entity names and Entity numbers to use symbols which are normally not present in basic keyboard.	Try
HTML5 \| canvas drawImage() Method	canvas drawImage() function is used to display an image or video on canvas.	Try
HTML5 \| template Tag	The <template> tag in HTML is used to store the HTML code fragments, which can be cloned and inserted in an HTML document.	Try
HTML5 \| dropzone Attribute	The dropzone attribute in HTML is used to specify whether the dragged data copied, moved, or linked when it is dropped on any element.	Try
HTML5 \| rp Tag	The <rp> tag in HTML is used to provide parentheses around a ruby main text which defines the information.	Try
HTML5 \| rt Tag	The <rt> tag in HTML is used to define the explanation of the ruby annotation which is a small text, attached with the main text.	Try
HTML5 \| <ruby> Tag	The <ruby> tag in HTML is used to specify the ruby annotation which is a small text, attached with the main text to specify the meaning of the main text.	Try
HTML5 \| figure Tag	The <figure> tag in HTML is used to add self-contained content like illustrations, diagrams, photos, or codes listing in a document.	Try
HTML5 \| figcaption Tag	The <figurecaption> tag in HTML is used to set a caption to the figure element in a document.	Try
HTML5 \| fieldset Tag	The <fieldset> tag in HTML5 is used to make a group of related elements in the form, and it creates the box over the elements.	Try
HTML5 \| <head> Tag	The <head> tag in HTML is used to define the head portion of the document which contains information related to the document.	Try
HTML5 \| <dialog> Tag	The <dialog> tag is used to specify the dialog box or window.	Try
HTML5 \| <bdi> Tag	It differentiates a text from other text that may be formatted in a different direction.	Try
HTML5 \| <progress> Tag	It is used to represent the progress of a task.	Try
HTML5 \| <meter> Tag	It is used to define the scale for measurement in a well-defined range and also supports a fractional value.	Try
HTML5 \| <wbr> Tag	It is used to define the position within the text which is treated as a line break by the browser.	Try
HTML5 \| mark Tag	The <mark> tag in HTML is used to define the marked text.	Try
HTML5 \| <header> Tag	The <header> tag in HTML is used to define the header for a document.	Try
HTML5 \| <footer> Tag	The <footer> tag in HTML is used to define a footer of HTML document.	Try
HTML5 \| article tag	The <article> tag is used to represent an article.	Try
HTML5 \| <aside> Tag	The <aside> tag is used to describe the main object of the web page in a shorter way like a highlighter.	Try
HTML5 \| <section> Tag	Section tag defines the section of documents such as chapters, headers, footers or any other sections.	Try
HTML5 \| <summary> Tag	The <summary> tag in HTML is used to define a summary for the <details> element.	Try
HTML5 \| <details> tag	The <details> tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it.	Try
HTML5 \| Semantics	Semantic elements have meaningful names which tells about type of content.	Try
HTML5 \| Mathematical operators	Mathematical Operators are used for representation of mathematical and technical operators.	Try
HTML5 \| Video	The “video” element specifies a standard way to embed a video on a web page.	Try

Best Practices for HTML5

Use Semantic Elements: Incorporate HTML5 semantic tags like <header>, <footer>, <article>, and <section> to enhance code readability and improve SEO.
Use Proper Document Structure: Always declare the <!DOCTYPE html> at the beginning of your HTML documents to ensure consistent rendering across browsers.
Optimize Media Elements: Utilize the <audio> and <video> tags for embedding media, and provide multiple formats to ensure compatibility across different browsers.
Implement Responsive Design: Use the <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> tag and relative units to ensure your website is mobile-friendly and responsive.

HTML5 Complete Reference- FAQ’s

What is HTML5?

HTML5 is the latest version of the HyperText Markup Language, designed to structure and present content on the web with enhanced features for modern web applications.

How does HTML5 differ from HTML4?

HTML5 introduces new semantic elements, supports multimedia natively without plugins, and offers improved APIs for web application development, unlike HTML4.

Is HTML5 backward compatible with older browsers?

Yes, HTML5 is designed to be backward compatible; however, some features may not work in very old browsers without the use of polyfills or fallback content.