UNIT-1

1.HTML

HTML stands for HyperText Markup Language. It is a standard markup language used to create the structure and content of web pages. HTML is a fundamental building block of the World Wide Web and is essential for creating and designing web documents. In HTML, documents are structured using a system of elements represented by tags. These elements define the different parts of a webpage, such as headings, paragraphs, links, images, lists, forms, and more. HTML provides a way to organize information and present it on the internet in a standardized format. HTML documents are composed of a hierarchy of nested elements, and each element has a specific purpose in defining the content and structure of a webpage. The use of HTML is often complemented by other technologies like CSS (Cascading Style Sheets) for styling and layout, and JavaScript for adding interactivity and dynamic behavior.

HTML, which stands for HyperText Markup Language, is the standard markup language used to create and design documents on the World Wide Web. The evolution of HTML has gone through several versions, each introducing new features, elements, and improvements. Here is a brief overview of the key milestones in the evolution of HTML: HTML 1.0 (1991): The first version of HTML was introduced by Tim Berners-Lee in 1991. It included basic elements for structuring a document, such as headings, paragraphs, lists, and links. The syntax was simple, and there were only 18 tags. HTML 2.0 (1995): Published as an Internet Engineering Task Force (IETF) standard in 1995. Added features like forms, tables, and text alignment. The first version to support scripts and applets. HTML 3.2 (1997): Introduced in 1997 as a W3C Recommendation. Included support for scripting languages like JavaScript. Added new elements like <<>div<>>, span, and introduced support for styles through the <<>style<>> element. HTML 4.0 (1997-1999): Released as a W3C Recommendation in 1997, with HTML 4.01 released in 1999. Added support for scripting languages, applets, and introduced the concept of Cascading Style Sheets (CSS) for styling. Included the Document Object Model (DOM) to allow scripts to manipulate the content of a document dynamically. Introduced multimedia elements like <<>embed<>> and <<>object<>>. XHTML (Extensible HTML) 1.0 (2000): An XML-based version of HTML, designed to be more extensible and compatible with XML tools. Encouraged stricter adherence to XML syntax rules. XHTML 1.1 was released in 2001. HTML5 (2014): A major revision of HTML that brought many new features and improvements. Introduced new semantic elements like article, section, nav, header, footer, etc. Added native support for audio and video embedding (audio and video). Introduced the <<>canvas<>> element for 2D drawing and the <<>svg<>> element for vector graphics. Provided enhanced support for forms, including new input types. Emphasized native support for multimedia, eliminating the need for plugins like Flash in many cases. HTML Living Standard (Ongoing): HTML is now considered a "living standard" rather than being versioned. Development and updates are ongoing, with new features and improvements continually being added. HTML continues to evolve to meet the demands of modern web development, with ongoing efforts to improve accessibility, security, and support for emerging technologies. The development and standardization are overseen by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG)

3.WHY HTML5?

HTML5 was developed to address the shortcomings of its predecessors and to meet the evolving needs of web development. Several factors contributed to the development and adoption of HTML5:

Richer Multimedia Support: HTML5 introduced native support for audio and video elements, eliminating the need for third-party plugins like Flash. This made it easier to integrate multimedia content directly into web pages.

Improved Semantics: HTML5 introduced new semantic elements like(B) header, footer, article, section, and others. These elements provide a more meaningful structure to web documents, making it easier for both developers and search engines to understand content.

Enhanced Forms: HTML5 brought improvements to form handling, including new input types (such as email, date, and range) and attributes, making it easier for developers to create more user-friendly and functional forms.

Canvas and SVG Graphics: HTML5 introduced the (canvas) element for drawing graphics dynamically using JavaScript. Additionally, Scalable Vector Graphics (SVG) became a standard part of HTML5, enabling high-quality vector graphics on the web.

Offline Web Applications: HTML5 introduced the Application Cache (AppCache) feature, allowing web applications to work offline by caching resources. This was a significant step forward for improving user experiences in situations with limited or no internet connectivity.

Improved Performance: HTML5 brought various performance optimizations, including asynchronous script loading, which helps reduce page load times. This contributes to a better user experience and is crucial for mobile devices with limited bandwidth.

Cross-Platform Compatibility: HTML5 was designed to be more compatible across different devices and platforms, making it easier for developers to create responsive and adaptive web applications that work well on various screen sizes and devices.

Open Standard and Community Involvement: HTML5 is an open standard developed by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). Its development involved a collaborative effort from developers, browser vendors, and other stakeholders.

Security Improvements: HTML5 introduced various security features, such as the sandbox attribute for iframes and improved methods for handling cross-site scripting (XSS) vulnerabilities.

4. HTML4 VS HTML5

HTML4 and HTML5 are two different versions of the Hypertext Markup Language, each with its own set of features and improvements. Here are some key differences between HTML4 and HTML5:

1.Doctype Declaration: HTML4: Requires a Document Type Definition (DTD) declaration at the beginning of the document.
HTML5: Simplified the doctype declaration, and it is now just .

2.Syntax:
HTML4: Follows a more rigid and less semantic structure.
HTML5: Introduces new semantic elements, such as header, nav, section, article, footer, and others, making the markup more expressive and meaningful.

3.Multimedia:HTML4: Relies on third-party plugins (like Adobe Flash) for multimedia content.
HTML5: Includes native support for audio and video elements, eliminating the need for external plugins. This enhances compatibility and performance.

4.Graphics:HTML4: Uses div and span elements with CSS for layout and styling. Graphics are typically handled with external technologies like Flash or images.
HTML5: Introduces the canvas element, allowing for dynamic rendering of graphics directly in the browser.

5.Forms:HTML4: Limited form validation, and developers often relied on JavaScript for client-side validation.
HTML5: Enhances form capabilities with new input types (e.g., email, url, date, etc.), native form validation, and the

6.Offline and Storage:HTML4: Lacks built-in support for offline web applications.
HTML5: Introduces the Application Cache (AppCache) and Local Storage, enabling developers to create offline web applications and store data on the client-side.

7.APIs: HTML4: Relies heavily on JavaScript and external libraries for dynamic web applications.
HTML5: Introduces new JavaScript APIs, such as the Geolocation API, WebSockets, Web Workers, and more, providing enhanced functionality for modern web applications.

8.Backward Compatibility:HTML4: Older browsers may have limited support for newer features.
HTML5: Designed with backward compatibility in mind, with browsers implementing support for new features gradually. Features can be used alongside existing HTML4 elements.
HTML5 represents a significant leap forward in terms of features, semantics, and support for multimedia. It is widely adopted and recommended for modern web development. However, it's essential to consider browser compatibility and use feature detection or polyfills when necessary for older browsers.

FEATURES WHICH ARE NOT IN HTML 4 BUT INTRODUCED IN HTML 5

HTML5 introduced several features that were not present in HTML 4. Some of the notable additions include:

Semantic Elements:
HTML5 introduced semantic elements like header, footer, article, section, nav, and aside. These elements help structure a webpage more meaningfully.
Audio and Video Elements: Native support for audio and video elements allows developers to embed audio and video content directly into web pages without relying on third-party plugins like Flash

Canvas Element: The canvas element enables dynamic rendering of graphics, charts, and other visual elements using JavaScript. It provides a drawing API for developers.

New Form Input Types: HTML5 introduced new input types, such as (), (), (), and others. This enhances the functionality and user experience of web forms.

Form Validation: HTML5 introduced built-in form validation, allowing developers to specify required fields, minimum and maximum values, patterns, and more, without relying solely on JavaScript for validation.

Local Storage: The introduction of local storage (via the localStorage API) allows web applications to store data locally on a user's device, persisting even after the user closes the browser.

Session Storage: Similar to local storage, the sessionStorage API in HTML5 allows the storage of data for the duration of a page session, providing a way to store temporary information.

Web Storage: HTML5 introduced the concept of web storage, which includes both local storage and session storage, providing a more efficient alternative to using cookies for storing data on the client side.

WebSockets: WebSockets allow bidirectional communication between a client and a server over a single, long-lived connection. This enables real-time updates and interactions in web applications.

Geolocation API: The Geolocation API in HTML5 allows web applications to access a user's geographical location, enabling location-based services and features.

Offline Web Applications (AppCache): HTML5 introduced the Application Cache (AppCache), allowing web applications to work offline by caching resources, enhancing the user experience in scenarios with limited or no internet conn0ectivity.

HTML has been designed with a strong emphasis on backward compatibility, which means newer versions of HTML should maintain compatibility with older versions to ensure existing content remains functional. Here are some aspects of HTML's backward compatibility:

Document Structure: HTML5 allows for more flexible document structures, accommodating various practices from earlier HTML versions. Older elements like font, center, and others may still work, though newer, more semantic alternatives are encouraged.

Parsing Rules: HTML5 parsers are designed to handle markup from older HTML versions, ensuring that older web pages remain functional when rendered in modern browsers.

Deprecation Rather Than Removal: Instead of outright removing elements or attributes, HTML specifications often deprecate them, signaling that they may be obsolete in the future but can still be used. This helps maintain compatibility with existing content.

DOCTYPE Declaration: Including a proper Document Type Declaration (DOCTYPE) at the beginning of an HTML document triggers standards mode in browsers, ensuring that rendering follows the specified standards. This helps maintain compatibility with older HTML versions.

Quirks Mode: Browsers have different rendering modes, including quirks mode, which emulates older, less strict rendering behavior. This is activated when a web page lacks a DOCTYPE or contains certain deprecated features.

Global Attributes: HTML5 introduced a set of global attributes that can be applied to most elements. While these are encouraged for consistency, older attributes from previous HTML versions are often still supported.

Browser Rendering Tolerance: Modern browsers are designed to be tolerant of errors and inconsistencies in HTML markup. This tolerance helps maintain compatibility with older web pages that might not strictly adhere to the latest standards.

CSS Styling: HTML5 works seamlessly with both old and new CSS styles. Browsers are generally backward compatible with CSS rules, allowing older styling methods to continue functioning.

JavaScript Compatibility: Browsers maintain compatibility with older JavaScript code, ensuring that scripts written for previous HTML versions can still run in modern browsers.