< > = opening tag

</ > = closing tag

< /> = self closing tag

HTML text element-

Block Element
para = <p>
heading = <h1> ---- </h1> / h1 to h6
list = <ul> -- </ul> or <ol> -- </ol>
Inline Element
emphasis = <em> -- </em>
bold/important = <strong> -- </strong>
anchor tag(link) = <a> -- </a>

break line = <br>

Empty tag = self-closing tag
example - <br />
<img />
<input />

List
1. Ordered list <ol> -- </ol>
2. Unordered list <ul> -- </ul>
3. Description list HW

image tag = <img src=" path to image " alt="" width="" height="">

anchor tag = <a href=""> -- </a>

attr tags
id all
class all
src img
href a

sub-tag tag
img figure
figcaption figure
p blockquote
cite blockquote

<blockquote cite="source">
</blockquote>

q tag = for short quotes

horizontal line - <hr>

colgroup = to style specific columns

div = generic container

span = same as div but it is inline element

Semantic tag = that provides the meaning to the content

ex- table tags(table, tr, th, td), heading tags(h1 - h6), form, section
<article> = independent data/content and possiblity of multiple p tag
<aside>
<figure>
<figcaption>
<header>
<footer>
<main>
<nav> = navigational links

Can we use section tag in article tag? yes

Can we use article tag in section tag? yes
Can we use header tag in footer tag?
Can we use multiple header tags?

Diff btw header and h1 tags?

Diff btw body and main tags?

FlexBox
Flexbox is a great way to get more flexibility in your layouts and simplify
responsive layout design.
It makes it easy to align elements on a 2D plane and is pretty easy to use once you
get familiar with the main properties.
The first step is to set display: flex on a "container" element. The "children" in
the flex container become flex items.
A set of properties can be applied to flex containers, and have an effect on all
the items as a whole, and a different set of properties can be used to flex items
and have their impact on the targeted items.
Flex items can in turn also be flex containers for the elements it contains, making
it easy to create complex layouts.

Container
flex-direction = row, row-reverse, column, column-reverse
flex-wrap = wrap, nowrap, wrap-reverse
flex-flow(shorthand rotation) = flex.direction flex-wrap
justify-content(horizontal alignment) = flex-start, flex-end, center, space-around,
space-evenly, space-between
align-item(vertical alignment) = flex-start, flex-end, center, stretch, baseline
gap(shorthand rotation)(row/column spacing) = 10px
align-content(row spacing)(row alignment) = flex-start, flex-end, center, space-
around, space-evenly, space-between

Items(child)
order = any number, default 0
flex-grow = any number, default 0
flex-shrink = any number, default 1
flex-basis(width hides the overflow content but flex-basis increases the width
according to the content) = 100px, 10%
flwx(shorthand rotation) = order flex-grow flex-shrink flex-basis
align-self = stretch, flex-start, flex-end, center

Parallax effect is when two bodies move at a different speed