Topic: Learn HTML by Building a Cat Photo App

Keywords / Questions: Notes:

The main element is used to represent the

main content of the body of an HTML
document.

<main>
<h1>Most important content of the
document</h1>
<p>Some more important content...</p>
</main>

To open the link of an anchor element in a

different tab, use target attribute:

<a href=”www.google.com”
target=”_blank”></a>

The section element is used to define

sections in a document, such as chapters,
headers, footers, or any other sections of
the document.

<section>
<h2>Section Title</h2>
<p>Section content...</p>
</section>

To create an unordered list of items, you

can use the ul element.

<ul>
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>

The code for an ordered list (ol) is similar to

an unordered list, but list items in an
ordered list are numbered when displayed.

<ol>
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ol>

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.

<figure>
<img src="image.jpg" alt="A description of
the image">
<figcaption>A cute cat</figcaption>
</figure>

To place emphasis on a specific word or

phrase, you can use the em element.

<p>Cats <em>love</em> Fish</p>

The strong element is used to indicate that

some text is of strong importance or
urgent.

<p>Cats <strong>hate</strong> other

cats</p>

The form element is used to get

information from a user like their name,
email, and other details.

The action attribute indicates where form

data should be sent.

<form action="/submit-url"></form>

The input element allows you several ways

to collect data from a web form. They are
void elements.

<input />

There are many kinds of inputs you can

create using the type attribute. You can
easily create a password field, reset button,
or a control to let users select a file from
their computer.

<input type="text" />

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.

<input type="text" name="name">

Placeholder text is used to give people a

hint about what kind of information to enter
into an input.

<input type="text" placeholder="Ex. Jane

Doe">​
​
To prevent a user from submitting your
form when required information is missing,
you need to add the required attribute to an
input element.

<input type="text" name="firstName"

required>

The button element is used to create a

clickable button.

<button>Submit</button>

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>

You can use radio buttons for questions

where you want only one answer out of
multiple options.

<label><input type="radio"> cat</label>

label elements are used to help associate

the text for an input element with the input
element itself (especially for assistive
technologies like screen readers).

<label><input type="radio"> cat</label>

The id attribute is used to identify specific

HTML elements.

<input id="email">
Notice that both radio buttons can be
selected at the same time. To make it so,
selecting one radio button automatically
deselects the other, both buttons must have
a name attribute with the same value.

<input type="radio" name="meal"> Breakfast

<input type="radio" name="meal"> Lunch

The value attribute in input tells the browser

what text or data should be inside the input
when the page loads.

<input value=”” />

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.

<fieldset></fieldset>

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.

<fieldset><legend>Is your cat an indoor or

outdoor cat?</legend></fieldset>

To add checkboxes:

<fieldset>
<legend>What's your cat's
personality?</legend>
<input type="checkbox" /> <label>
Loving</label>
</fieldset>

to associate an input element's text with the

element itself. You can nest the text within
a label element and add a for attribute with
the same value as the input element's id
attribute.

<input id="breakfast" type="radio"

name="meal" value="breakfast">​
​
<label for="breakfast">Breakfast</label>
 In order to make a checkbox checked or
radio button selected by default, you need
to add the checked attribute to it.

<input checked type="radio" name="meal"

value="breakfast">

The footer element is used to define a

footer for a document or section. A footer
typically contains information about the
author of the document, copyright data,
links to terms of use, contact information,
and more.

<footer></footer>

Summary: ​
​
HTML Elements Overview:
​
Content Structuring:

<main>: Defines the main content of the document.

<section>: Represents a standalone section (e.g., chapters, headers).

<footer>: Used for footers with info like copyright or contact.

Text Emphasis:

<em>: Adds emphasis (usually italicized).

<strong>: Indicates strong importance (usually bolded).

Lists:

<ul>: Creates an unordered (bulleted) list.

<ol>: Creates an ordered (numbered) list.

<li>: List item in either list type.

Media and Descriptions:

<figure>: Wraps self-contained media (e.g., images).

<figcaption>: Provides a caption for media in a <figure>.

Links:

<a href="URL" target="_blank">: Opens the link in a new tab.

Forms and Inputs:
Form Basics:

<form action="/submit-url">: Sends form data to a server.

<input />: Creates various input fields (text, password, etc.).

<button type="submit">: Submits the form data.

Attributes:

type: Specifies input type (text, radio, checkbox, etc.).

name: Identifies input data for submission.

placeholder: Provides input hints.

required: Makes input mandatory.

value: Pre-fills an input field.

id: Uniquely identifies an element.

checked: Pre-selects radio or checkbox inputs.

Grouping and Labeling:

<fieldset>: Groups related form elements.

<legend>: Describes the grouped form section.

<label>: Associates text with an input (using for and id).

Radio Buttons & Checkboxes:

Use name attribute to link radio buttons as a group (only one can be selected).

Checkboxes can be used for multiple selections.