HTML5 Overview and Versions

HTML5 Overview

• HTML5 is the latest version of HyperText Markup Language
• It's used to structure and display content on the web
• HTML5 includes new semantic elements, multimedia support, improved forms, offline features, and better cross-platform compatibility
• It's designed to work well on various devices like phones, tablets, and computers

HTML Versions

• HTML 1.0 (1991): Basic document structure, text formatting, and hyperlinks. Lacks multimedia support and form elements.
• HTML 2.0 (1995): Formalized structure, added support for forms, tables, and basic document attributes. Still lacked multimedia elements.
• HTML 3.2 (1997): Introduced support for CSS and JavaScript to style pages and create interactive elements. Tables were used for layout but were often misused.
• HTML 4.01 (1999): Emphasized separation of content from presentation using CSS. Deprecated non-semantic tags, introduced accessibility concepts. Still lacked native support for multimedia or offline features.
• XHTML (2000s): XML-based with stricter syntax for structure and accuracy but lacked support for multimedia.

HTML5 Features

• Easy Multimedia: Directly embed videos and music using simple tags. No need for external plugins.
• Interactive Graphics: Use <canvas> tag for drawing shapes, animations, or games directly on webpages.
• Smarter Forms: Support for input types like date, email, and number. Input validation enhances data entry.
• Offline Access: Websites can store data on user devices enabling application functionality even without internet connection.
• Real-time Features: Support for live chat, video calls, and multiplayer games using WebSockets and WebRTC.
• Mobile Friendly: Designed to work seamlessly on various mobile devices without special adjustments.
• Improved Structure: Includes semantic tags like <header>, <footer>, <article>, <section>, <nav>, <aside>, <figure>, <details>, and <address> to enhance structure and accessibility.

Semantic Tags

• <header>, <footer>, <nav>, <aside>, <article>, <section>
• These tags improve document structure aiding search engines and accessibility.

Block and Inline Elements

• Block Elements: Start on a new line and take up full width. Examples include <div>, <p>, <h1> to <h6>.
• Inline Elements: Do not start on a new line, only take needed width. Examples include <span>, <a>, <img>.
• Block elements can contain other block and inline elements, but inline elements cannot contain block elements.

Multimedia Tags

• Embed audio files into a webpage.
• Embed video files into a webpage.
• : Used to specify alternative audio or video files for browsers.
• : used for plug-in applications.
• : Used to specify subtitles, captions or other files.

HTML Forms

• Purpose: Collect user input.
• Interactive Controls: Text fields, checkboxes, radio buttons, and more.
• Structure: <form> encloses input elements
• Important Tags: <form>,<label>, <input>, <button>, <select>, <textarea>, <fieldset>, <legend>

Input Types

• text, password, email: Standard input fields.
• checkbox, radio: Allow multiple or single selections.
• number, date, file: Specialized input types.
• required, readonly, disabled, maxlength, pattern: Attributes to enhance input elements.

Attributes of <form>

• action: URL to submit data to.
• method: GET or POST, how data is submitted.
• target: Where the response should load, self, _blank.

HTML Responsive Design

• General: Design should adapt across different screen sizes from phones to desktops.
• Viewports: The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag properly handles responsiveness.
• Images: Appropriate CSS properties like width, max-width, and height for images.
• Text: Using the viewport unit vw allows text to scale proportionately with browser window.