Anatomy of a Webpage

Introducing
NEW PICTURE EFFECTS
Browser: Application for
accessing internet Favicon:
small image displayed in
browser’s address bar

Tone Saturation Color

WEBPAGE ANATOMY

URL : Uniform Resource Locator (web address)

WEBPAGE ANATOMY

Navigation: also nav or navbar, a set of links to

other pages in the site
Dropdown: additional menu options
WEBPAGE ANATOMY

Header: the top section of a webpage, usually

the same on every page of the website
Hamburger menu: button, usually three lines,
that shows a hidden menu
Hero Image: large featured image,
usually the first thing people notice
 CALL TO ACTION

content intended to
promote a specific action
Button: any element that triggers an
event
 Fold: the bottom
border of the web
browser, the term
comes from
newspaper design.
Users scroll to see
content “below the
fold”
Carousel/slider: A list of shifting cards or
images that can be viewed one at a time
 Sidebar

Not the main content of

the page, often a list or
other content on the side
of the page
Body: large area of page content between the
header and footer
Hyperlink: a link to other content
WEBPAGE ANATOMY

Hover State: alteration of appearance when the

mouse is on top of content
Click icon to add picture

Cards:
Click iconsmall,
to addself-
picture
contained boxes of
content
Footer: the bottom section of a webpage, usually the
same on every page of the website
THANK YOU! WEBPAGE
ANATOMY

WEBPAGE THANK YOU!

ANATOMY

WEBPAGE THANK YOU!

ANATOMY