Scribd
Upload
14 views35 pages

HTML Notes

Uploaded by

nitindevml
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views35 pages

HTML Notes

Uploaded by

nitindevml
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML notes and revision

Topics
1. Basic Structure
2. Semantic HTML
Header <header>
Navigation <nav>
Section <section>
Article <article>
Aside <aside>
Footer <footer>
3. Forms
Form <form>
Input <input>
Textarea <textarea>
Select <select> and Option <option>
Button <button>
4. Links and Images
Anchor <a>
Image <img>
Image Map <map> and <area>
5. Tables
Table <table>
Table Header <thead> , Body <tbody> , and Footer <tfoot>
Table Cell <td> and Header Cell <th>
6. Lists
Ordered List <ol>
Unordered List <ul>
Definition List <dl> , <dt> , <dd>
7. Media
Image <img>
Audio <audio>
Video <video>
Embedding Content
8. Metadata

HTML notes and revision 1


Document Type Declaration <!DOCTYPE>
Document Encoding <meta charset>
Viewport Meta Tag <meta viewport>
Document Title <title>
Other Metadata <meta>
9. Accessibility
Semantic HTML Elements
Alternative Text for Images
Labeling Form Controls
Using ARIA Roles and Attributes
Providing Skip Navigation Links
Ensuring Keyboard Accessibility
10. Responsive Design
Viewport Meta Tag
Media Queries
Flexible Layouts
Fluid Images
Flexbox and Grid Layout
11. SEO (Search Engine Optimization)
Page Title <title>
Meta Description <meta name="description">
Heading Tags <h1> , <h2> , <h3> , etc.
Image Alt Text <img alt>
Semantic HTML
Canonical Link <link rel="canonical">
12. HTML5 APIs
Geolocation API
Web Storage API
Web Workers API
Canvas API
WebSockets API
13. Forms and Validation
Form <form>
Input Validation
Constraint Validation API
Custom Validation
14. Audio and Video
Audio <audio>

HTML notes and revision 2


Video <video>
Supported Formats
Autoplay and Loop
Accessibility Considerations
15. Drag and Drop
Draggable Attribute
Drag Events
Data Transfer

Topics
1. Basic Structure: Understand the basic structure of an HTML document,
including the <!DOCTYPE> declaration, <html> , <head> , and <body> tags.

2. Semantic HTML: Learn about semantic HTML elements ( <header> , <nav> ,


<section>, <article> , <aside> , <footer> , <main> , etc.) and their significance in
structuring web pages.

3. Forms: Understand how to create forms using <form> , <input> , <textarea> ,


<select> , and other form elements, as well as form validation and submission

using <button> and <input type="submit"> .

4. Links and Images: Learn how to create hyperlinks using <a> and include
images using <img> .

5. Tables: Understand how to create tables using <table> , <tr> , <td> , <th> , etc.,
and how to style them using CSS.

6. Lists: Learn about ordered <ol> and unordered <ul> lists, as well as list items
<li> .

7. Media: Understand how to embed media such as audio and video using
<audio> and <video> tags.

8. Metadata: Learn about the <meta> tag and its importance for providing
metadata about the HTML document.

9. Accessibility: Understand the importance of accessibility in web development


and learn how to use ARIA (Accessible Rich Internet Applications) attributes to
improve accessibility.

HTML notes and revision 3


10. Responsive Design: Learn about responsive design principles and how to
create responsive web pages using HTML and CSS.

11. SEO (Search Engine Optimization): Understand basic SEO principles and how
to optimize HTML content for search engines.

12. HTML5 APIs: Learn about HTML5 APIs such as Geolocation, Web Storage,
Web Workers, and Canvas for advanced web development features.

13. Best Practices: Understand best practices for writing clean, maintainable, and
accessible HTML code.

14. Integration with CSS and JavaScript: Understand how HTML integrates with
CSS for styling and JavaScript for interactivity.

15. Version Control: Learn how to use version control systems like Git to manage
your HTML files and collaborate with others.

1. Basic Structure
HTML, which stands for Hypertext Markup Language, is the standard markup
language used to create web pages. Understanding the basic structure of an
HTML document is fundamental to building web pages.
An HTML document starts with a <!DOCTYPE> declaration, which specifies the HTML
version being used. This is followed by the <html> element, which contains the
entire HTML document. Inside the <html> element, there are two main sections:
the <head> and the <body> .

The <head> section contains meta-information about the document, such as the
page title, character set, and links to external resources like stylesheets and
scripts. The <body> section contains the content of the web page, including text,
images, links, and other elements.
Here is a basic example of an HTML document structure:

htmlCopy code
<!DOCTYPE html>
<html>
<head>

HTML notes and revision 4


<title>My Web Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
<img src="image.jpg" alt="An image">
</body>
</html>

In this example, the <!DOCTYPE html> declaration specifies that the document is an
HTML5 document. The <html> element contains the entire document, and the
<head> element contains meta-information and links to external resources. The

<body> element contains the actual content of the web page.

Understanding the basic structure of an HTML document is essential for creating


well-structured and semantic web pages.

2. Semantic HTML
Semantic HTML elements are tags that clearly describe their meaning in the web
page content, rather than just how they should look. Using semantic elements
properly can improve the accessibility, SEO, and maintainability of your web
pages.

Header <header>
The <header> element represents a group of introductory or navigational aids. It
typically contains a logo or site name, along with navigation links or other
elements related to the header of a page.

Example:

htmlCopy code
<header>
<h1>My Website</h1>

HTML notes and revision 5


<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

Navigation <nav>
The <nav> element is used to define a section of navigation links that allow users
to navigate the website. It typically contains a list of links to different sections or
pages of the website.
Example:

htmlCopy code
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

Section <section>
The <section> element defines a section of a document or application. It is often
used to group related content together, such as a blog post, a chapter in a book,
or a set of FAQs.

Example:

HTML notes and revision 6


htmlCopy code
<section>
<h2>Featured Products</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</section>

Article <article>
The <article> element represents a self-contained piece of content that could be
distributed and independently understood. It can be used for blog posts, news
articles, forum posts, etc.
Example:

htmlCopy code
<article>
<h2>Blog Post Title</h2>
<p>Content of the blog post...</p>
</article>

Aside <aside>
The <aside> element represents content that is tangentially related to the content
around it. It is often used for sidebars or content that is not central to the main
content of the page.

Example:

htmlCopy code
<aside>

HTML notes and revision 7


<h3>Related Links</h3>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="#link3">Link 3</a></li>
</ul>
</aside>

Footer <footer>
The <footer> element represents a footer for its nearest sectioning content or
sectioning root element. It typically contains information about the author,
copyright information, and links to related documents.

Example:

htmlCopy code
<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

Using semantic HTML elements not only improves the structure and readability of
your code but also enhances the accessibility and SEO of your web pages.

3. Forms
HTML forms are used to collect user input, such as text, selections, and buttons.
They are essential for interactive websites and can be created using various form
elements and attributes.

Form <form>
The <form> element is used to create an HTML form for user input. It can contain
various form elements like text fields, checkboxes, radio buttons, etc., and has
attributes for defining the form's action (where the form data is sent) and method
(how the form data is sent).

HTML notes and revision 8


Example:

htmlCopy code
<form action="/submit-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<br>

<input type="submit" value="Submit">


</form>

Input <input>
The <input> element is used to create various types of input fields, such as text
fields, checkboxes, radio buttons, etc. It has attributes like type (specifying the
type of input field) and name (used to identify the input field when the form is
submitted).

Example (text field):

htmlCopy code
<label for="email">Email:</label>
<input type="email" id="email" name="email">

Example (checkbox):

htmlCopy code
<input type="checkbox" id="subscribe" name="subscribe" value
="yes">
<label for="subscribe">Subscribe to our newsletter</label>

HTML notes and revision 9


Textarea <textarea>
The <textarea> element is used to create a multiline text input field. It is used when
you need to allow users to enter longer text, such as comments or messages.
Example:

htmlCopy code
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></te
xtarea>

Select <select> and Option <option>


The <select> element is used to create a dropdown list of options, and the <option>

element is used to define the options within the dropdown list.


Example:

htmlCopy code
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>

Button <button>
The <button> element is used to create a clickable button within a form. It can be
used to submit the form, reset the form, or trigger a JavaScript function.

Example:

htmlCopy code
<button type="submit">Submit</button>

HTML notes and revision 10


<button type="reset">Reset</button>
<button onclick="myFunction()">Click me</button>

HTML forms are a crucial part of web development, allowing you to collect user
input and interact with users. Understanding how to create and use HTML forms is
essential for building dynamic and interactive web pages.

4. Links and Images


Links and images are essential elements in web development for navigating
between pages and displaying visual content. HTML provides specific elements
for creating links and embedding images in web pages.

Anchor <a>
The <a> element, also known as the anchor element, is used to create hyperlinks
to other web pages, files, locations within the same page, or email addresses.
Example (external link):

htmlCopy code
<a href="https://www.example.com">Visit Example</a>

Example (internal link):

htmlCopy code
<a href="#section2">Jump to Section 2</a>

Image <img>
The <img> element is used to embed images in a web page. It has attributes for
specifying the image source (URL), alternative text (for accessibility), width,
height, and more.
Example:

HTML notes and revision 11


htmlCopy code
<img src="image.jpg" alt="Description of the image" width="20
0" height="150">

Image Map <map> and <area>


An image map is a way of defining clickable areas on an image that link to
different destinations. It is created using the <map> element to define the map and
<area> elements to define the clickable areas.

Example:

htmlCopy code
<img src="planets.jpg" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.html" al
t="Sun">
<area shape="circle" coords="90,58,3" href="mercury.html"
alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.html"
alt="Venus">
</map>

Using links and images effectively in your web pages can improve navigation and
user experience. Understanding how to create links to different destinations and
embed images can enhance the visual appeal and functionality of your web
pages.

5. Tables
Tables in HTML are used to display data in a tabular format. They consist of rows
( <tr> ) and cells ( <td> for regular cells, <th> for header cells), organized into
columns.

HTML notes and revision 12


Table <table>
The element is used to create a table in HTML. It contains one or more
<table>

<tr> elements, each representing a row in the table.

Example:

htmlCopy code
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>

Table Header <thead> , Body <tbody> , and Footer <tfoot>


For better organization and structure, you can use the <thead> , <tbody> , and
<tfoot> elements within a <table> .

Example:

htmlCopy code
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>

HTML notes and revision 13


</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total: 2 entries</td>
</tr>
</tfoot>
</table>

Table Cell <td> and Header Cell <th>


The <td> element is used to create regular cells within a table, while the <th>

element is used to create header cells (which are typically bold and centered).
Example:

htmlCopy code
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>

HTML notes and revision 14


<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>

Using tables appropriately can help you present data in a structured and
organized manner on your web pages. However, it's important to use tables for
tabular data and not for layout purposes, as this can affect accessibility and
responsiveness.

6. Lists
Lists in HTML are used to group related items together. There are three main types
of lists in HTML: ordered lists, unordered lists, and definition lists.

Ordered List <ol>


An ordered list is a list where each item is numbered. It is created using the <ol>

element, and each item is defined using the <li> element.


Example:

htmlCopy code
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Unordered List <ul>


An unordered list is a list where each item is preceded by a bullet point. It is
created using the <ul> element, and each item is defined using the <li> element.

Example:

HTML notes and revision 15


htmlCopy code
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

Definition List <dl> , <dt> , <dd>


A definition list is a list of terms and their definitions. It is created using the <dl>
element, with each term defined using the <dt> element and its definition using
the <dd> element.

Example:

htmlCopy code
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Lists are useful for organizing and presenting information in a structured format.
They can be used for navigation menus, product listings, or any other content
where items need to be grouped together.

7. Media
HTML provides elements to embed various types of media, such as images, audio,
and video, into web pages. These elements allow you to enhance your content
with multimedia elements.

Image <img>

HTML notes and revision 16


The <img> element is used to embed images in a web page. It requires the src
attribute, which specifies the URL of the image, and the alt attribute, which
provides a textual description of the image for accessibility.

Example:

htmlCopy code
<img src="image.jpg" alt="Description of the image">

Audio <audio>
The <audio> element is used to embed audio content in a web page. It requires the
srcattribute, which specifies the URL of the audio file. You can also specify
additional attributes like controls to display audio controls (play, pause, volume) to
the user.
Example:

htmlCopy code
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Video <video>
The <video> element is used to embed video content in a web page. It requires the
src attribute, which specifies the URL of the video file. Like the <audio> element,
you can use the controls attribute to display video controls to the user.
Example:

htmlCopy code
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.

HTML notes and revision 17


</video>

Embedding Content
You can also embed content from other sources, such as YouTube videos or
Google Maps, using the <iframe> element.
Example (YouTube video):

htmlCopy code
<iframe width="560" height="315" src="https://www.youtube.co
m/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

HTML provides various elements for embedding different types of media, allowing
you to enhance your web pages with images, audio, video, and other multimedia
elements.

8. Metadata
Metadata in HTML provides information about the document, such as its title,
character encoding, authorship, and viewport settings. This information is not
displayed on the page but is used by browsers and search engines.

Document Type Declaration <!DOCTYPE>


The <!DOCTYPE> declaration specifies the document type and version of HTML
being used. It should be placed at the very beginning of an HTML document.
Example (HTML5):

htmlCopy code
<!DOCTYPE html>

Document Encoding <meta charset>

HTML notes and revision 18


The <meta charset> tag specifies the character encoding for the document. It
should be included in the <head> section of the document to ensure proper
rendering of special characters.
Example (UTF-8 encoding):

htmlCopy code
<meta charset="UTF-8">

Viewport Meta Tag <meta viewport>


The viewport meta tag controls the layout and scaling of the page on different
devices. It is particularly important for responsive web design.
Example (setting the viewport to the device's width and initial scale of 1):

htmlCopy code
<meta name="viewport" content="width=device-width, initial-sc
ale=1.0">

Document Title <title>


The <title> element specifies the title of the document, which is displayed in the
browser's title bar or tab.
Example:

htmlCopy code
<title>My Web Page</title>

Other Metadata <meta>


Additional <meta> tags can be used to provide other types of metadata, such as
authorship, description, keywords, and more. These tags help search engines
understand the content of the page.

HTML notes and revision 19


Example (author and description):

htmlCopy code
<meta name="author" content="John Doe">
<meta name="description" content="This is a description of my
web page.">

Metadata in HTML plays an important role in ensuring proper rendering and


accessibility of web pages, as well as improving their visibility in search engine
results.

9. Accessibility
Accessibility in web development refers to designing and developing websites
that can be used by people of all abilities, including those with disabilities. HTML
provides several features that help improve the accessibility of web pages.

Semantic HTML Elements


Using semantic HTML elements, such as <header> , <nav> , <main> , <section> ,
<article> , <aside> , and <footer> , helps screen readers and other assistive

technologies understand the structure of your content.

Alternative Text for Images


The alt attribute in the <img> element should be used to provide a text alternative
for images. This is important for users who cannot see the images, as screen
readers can read the alternative text aloud.
Example:

htmlCopy code
<img src="image.jpg" alt="Description of the image">

Labeling Form Controls

HTML notes and revision 20


Use the <label> element to associate labels with form controls. This helps users
who may have difficulty clicking on small or precise targets.
Example:

htmlCopy code
<label for="username">Username:</label>
<input type="text" id="username" name="username">

Using ARIA Roles and Attributes


ARIA (Accessible Rich Internet Applications) roles and attributes can be used to
provide additional information to assistive technologies about the purpose and
structure of your content.
Example (role="navigation" for a navigation menu):

htmlCopy code
<nav role="navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

Providing Skip Navigation Links


Skip navigation links allow keyboard users to skip repetitive content and navigate
directly to the main content of the page. This is particularly useful for users who
rely on keyboard navigation.
Example:

HTML notes and revision 21


htmlCopy code
<a href="#main-content" class="sr-only sr-only-focusable">Ski
p to main content</a>

Ensuring Keyboard Accessibility


Ensure that all interactive elements on your website, such as links and form
controls, can be easily accessed and activated using a keyboard alone.

By following these best practices for accessibility in HTML, you can ensure that
your web pages are usable and accessible to a wider range of users, including
those with disabilities.

10. Responsive Design


Responsive web design is an approach to web design that makes web pages
render well on a variety of devices and window or screen sizes. HTML provides
features that can help make your web pages responsive.

Viewport Meta Tag


The viewport meta tag controls how a webpage is displayed on a mobile device. It
ensures that the webpage is scaled correctly and fits the screen size.
Example:

htmlCopy code
<meta name="viewport" content="width=device-width, initial-sc
ale=1.0">

Media Queries
Media queries allow you to apply CSS styles based on the characteristics of the
device, such as screen width, height, and orientation. This allows you to create
responsive designs that adapt to different screen sizes.
Example (CSS media query):

HTML notes and revision 22


cssCopy code
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}

Flexible Layouts
Using relative units like percentages or vw (viewport width) in your CSS for widths
and margins allows your layout to adapt to different screen sizes.
Example:

cssCopy code
.container {
width: 80%;
margin: 0 auto;
}

Fluid Images
Using the max-width: 100%; CSS rule for images ensures that they scale down
proportionally on smaller screens, preventing them from overflowing their
containers.
Example:

cssCopy code
img {
max-width: 100%;
height: auto;
}

HTML notes and revision 23


Flexbox and Grid Layout
CSS Flexbox and Grid Layout are powerful layout mechanisms that make it easier
to create complex layouts that adapt to different screen sizes.

Example (Flexbox):

cssCopy code
.container {
display: flex;
justify-content: space-between;
align-items: center;
}

By implementing these responsive design techniques in your HTML and CSS, you
can create web pages that provide a consistent and user-friendly experience
across a wide range of devices.

11. SEO (Search Engine Optimization)


Search Engine Optimization (SEO) is the practice of optimizing your website to
improve its visibility in search engine results. HTML provides several features that
can help improve the SEO of your web pages.

Page Title <title>


The <title> element specifies the title of the document, which is displayed in the
browser's title bar or tab. It is also used by search engines as the title of the
search result.
Example:

htmlCopy code
<title>My Web Page</title>

Meta Description <meta name="description">

HTML notes and revision 24


The meta description tag provides a brief description of the web page. It is often
displayed in search engine results below the title and URL.
Example:

htmlCopy code
<meta name="description" content="This is a description of my
web page.">

Heading Tags <h1> , <h2> , <h3> , etc.


Using heading tags to structure your content not only makes it more readable for
users but also helps search engines understand the structure of your page. Use
<h1> for the main heading and <h2> , <h3> , etc., for subheadings.
Example:

htmlCopy code
<h1>Main Heading</h1>
<h2>Subheading</h2>

Image Alt Text <img alt>


The alt attribute in the <img> element should be used to provide a text alternative
for images. This is important for SEO as search engines can't "see" images but
can read the alt text.
Example:

htmlCopy code
<img src="image.jpg" alt="Description of the image">

Semantic HTML

HTML notes and revision 25


Using semantic HTML elements like <header> , <nav> , <main> , <section> , <article> ,
<aside> , and <footer> can also improve the SEO of your website by providing more

context to search engines.

Canonical Link <link rel="canonical">


If you have multiple URLs with similar content, you can use the canonical link tag
to indicate the preferred version of the page. This helps prevent duplicate content
issues.
Example:

htmlCopy code
<link rel="canonical" href="https://www.example.com/page">

By incorporating these SEO best practices into your HTML, you can improve the
visibility of your website in search engine results and attract more organic traffic.

12. HTML5 APIs


HTML5 introduced several new APIs (Application Programming Interfaces) that
allow web developers to add advanced features to their web applications. These
APIs provide access to device hardware and software capabilities, as well as new
ways to interact with web content.

Geolocation API
The Geolocation API allows web applications to access the user's geographical
location. This can be used for location-aware services or to provide customized
content based on the user's location.
Example (getting the user's current location):

javascriptCopy code
navigator.geolocation.getCurrentPosition(function(position) {
console.log("Latitude: " + position.coords.latitude);
console.log("Longitude: " + position.coords.longitude);

HTML notes and revision 26


});

Web Storage API


The Web Storage API allows web applications to store data locally on the user's
device. It provides two storage mechanisms: localStorage (persistent storage) and
sessionStorage (session-based storage).

Example (storing and retrieving data using localStorage):

javascriptCopy code
// Storing data
localStorage.setItem("username", "John");

// Retrieving data
var username = localStorage.getItem("username");
console.log("Username: " + username);

Web Workers API


The Web Workers API allows web applications to run scripts in the background,
separate from the main execution thread. This can be used to perform CPU-
intensive tasks without blocking the user interface.
Example (creating a new web worker):

javascriptCopy code
var worker = new Worker("worker.js");

// Message received from the worker


worker.onmessage = function(event) {
console.log("Message from worker: " + event.data);
};

// Sending a message to the worker

HTML notes and revision 27


worker.postMessage("Hello from main thread!");

Canvas API
The Canvas API provides a way to draw graphics, animations, and other visual
elements on the web page using JavaScript. It is particularly useful for creating
games and interactive visualizations.
Example (drawing a rectangle on a canvas):

javascriptCopy code
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 50, 50);

WebSockets API
The WebSockets API allows for full-duplex communication between a web
browser and a server over a single, long-lived connection. This enables real-time
communication between the client and server.
Example (connecting to a WebSocket server):

javascriptCopy code
var socket = new WebSocket("ws://example.com/socket");

socket.onopen = function() {
console.log("WebSocket connection opened");
};

socket.onmessage = function(event) {
console.log("Message received: " + event.data);
};

HTML notes and revision 28


socket.onclose = function() {
console.log("WebSocket connection closed");
};

// Sending a message to the server


socket.send("Hello from client!");

These are just a few examples of the many APIs available in HTML5. By leveraging
these APIs, web developers can create more powerful and interactive web
applications.

13. Forms and Validation


HTML provides various elements and attributes for creating forms and validating
user input. Proper form design and validation are essential for ensuring data
accuracy and improving the user experience.

Form <form>
The <form> element is used to create a form in HTML. It contains form elements
such as input fields, checkboxes, radio buttons, etc., and has attributes for
defining the form's action (where the form data is sent) and method (how the form
data is sent).
Example:

htmlCopy code
<form action="/submit-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required
>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<input type="submit" value="Submit">

HTML notes and revision 29


</form>

Input Validation
HTML5 introduced several new input types and attributes that help in input
validation. For example, the required attribute makes a field mandatory, and the
pattern attribute specifies a regular expression for validating the input.

Example (email input with validation):

htmlCopy code
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

Constraint Validation API


The Constraint Validation API provides a way to validate form inputs using
JavaScript. You can access the validity state of an input element and check if it is
valid or has any errors.
Example (checking if an input is valid):

javascriptCopy code
var emailInput = document.getElementById("email");
if (emailInput.validity.valid) {
// Input is valid
} else {
// Input is invalid, handle error
}

Custom Validation
You can also implement custom validation logic using the setCustomValidity()

method. This allows you to define custom error messages and validation rules for

HTML notes and revision 30


form inputs.
Example (custom validation for a password input):

javascriptCopy code
var passwordInput = document.getElementById("password");
passwordInput.addEventListener("input", function() {
if (passwordInput.value.length < 8) {
passwordInput.setCustomValidity("Password must be at
least 8 characters long");
} else {
passwordInput.setCustomValidity("");
}
});

By using these features, you can create forms that not only look good but also
provide a smooth user experience by guiding users to input data correctly.

14. Audio and Video


HTML5 introduced new elements for embedding audio and video content directly
into web pages, providing a native and consistent way to include multimedia on
the web.

Audio <audio>
The <audio> element allows you to embed audio content in a web page. You can
specify the audio file's source using the src attribute and provide controls for
playback using the controls attribute.
Example:

htmlCopy code
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.

HTML notes and revision 31


</audio>

Video <video>
The <video> element is used to embed video content in a web page. Similar to the
element, you can specify the video file's source using the
<audio> src attribute
and provide controls for playback using the controls attribute.
Example:

htmlCopy code
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

Supported Formats
Different browsers support different audio and video formats. To ensure
compatibility across browsers, you can provide multiple sources using the
<source> element with different formats.
Example (providing multiple video sources):

htmlCopy code
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video>

Autoplay and Loop

HTML notes and revision 32


You can use the autoplay attribute to automatically start playback when the page
loads and the loop attribute to loop the audio or video indefinitely.
Example (autoplaying and looping video):

htmlCopy code
<video autoplay loop>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

Accessibility Considerations
When using audio and video elements, it's important to provide alternative content
or captions for users who cannot access the audio or video content.
By using the <audio> and <video> elements, you can easily add audio and video
content to your web pages, enhancing the user experience with multimedia
content.

15. Drag and Drop


HTML5 introduced native support for drag and drop functionality, allowing users
to drag elements on a web page and drop them onto target areas. This feature can
be used to create interactive interfaces and improve the user experience.

Draggable Attribute
To make an element draggable, you can use the draggable attribute. Set it to "true"
to enable dragging for an element.
Example:

htmlCopy code
<div draggable="true">Drag me!</div>

Drag Events

HTML notes and revision 33


HTML5 provides several events that are triggered during the drag and drop
process, allowing you to customize the behavior of draggable elements.

dragstart : Fired when the user starts dragging an element.

drag : Fired repeatedly while the element is being dragged.

dragenter : Fired when a dragged element enters a drop target.

dragover : Fired when a dragged element is being dragged over a drop target.

dragleave : Fired when a dragged element leaves a drop target.

drop : Fired when a dragged element is dropped on a drop target.

: Fired when the drag operation is ended, either by dropping the


dragend

element or by canceling the drag operation.

Example (using drag events):

htmlCopy code
<div id="dragTarget" ondragover="allowDrop(event)" ondrop="dr
op(event)">Drop here</div>

<script>
function allowDrop(event) {
event.preventDefault();
}

function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>

In this example, the allowDrop function is used to allow dropping elements onto the
target, and the drop function handles the dropping of the element by appending it
to the target.

HTML notes and revision 34


Data Transfer
During a drag and drop operation, you can transfer data between the dragged
element and the drop target using the dataTransfer object.
Example (setting data to be transferred):

htmlCopy code
<div id="dragSource" draggable="true" ondragstart="drag(even
t)">Drag me!</div>

<script>
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
</script>

In this example, the drag function sets the data to be transferred as the ID of the
dragged element.
By leveraging HTML5's drag and drop functionality, you can create more
interactive and intuitive user interfaces in your web applications.

HTML notes and revision 35

You might also like