1.

div tag
- used to group together other HTML elements.
- this grouping helps maintain clarity and organization within the HTML document.
- you just simply wrap the content or other HTML elements you want to group
together within opening div and closing div tags
- only serves as a container without directly changing how output looks or is
organized.

2. line break- <br> tag

- no closing tag

3. img tag
- used to display an image
- uses src to specify the source of image being displayed.
- if we want to choose an image from anywhere else we need to specify the image's
link in src
- alt in image tag- used to provide description of image.
- useful in situation where image is not properly loaded on screen.
- used by screen readers to explain the image to visually impaired people.

4. a tag
- used to create a link to webpage.
<a href="https://en.wikipedia.org/wiki/Bear">Let's read about Bears!</a>

- <a> element contains href. When we click the link, the href identifies the web
page to which the browser will now take us.
- target attribute specifies where the linked document will open.
- By default, when a user clicks on a link, the browser navigates to the
linked document in the same window or tab.

- The target attribute accepts the following values:

_self: This is the default value. It opens the linked document in the
same window where the link was clicked.

_blank: Opens the linked document in a new window or tab.

Attributes
- An attribute is used to set the behaviour of an HTML element. It has two parts, a
name and a value, and is added within the opening tag of an element.
- title attribute:-The title attribute is used to set the text which is displayed
when the mouse is hovered over an HTML element.
<h1 title="The web loves HTML">On the internet, HTML is everywhere</h1>
- The img element uses the src attribute to find where the image is located.
- Similarly, the a element uses the href attribute to point to the destination
link.

HTMLElement.dataset
- dataset is read only property that allows us to set and get custom data
attributes, data-*, on our HTML elements
- All dataset attribute names should begin with data-
<h1 id="fruit" data-fruit-name="orange">Orange</h1>
- the data property is called fruit-name and its value is orange.

Void Elements
- self-closing elements and they do not require a closing tag. These elements are
called Void Elements.
<p>Some text here.</p>
<br>
<hr>
<img src="image.jpg" alt="Image">
<input type="text" placeholder="Enter your name">
- since no closing tag no content can be added between opening and closing tags

5. button
- creates an element clickable button.
- when we add a button element with type of attribute set ass submit, it will be
responsible for submitting the data entered in the form by the user.
- type attribute is not added to a <button> element, its default type will be
submit.

<button type="button">I am clickable!</button>

- When we add a <button> element with the type attribute set as submit, it will be
responsible for submitting the data entered in the form by the user.

If the type attribute is not added to a <button> element, its default type will be
submit.

However, if the button is placed outside a <form> element, specifying type="submit"

would have no effect as there is no associated form to submit.

In this scenario, the button would behave like a regular button without any default
action triggered by pressing it.

- button type-reset

6. Table
- The <table> element is used to display data in a table consisting of rows and
columns.

The following elements are used to arrange the data within a <table> element:

<tr> - It is used to add a table row.

<td> - It is used to add information in a table row.

Table Header Row

- A header row in a table contains the names of the columns in the
table.
- We can use <th> in place of <td> for making a header row.

Table Title- Caption element

- The <caption> element is used to add a title to the table. It must be
placed immediately after the opening <table> tag.

Table Header
- The <thead> element is used to organize the header row of a table.
- used immediately after table tag is initiated
Table Footer
- <tfoot> element is used to organize the footer row of a table.
Table body
- The <tbody> element is used to organize the body of a table.
- All the rows after the thead and before the tfoot elements can be
placed inside the tbody element.
 - caption at the top, thead as the header, tbody comprising all the
data and tfoot making up the footer.

7. Form Element
- collect information that the user submits.
- HTML <form> element can nest other elements like input, label, textarea, button,
etc. inside it to represent different parts of a form.

<form>
<input placeholder="Enter your name here">
<button type="button">Submit</button>
</form>

8. Input Element
- accepts data from the user.
- function depends on the value of its type attribute
<form>
<input type="text">
<input type="submit">
</form>

9. Label Element
- puts a label on other form elements.
<form>
<label>Name:</label>
<input>
</form>

label used to understand the purpose of input element

- placeholder is the text that appears in an input field before the user clicks and
starts typing.

<form>
<label>Full Name:</label>
<input placeholder="Sam Smith">
</form>

10. Textarea Element

- submitting large textual content
- to control its size the rows and cols attributes are utilized.

<form>
<label>Your Review:</label>
<br>
<textarea
rows="3"
cols="30"
>Add detailed review here</textarea>
</form>

11. Select Element

- for creating drop-down
- value attribute within each <option> specifies the value linked to that
particular choice. In the example above, when the Apple option is selected, the
value apple and fruit are sent to the website as part of the data on form
submission.
<form>
<label>Choose a fruit:</label>
<select>
<option value="apple">Apple 🍎</option>
<option value="orange">Orange 🍊</option>
<option value="mango">Mango 🥭</option>
<option value="banana">Banana 🍌</option>
</select>
</form>

12. Fieldset element

- used to group related form elements

<form>
<label>First Name:</label>
<input placeholder="Sam" >

<label>Last Name:</label>
<input placeholder="Smith" >

<fieldset disabled>
<label>City:</label>
<br>
<input placeholder="Pune" >
<br>

<label>State:</label>
<br>
<input placeholder="Maharashtra" >
<br>

<label>Country:</label>
<br>
<input placeholder="India" >
</fieldset>
</form>

13. Legend Element inside fieldset

- used inside fieldset element
- provides a title for the group of form elements inside the fieldset

<form>
<label>Name:</label>
<br>
<input placeholder="Sam Smith">
<br>

<label>Email:</label>
<br>
<input placeholder="[email protected]">
<br>

<fieldset>
<legend>Shipping Address</legend>
<label>Apartment/Block:</label>
 <br>
<input placeholder="Office #803, 8th Floor, World Trade Center, Tower 2,
Kharadi">
<br>

<label>City:</label>
<br>
<input placeholder="Pune" >
<br>

<label>State:</label>
<br>
<input placeholder="Maharashtra" >
<br>

<label>Country:</label>
<br>
<input placeholder="India">
<br>

<label>Zip Code:</label>
<br>
<input placeholder="411014" >
<br>
</fieldset>

<input type="submit">
</form>

- required attribute
cannot submit the form without providing a name.

Basic structure of form is as follows:

label, input, textarea, fieldset go inside form element

<form>
<label>Name: </label>
<input>

<fieldset>
<legend>Address:</legend>
<label>Apartment/Office:</label>
<br>
<input placeholder="Office #803, World Trade Center, Tower 2" >
<br>

<label>City:</label>
<br>
<input placeholder="Pune">
<br>

<label>State:</label>
<input placeholder="Maharashtra">
<br>

<label>Country:</label>
<input placeholder="India">
 <br>
</fieldset>

<label>Review:</label>
<br>
<textarea rows="3" cols="30" placeholder="Add detailed review here"></textarea>
<br>

<label>Favorite color:</label>
<select>
<option value="apple">Red</option>
<option value="orange">Green</option>
<option value="mango">Blue</option>
</select>
<br>

<button type="reset">Reset</button>
<button type="submit">Submit</button>
</form>

NOTE- ELements to avoid

avoid these elements inside the form element directly
- p, h1-h6: It's best to avoid these elements directly inside <form>. They can
cause accessibility issues and make form submission unclear.
- a: It is generally discouraged to have <a> elements directly inside a form for
submit buttons, it can be acceptable for links within the form content, like
"Forgot password?" or additional information links.

- input type= password

For security purposes, it hides the text entered by the user by displaying symbols
like the dot in place of each character entered.

- input type= submit

creates a button for submitting the form data

Difference between Input Type - Submit and Button Type - Submit

- we cannot add any content in the input element because it does not have a closing
tag.

But, in the button element with type="submit", we are free to add text, images or
even other HTML elements.

- input type= reset

resets all the form data to default values

- input type="radio"
create a list from which the user can select one option.
<form>
<label>Can you vote?</label>
<br>
<input type="radio" value="no" name="vote">
<label>No</label>
<br>
<input type="radio" value="yes" name="vote">
<label>Yes</label>
<br>
 <input type="radio" value="maybe" name="vote">
<label>Maybe!</label>
</form>

value attribute is important for the website to analyze the choice made by user.
required to have the name attribute be the same for all the radio input types for
them to be treated as a group.

- input type= checkbox

allows user to select one or more options from a list of choices.
The value attribute helps the website understand the user's choice and hence you
should remember to include them. If you don't include a value attribute for a
particular input, the website will assume it to be on.

-input type=button

- input type=email
a field for an e-mail address.
<label>Enter your email:</label>
<input type="email" value="[email protected]"><br>
<button>Submit</button><br>
input type has an in-built validation. This prevents users to add values which are
not in correct email format.

- input type- date

allows users to input a date using a date picker or by manually entering data.
label for="birth-date">Birthday:</label>
<input type="date" min="1950-01-01" max="2000-01-01"><br>
<button>Submit</button

- input type="time"
- input type="file"
element defines a file-select field along with a "Browse" button.

<input type="file" accept="image/png, image/jpeg"

placeholder="image.png/image.jpeg" multiple><br>

- input for
label element has a for attribute which lets us bind this attribute to particular
form element that it references.
for attribute value should be the same as the value for the id of the form input
element. This way, the label element is now bound to this particular form element.

autofocus attribute

allows an input field to automatically focus when the page loads, without requiring
the user to click inside the input field.

<label for="username">Full Name:</label>

<input type="text" id="username" autofocus>
<br>
<label for="email">Email Address:</label>
<input type="email" id="email">
<br>
<button>Submit</button>

In this example, the Full Name: input field automatically gains focus when the page
loads, allowing the user to start typing without needing to click inside the field.

1. Doctype

- special element that is added only at the top of the document.

- provides info about the type of HTML used in the document
<!DOCTYPE html>

2. HTML element

- main element which acts as the container for all the other elements except <!
DOCTYPE> element.
- head and body are placed inside html element
- use language attribute in html tag to declare the language of webpage

3. Head Element

- used for specifying additional information about your webpage. Information such
as which fonts to use, which JavaScript or CSS files to link to, what is the title
of the page, etc.
- Given below are a few important elements which help store this information:

<title> element, which is used to set the title of the web page. This gets
displayed in the browser's title bar or page tab.
<link> element, which is used to add external resources, such as CSS files.
<script> element, which is used to embed JavaScript code.

4. Body element
- contains HTML elements that are used to display the contents of the webpage such
as headings, images, paragraphs , links etc..
- can be only one body tag within HTML document

Document Structure

<!DOCTYPE html>
<html>
<head>
</head>
 <body>
</body>
</html>

A <!DOCTYPE> declaration
An <html> element, which is the root HTML element that holds all the other
elements.
A <head> element, which contains information about the document.
A <body> element, which contains the actual content displayed in the browser.