HTML FREECODECAMP NOTES

1. COMMENTS:<!-- -->
2. <main>: HTML easier to read and help with Search
Engine Optimization (SEO) and accessibility.
3. Src: The src attribute in an img element specifies the
image's URL (where the image is located).
EX. <img src=” https://cdn.freecodecamp.org/curriculum/cat-
photo-app/relaxing-cat.jpg alt=”a Cat”>

[alt name should be there if in case image fails to

load]
4. We can link to another page with the anchor element.
EX. <a href=” https://freecatphotoapp.com”>here we
should write about that description</a>
5. Like we made a link using a href we can also make a
word like a link into the p tag too ,EX.
<p>Click here to view more <a href="https://freecatphot
oapp.com">cat photos</a></p> yaha phele click here to
view more cat photos likha tah toh vo cat photos ko
humny ek link banadiya
6. TARGET ATTRIBUTE: Add a target attribute with the
value _blank to the anchor (a) element's opening tag,
so that the link opens in a new tab.
7. Image ko agar link banahy toh:EX=
<a href="https://freecatphotoapp.com" ><img src="https:
//cdn.freecodecamp.org/curriculum/cat-photo-app/
relaxing-cat.jpg" alt="A cute orange cat lying on its b
ack."></a>
8. Section: Before adding any new content, you should
make use of a section element to separate the cat
photos content from the future content.
9. When you add a lower rank heading element to the
page, it's implied that you're starting a new subsection.
10. UL:EX= <ul>
<li>milk</li>
<li>cheese</li>
</ul>

11. FIGURE ATTRIBUTE: The figure element represents

self-contained content and will allow you to associate
an image with a caption.
A figure caption: (figcaption) element is used to add a
caption to describe the image contained within the figure
element. EX: <figure>
<img src="https://cdn.freecodecamp.org/
curriculum/cat-photo-app/lasagna.jpg" alt="A slice of las
agna on a plate.">
<figcaption>Cats love lasagna.</figcaption>
</figure>
12. <em></em>: Emphasize tag
13. ORDERED LIST: <ol>
<li>flea treatment</li>
<li>thunder</Ii> <li>other cats</li></ol>
14. STRONG ATTRIBUTE: The strong element is used to
indicate that some text is of strong importance or
urgent.
15. FORM KA ACTION: The action attribute indicates
where form data should be sent. For example, <form
action="/submit-url"></form> tells the browser that
the form data should be sent to the path /submit-url.
EX: <form action="https://freecatphotoapp.com/submit-cat-
photo"></form>

16. The input element allows you several ways to collect

data from a web form. Like img elements, input
elements are self-closing and do not need closing tags.
17. In order for a form's data to be accessed by the
location specified in the action attribute, you must give
the text field a name attribute and assign it a value to
represent the data being submitted. For example, you
could use the following syntax for an email address
text field: <input type="text" name="email">
18. Placeholder text is used to give people a hint about
what kind of information to enter into an input. For
example, <input type="text" placeholder="Email
address">
19. To prevent a user from submitting your form
when required information is missing, you need to add
 the required attribute to an input element. There's no
need to set a value to the required attribute. Instead,
just add the word required to the input element,
making sure there is space between it and other
attributes.EX:
<input type="text" name="catphotourl" placeholder="cat
photo URL" required>
20. <button>Submit</button>, The default behavior of clicking a
form button without any attributes submits the form to the location specified
in the form's action attribute.
The button you added will submit the form by default. However, relying on
default behavior may cause confusion. Add the type attribute with the
value submit to the button to make it clear that it is a submit button.
<button type="submit">Submit</button>
21. RADIO BUTTON: You can use radio buttons for questions where
you want only one answer out of multiple options
22. <Label> daly gay toh vo word may bhi click karygy
toh radio button,checkbox choose hoga.
23. The id attribute is used to identify specific HTML
elements. Each id attribute's value must be unique
from all other id values for the entire page.
EX: <label><input type="radio" id="indoor"> Indoor</label>

24. Esa upar jaysy likhy gay toh dono bhi radio
buttons select hojayehga,just ek karo toh dusra
unselect hony kay liyeh esa name attribute with same
value dalna hota hy ,EX:
 <label><input id="indoor" type="radio" name="indoor-
outdoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="i
ndoor-outdoor"> Outdoor</label>
25. The value attribute is used to set the value of
<input> elements: it defines the value associated with
the input and the value in the name/value pair that is
sent to the server on form submission.
the form data for the button is based on its name and value attributes.
Since your radio buttons do not have a value attribute, the form data will
include indoor-outdoor=on, which is not useful when you have multiple
buttons.
26. The fieldset element is used to group related inputs
and labels together in a web form. fieldset elements
are block-level elements, meaning that they appear on
a new line.
27. The legend element acts as a caption for the content
in the fieldset element. It gives users context about
what they should enter into that part of the form.(yeh
esa karta hy)

28. CHECKBOX ATTRIBUTE TO CHOOSE MULTIPLE

OPTION
In order to make a checkbox checked or radio button
selected by default, you need to add the checked
attribute to it.EX:
<label><input id="indoor" type="radio" name="indoor-
outdoor" value="indoor" checked> Indoor</label>

<footer></footer>: Headers and footers generally

contain document information, such as the file
name, author, date created, page numbering and
the like. This information is repeated on each page
and thus enables the reader to easily navigate the
document.ex: <footer>
<p>
No Copyright - <a href="https://
www.freecodecamp.org">freeCodeCamp.org</a>
</p>
</footer>
29. <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">