**W3C (World Wide Web Consortium):** W3C is an international organization that

develops and maintains web standards to ensure consistency and compatibility across web
technologies.

**WebARIA (Accessible Rich Internet Applications):** WebARIA is a set of attributes that

can be added to HTML elements to make web content more accessible to people with
disabilities. It helps assistive technologies interpret and convey web content effectively.

Table

### 1. **Form Setup (`<form>`):**

- The `<form>` tag is like a container that wraps around the parts of your webpage where
users can input information. It's like a box where you put things you want to send.

```html
<form action="/submit" method="post">
<!-- Form content goes here -->
</form>
```

- `action="/submit"`: This tells the form where to send the information. In this case, it's
sending data to a location (URL) "/submit."
- `method="post"`: This specifies how to send the information. "post" is often used for
secure data like passwords.

### 2. **Table Structure (`<table>`):**

- Think of `<table>` as a grid. It divides your form into organized rows and columns.

```html
<table border="1" cellpadding="10" cellspacing="0" width="50%">
<!-- Table content goes here -->
</table>
```

- `border="1"`: Adds borders around cells.

- `cellpadding="10"`: Adds space inside cells.
- `cellspacing="0"`: Keeps cells close without space between them.
- `width="50%"`: Makes the table take up half the width of the page.

### 3. **Sections (`<thead>`, `<tbody>`, `<tfoot>`):**

- These divide your table into parts. Think of `<thead>` as the top, `<tbody>` as the middle,
and `<tfoot>` as the bottom.

```html
<table>
 <thead>
<!-- Header content goes here -->
</thead>
<tbody>
<!-- Main content goes here -->
</tbody>
<tfoot>
<!-- Footer content goes here -->
</tfoot>
</table>
```

### 4. **Header Row (`<th>`):**

- `<th>` is like a special cell that makes your header look bold and centered.

```html
<tr>
<th colspan="2">User Information</th>
</tr>
```

- `colspan="2"`: Merges two cells, creating a big cell for a clear header.

### 5. **Information Rows (`<tr>`):**

- Rows represent different pieces of information. Each row has cells (`<td>` or `<th>`) to
hold data.

```html
<tr>
<td><label for="username">Username:</label></td>
<td><input type="text" id="username" name="username" required></td>
</tr>
```

- `<label for="username">`: Associates a label with the input field.

- `<input type="text" id="username" name="username" required>`: A text input for the
username.

### 6. **Submit Button (`<button>`):**

- A button users click to send their information.

```html
<button type="submit">Submit</button>
```

### 7. **Attributes (`for`, `name`, `value`, `type`):**

- These attributes provide extra information about elements.

- **Example with `for` and `name`:**

```html
 <label for="username">Username:</label>
<input type="text" id="username" name="username" required>
```

- **Example with `value` and `type`:**

```html
<input type="checkbox" id="coding" name="interests" value="coding"> Coding
```

- `for`: Connects labels with input fields.

- `name`: Identifies each piece of information when the form is submitted.
- `value`: Assigns a value to checkboxes and radio buttons.
- `type`: Specifies the type of input field (text, password, email, radio, checkbox).

In summary, the form collects information organized in a table. Each row is like a section,
and cells within the row hold specific details. Labels help users understand what each field is
for, and the table keeps everything neat. When users click "Submit," the form sends the
details to a location specified in `action`.

FORM
1. `<form>` Element:
- The `<form>` element defines the HTML form container that wraps all the form controls.
- Attributes:
- `action`: Specifies the URL where the form data will be sent upon submission (in this
example, it's set to "#" to stay on the same page).
- `method`: Determines the HTTP method used for submitting the form data (e.g., "post"
or "get").
- `enctype`: Specifies how the form data should be encoded when submitting it to the
server (used for file uploads).

2. `<fieldset>` and `<legend>` Elements:

- The `<fieldset>` element groups related form controls together.
- The `<legend>` element provides a title or description for the group.

3. `<label>` Element:
- The `<label>` element is used to associate a text label with a form control, making it
accessible and improving user experience.
- The `for` attribute of `<label>` associates the label with the `id` of the corresponding form
control.

4. Various Input Types:

- `<input>` elements with different `type` attributes are used to collect various types of user
input.
- Common `type` values include:
- `text`: For single-line text input (e.g., username).
- `email`: For email addresses.
- `password`: For passwords (characters are hidden).
 - `radio`: For radio buttons (selecting one from multiple choices).
- `checkbox`: For checkboxes (multiple selections).
- `file`: For file uploads.
- The `name` attribute assigns a name to the form control, used to identify it when the form
is submitted.
- The `value` attribute sets the default or initial value for the form control.

5. `<textarea>` Element:
- The `<textarea>` element allows users to input multi-line text.
- The `name` attribute assigns a name to the textarea for form submission.
- The `rows` and `cols` attributes specify the number of visible rows and columns.

6. `<select>` and `<option>` Elements:

- The `<select>` element creates a dropdown select menu.
- The `<option>` elements define the selectable options within the dropdown.
- The `name` attribute assigns a name to the select menu for form submission.

7. Submit Button:
- An `<input>` element with `type="submit"` creates a button for form submission.
- The `value` attribute defines the text displayed on the button.

8. JavaScript Event Listener:

- The JavaScript code within the `<script>` element adds an event listener to the form's
submit event.
- When the form is submitted, the event listener captures the form data and converts it into
a JavaScript object.
- The form data is then printed to the browser's console for debugging or further processing.

<!DOCTYPE html>
<html>
<head>
<title>Sample Form</title>
<style>
label {
display: block;
margin-bottom: 5px;
}
.gender-labels {
display: flex;
}
.gender-labels label {
margin-right: 10px;
}
</style>
</head>
<body>
<form action="#" method="post" id="sampleForm" enctype="multipart/form-data">
<fieldset>
<legend>User Information</legend>
<label for="username">Username:</label>
 <input type="text" id="username" name="username" placeholder=”EnterName”
required>
<br>

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

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

<div class="gender-labels">
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<br>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>
<br>

<label for="newsletter">Subscribe to Newsletter:</label>

<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="newsletter">Yes</label>
<br>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
<option value="other">Other</option>
</select>
<br>

<label for="file">Upload File (jpg or pdf, max 1MB):</label>

<input type="file" id="file" name="file" accept=".jpg, .pdf">
<br>
<div id="fileSizeError" style="color: red;"></div>
</fieldset>

<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
How to optimize website assets loading?

To optimize website load time we need to optimize its asset loading and for that:

 CDN hosting - A CDN is like having copies of your website's assets (images, CSS,
JavaScript) stored in multiple locations worldwide. When a user visits your website,
the assets are loaded from the nearest CDN server, reducing the time it takes to fetch
them.
 File compression - This is a method that helps to reduce the size of an asset to reduce
the data transfer
 File concatenation - This reduces the number of HTTP calls
Instead of making separate requests for multiple CSS or JavaScript files, you combine
them into one. This reduces the number of HTTP requests. Example: Instead of
loading three separate CSS files, you combine them into one "styles.css" file,
resulting in fewer requests and faster loading.
 Minify scripts - This reduces the overall file size of JS and CSS files
 Parallel downloads - Browsers limit the number of simultaneous requests to a single
domain. You can use multiple subdomains to bypass this limit and speed up asset
loading. Example: Instead of loading all assets from "www.example.com," you can
set up "assets1.example.com," "assets2.example.com," and so on, allowing more
parallel downloads.
 Lazy Loading - Instead of loading all the assets at once, the non-critical assets can be
loaded on a need basis.
<img src="image.jpg" alt="Description of the image" loading="lazy">

What are the various formatting tags in HTML?

HTML has various formatting tags:

 <b> - makes text bold

 <i> - makes text italic
 <em> - makes text italic but with added semantics importance
 <big> - increases the font size of the text by one unit
 <small> - decreases the font size of the text by one unit
 <sub> - makes the text a subscript
 <sup> - makes the text a superscript
 <del> - displays as strike out text
 <strong> - marks the text as important
 <mark> - highlights the text
 <ins> - displays as added text

Can we display a web page inside a web page or Is nesting of webpages

possible?

 Yes, we can display a web page inside another HTML web page. HTML provides a
tag <iframe> using which we can achieve this functionality.
  <iframe src=”url of the web page to embed” />

What are some of the advantages of HTML5 over its previous versions?

 It has Multimedia Support.

 It has the capabilities to store offline data using SQL databases and application cache.
 Javascript can be run in the background.
 HTML5 also allows users to draw various shapes like rectangles, circles, triangles,
etc.
 Included new Semantic tags and form control tags.

What is the difference between <figure> tag and <img> tag?

The <figure> tag specifies the self-contained content, like diagrams, images, code snippets,
etc. <figure> tag is used to semantically organize the contents of an image like image,
image caption, etc., whereas the <img> tag is used to embed the picture in the HTML5
document.

Define Image Map?

Image Map lets a developer map/link different parts of images with the different web pages.
It can be achieved by the <map> tag in HTML5, using which we can link images with
clickable areas.

<img src=”image_url” , usemap=”#workspace” />

<map name=”workspace”>
<area shape=”rect” coords=”34, 44, 270, 350” , href=”xyz.html” />
<area shape=”rect” coords=”10, 120, 250, 360” , href=”xyz.html” />
</map>

What is Microdata in HTML5

Microdata in HTML5 is a way to embed structured data within web content. It allows
you to mark up specific pieces of information on your web page, making it easier for
search engines and other applications to understand and extract meaningful data from
your content.

Advantage : Improved SEO , Improved Accessibility