← Computer Science I

Fall 2026 · Vocabulary for directing an AI

Elements Catalog

The names of the parts of a web page

45 element types in six groups. Find the word first, then write the prompt.

Why a word is worth more than a description

You do not need to know how every part of a web page is coded to have an AI build one for you. You need to know what the parts are called. An AI has read millions of pages that use the field’s names. When your prompt uses the same name, the AI knows exactly what you mean, and you get the thing you asked for on the first try instead of the fourth.

Here is the difference, from this course’s own build. For a while, prompts asked for “the box that pops up on top of everything else and dims the page behind it.” That took several rounds to get right each time. The word for that thing is a modal. Once the prompt said “add a modal,” the AI produced the whole thing, the dimmed backdrop and the close control included, in one pass. Same request. One word. Far less work.

Cannot find the word? Describe it to MuggsAI in your own words, and it names the thing from this catalog.

That is what this page is for. Every entry below is one part of a page: the name the field uses, other names you might already know or hear an AI use, what it is in plain words, and a place you have already seen it. No code. When you are describing something to an AI and you find yourself saying “the thing that…”, come here and find its name.

Layout

how the page is arranged in space

containeralso called wrapper, box
A rectangle that holds other elements together so they move as a group. If you move the container, everything inside moves with it.
Seen it:The whole game area of Breakout — the score, the canvas, and the Play Again button all sit inside one container.
header
The strip across the top of a page where the logo, the site name, and the main navigation live. Usually the same on every page of a site.
Seen it:The blue bar at the top of most school websites, with the school name and links to Home / About / Contact.
heroalso called banner, splash
A tall, attention-grabbing section right at the top of a page. Usually a big image with a headline over it, and one button that tells you what to do next.
Seen it:The giant photo on Apple's homepage with the product name and "Buy" underneath.
sidebar
A vertical strip to the left or the right of the main content. Holds links, filters, or table of contents — things that stay put while the middle of the page changes.
Seen it:The list of chapter links on Wikipedia that stays on the left while you read the article on the right.
section
A named block of a page that belongs together. A page can have several sections stacked on top of each other, each about a different thing.
Seen it:On a restaurant page: an About section, a Menu section, a Reviews section, and a Location section, in that order, down the page.
grid
A set of items arranged in rows and columns, all the same size. Used when you have a bunch of things of the same kind — products, photos, cards.
Seen it:The wall of thumbnails on YouTube's home page.
mainalso called main content
The primary reading area of a page, between the header and the footer, not including the sidebar or nav. This is where the thing the page is actually about lives.
Seen it:The article body on a news website, once you strip out the ads, the sidebar, and the top nav.

Content

the things you read and look at

headingalso called title, h1, h2
A large, bold line of text that names what is coming next. A page usually has one big heading at the top and smaller headings for each section below it.
Seen it:"Chocolate Chip Cookies" across the top of a recipe page.
paragraph
A block of running text, one or more sentences long. The workhorse element for anything a person reads on the web.
Seen it:Any block of writing on a Wikipedia article, between the headings.
listalso called bulleted list, numbered list
A vertical stack of items, each on its own line. Bulleted lists use dots when the order does not matter. Numbered lists use 1, 2, 3 when the order does.
Seen it:The ingredients list on a recipe page: a stack of items, each with a dot in front.
card
A rectangular block that groups a picture, a title, a short description, and sometimes a button — all about one thing. Usually shown in a grid of many cards.
Seen it:Each show on Netflix's home page — the poster image, the title, a short description, and a play button, all grouped into one clickable rectangle.
article
A self-contained piece of writing on a page — a blog post, a news story, an essay. Has its own heading and can be shared or read on its own.
Seen it:A single New York Times story: headline, byline, body, all as one article inside the news site.
quotealso called pull quote, blockquote
A short passage taken from somewhere else, set apart from the rest of the text — usually indented, in bigger or fancier type, with quotation marks or a colored bar down the side.
Seen it:"The web is younger than your parents." — set off in the middle of an article about the internet's history.
table
A grid of information arranged in rows and columns, with a header row at the top labeling each column. Used for data that needs to be compared or looked up.
Seen it:The nutrition facts on the back of a cereal box — rows of nutrients, columns for amount and % daily value.

Controls

the things you type in, press, or choose

button
A clickable rectangle with a word or a short phrase on it. Pressing it makes something happen.
Seen it:Any "Submit" or "Buy Now" or "Play Again" button on any page.
text fieldalso called input, text box
A single-line rectangle a person can click into and type in. Used for one short answer at a time — a name, an email, a search word.
Seen it:The line you type your email address into on a login page.
textareaalso called comment box
A bigger, multi-line rectangle a person can type paragraphs into. Grows or scrolls to hold as much as you write.
Seen it:The comment box on a YouTube video where you can write more than one line.
checkbox
A small square you click to check or uncheck. Used for yes/no choices, and for lists where a person can pick more than one thing at a time.
Seen it:The "I agree to the terms" square on a sign-up form.
radio button
A small circle. Comes in groups of two or more. You can only pick one at a time — clicking a different one un-picks the previous.
Seen it:The Small / Medium / Large size picker on a coffee-ordering page.
dropdownalso called select, picker
A rectangle that shows the current choice, and expands into a list of options when you click it. Used when there are more choices than you want on the screen all at once.
Seen it:The country picker on a shipping form — click it, a long list of countries drops down, you pick one.
slideralso called range
A horizontal line with a dot on it that you drag left or right to pick a value. Used for choosing a number in a range — volume, brightness, price limit.
Seen it:The volume slider on YouTube.
togglealso called switch
A little bar with a knob that slides between two positions — on and off. Same idea as a checkbox but larger and more physical-looking.
Seen it:The Dark Mode switch in your phone's settings.

State & Feedback

the page telling you what is happening

modalalso called dialog, popup
A window that appears on top of the page, dims everything else behind it, and waits for you to answer or close it. Blocks the rest of the page until you deal with it.
Seen it:The "Are you sure you want to delete this?" box that pops up when you press Delete on a folder.
tooltipalso called hover text
A small speech-bubble that appears when you hover over an element, explaining what the element does. Disappears when you move the mouse away.
Seen it:The little "Add to cart" hint that pops up when you hover over the cart icon on Amazon.
toastalso called snackbar, notification
A small rectangular message that slides in from a corner of the screen, waits a few seconds, and slides away on its own. Tells you something happened without demanding you do anything.
Seen it:The "Saved!" message that flashes in the corner of Google Docs after you finish typing.
alertalso called banner, warning strip
A colored horizontal strip stuck across the top or the bottom of the page with an important message. Stays visible until you dismiss it or the situation changes.
Seen it:The red "Your subscription has expired" bar across the top of a streaming site.
badgealso called notification dot
A tiny colored circle or oval with a number in it, stuck to a corner of another element. Tells you how many of something is waiting for you.
Seen it:The red "3" on the notifications bell in Instagram — you have three unseen notifications.
spinneralso called loader, loading indicator
A little circle or wheel that spins on the screen while the page is waiting for something. Tells you the page has not frozen — it is working.
Seen it:The spinning wheel that shows up in the middle of the screen while a video buffers.
progress bar
A horizontal bar that fills up from left to right, showing how far along a task is. Used when you know how long the task will take, roughly.
Seen it:The bar that fills up while you upload a file to Google Drive.
skeleton loaderalso called placeholder
Gray boxes shaped like the content that is loading, showing you where the real thing will land. Prevents the page from looking empty during a wait.
Seen it:The pulsing gray rectangles that fill Facebook's feed for a second before the actual posts show up.

Media

pictures, video, and icons

imagealso called picture, photo
A single picture on the page, usually with a rectangular boundary. The most common media element on the web.
Seen it:The recipe photo at the top of any food blog.
video
A moving picture with play, pause, volume, and progress controls. Can also play automatically, or on scroll, or in a loop.
Seen it:Any YouTube embed on any page.
icon
A tiny picture that represents a concept or an action — a magnifying glass for search, a heart for like, a trash can for delete. Meant to be recognized at a glance.
Seen it:The row of icons across the bottom of Instagram — home, search, plus, heart, profile.
avataralso called profile picture
A small round or square picture that represents a person. Their face, or a cartoon, or their initials on a colored circle if they never picked one.
Seen it:The little circle picture next to each person's name in a Slack thread.

Cannot find it? Describe it to MuggsAI. Still no word for it? Tell Mr. Muggivan what the thing does, and it gets a name here.