<h1> : Opening Tags
</h1> : Closing tags
<p> & </p> : is used to create a paragraphs in a website
<!-- Comment --> : allows you to leave messages without affecting the website
<main> & </main> : is used to represent the main context of the body of an HTML
Note: Putting an element inside the <main> is called Nesting
<img> : element is used to add image in a website, it is also an element without a closing tag
Note: An element without a closing tag is called Void Element
Note: HTML attributes are special words used inside the opening tag of an element to control the
element's behavior.
Src: attribute in an img element specifies the image's URL (where the image is located).
EX: <img src=”[Link]
Note: All img elements should have an alt attribute.
Alt: attribute's text is used for screen readers to improve accessibility and is displayed if the
image fails to load.
Ex: <img src=" [Link] alt="A cat">
<a href=” [Link] “> : is part of HTML and is used to create a hyperlink, which allows
users to click and go to another page, file, or section.
<a> : stands for "anchor"
Href : stands for "hypertext reference"
Note: A link's text must be placed between the opening and closing tags of an anchor (a) element.
Ex: <a href="https:// [Link] photos</a>
Note: To open links in a new tab, you can use the target attribute on the anchor <a> element.
The target attribute specifies where to open the linked document.
Ex: target="_blank"
Note: Before adding any new content, you should make use of a section element to separate the cat
photos content from the future content.
The section element is used to define sections in a document, such as chapters, headers,
footers, or any other sections of the document.
Note: to create an unordered list of items, you can use the <ul> element
<ul>: element in HTML stands for "unordered list." It’s used to create a bullet-point list of items
<li>: element is used to create a list item in an ordered or unordered list.
<figure>: element represents self-contained content and will allow you to associate an image
with a caption.
Note: A figure caption <figcaption> element is used to add a caption to describe the image contained
within the figure element.
<em>: element is used to emphasis a specific word or phrase
<strong>: element is used to indicate that some text is os strong importance or urgent
<form>: element is used to get information from a user like their name, email, and other detais
The Action attribute indicates where form data should be sent
The method attribute specifies how to send form-data to the URL specified in
the action attribute.
The Input element allows you several ways to collect data from a web form, like img element,
input element are void element and do not need closing tags
Note: in order for a forms 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
<required>: attribute is used to prevent user from submitting your form when required
information is missing
<button>: element is used to create a clickable button
<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).
Note: 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.
<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.
<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
<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
<head>: element is used to contain metadata about the document, such as its title, links to
stylesheets, and scripts.
Note: Metadata is information about the page that isn't displayed directly on the page.
<Title>: element determines what browsers show in the title bar or tab for the page.
Note: lang=language en=English
All pages should begin with <!DOCTYPE html>. This special string is known as a declaration and
ensures the browser tries to meet industry-wide specifications.
<section>: element in HTML is a semantic container used to group related content together—
like chapters in a book, parts of a web page, or thematic sections of content.
<style>: element is used to add CSS (Cascading Style Sheets) directly into an HTML document. It
allows you to define the look and layout of your page elements — such as colors, fonts, spacing,
etc.
Text align: text-align property in CSS controls the horizontal alignment of text (and inline
content) inside an element's content box. text-align is applied to a block-level element (like
<div>, <p>, <h1>) to control the alignment of its inline or inline-block children (like text,
<span>, etc.).
element {
property: value;
<div>: element in HTML is a generic container used to group and organize content on a
webpage.
<article>: element in HTML is a semantic element used to represent independent, self-
contained content that could stand alone or be distributed separately.
Padding-right/left: is the space between the content of an element and its border.
Think of it like the "inner spacing" inside a box.
<font-family>: CSS property specifies a prioritized list of font family names and/or generic family
names for text content. Browsers will use the first available font in the list.
Note: A fallback is a backup option that a browser will use if the primary choice isn’t available. In the
context of CSS font-family, you list fonts in order of preference—if the first one isn’t installed on the
user’s device, the browser “falls back” to the next one, and so on. Always end the list with a generic
family as the final safety net.
Note: A class selector in CSS lets you target any HTML element that has a given class attribute value. It’s
one of the most common—and most flexible—ways to apply styles to groups of elements.
The CSS rgb function accepts values, or arguments, for red, green, and blue, and produces a
color:
Note: A function is a piece of code that can take an input and perform a specific action.
linear-gradient: function lets you control the direction of the transition along a line, and which
colors are used.
Note gradientDirection is the direction of the line used for the transition.
opacity : property, you can control how opaque or transparent an element is. With the value 0,
or 0%, the element will be completely transparent, and at 1.0, or 100%, the element will be
completely opaque like it is by default.
Another way to set the opacity for an element is with the alpha channel. Similar to
the opacity property, the alpha channel controls how transparent or opaque a color is.
To add an alpha channel to an rgb color, use the rgba function instead.
The rgba function works just like the rgb function, but takes one more number from 0 to 1.0 for
the alpha channel
Display: property in CSS controls how an HTML element is displayed on the page — whether it
behaves like a block, inline element, grid, flex container, etc
The box-shadow property lets you apply one or more shadows around an element. Here is basic
syntax: box-shadow:
Ex: offsetX offsetY color;
Notice that the edges of the shadow are sharp. This is because there is an
optional blurRadius value for the box-shadow property:
Ex: box-shadow: offsetX offsetY blurRadius color;
But what if you wanted to expand the shadow out further? You can do that with the
optional spreadRadius value:
Ex: box-shadow: offsetX offsetY blurRadius spreadRadius color;
<fieldset> element in HTML is used to group related form controls (like inputs, checkboxes,
radios) into a logical section. It’s mostly used for better form structure and accessibility.
<Select> element is a container for a group of <option elements>, and the option element acts
as a label for each dropdown option. Both elements require closing tags.