Web Design Vocabulary List

HTML

HTML stands for HyperText Markup Language, and is the language of the web.

CSS

HTML isn't enough on its own to create beautiful web pages, however. Cascading Style Sheets (CSS) provide a method for designers to create a visual set of rules that determine how different elements within a web page will be rendered on screen by the browser.

CSS allows things like the colour of text, the background, the size, shape and position of all the different parts of a page to be set.

Header

A website header is located at the top of each page of the website. The header typically looks the same from page to page and contains an organization’s logo and navigation, creating a central hub to get elsewhere on the website.

Primary Navigation

All websites should have primary navigation. Primary navigation is typically a list of prominent links toward the top of the page, with titles that help users determine where they want to go from wherever they are at on the site. The primary navigation features the parent pages of a website, which are typically broad topics leading users to related, more detailed, child pages.

Secondary Navigation

Secondary navigation is typically found in the website header above the primary navigation. While the primary navigation is considered the main nav, secondary navigation can include helpful items for users that maybe need to be highlighted. A lot of times you’ll find action items like Log In, Donate, or Volunteer.

Dropdown Menu

Dropdown menus reveal themselves when a user rolls over a primary navigation item, showing a list of child pages (so named since they stem from the parent pages). Dropdown menus help a user dive deeper into website content to find strategically organized pages.

Search Bar

A search bar is typically located in the upper right-hand corner of the website’s header. It is usually noted by the word “Search” within a form field, or includes some sort of magnifying glass icon. Here, users can type in a word or phrase they’re looking for more information on and then be taken to a results page listing website pages that may have related content within them. This functionality is helpful for site visitors that may know exactly what information they’re looking for but don’t want to browse through your navigation.

Link

Links allow website users to get from one web page to the next. They can be in the form of text or an image. Text links are typically highlighted in some way, using color to make the words stand out from static copy or making the text look like it’s in a button. Images can be highlighted with some sort of color overlay, words or symbols to make it obvious that it’s clickable. All links, regardless of how they are visually represented, should have some sort of hover state to indicate its clickability.

Selected State

A selected state is usually found in a list of navigation links to show what link is selected at that moment. This is a great way to show a user where they’re at within the site. For example if a site visitor is on the About Us page, the “About Us” link in the header would have some sort of selected state activated. The text may be bold, underlined, a different color or all of the above.

Homepage

A homepage is essentially the cover to your website. It’s usually the most unique page on your site, giving visitors an immediate sense of who you are as an organization. A homepage also guides them to other important information throughout the internal pages of your website.

Footer

A footer is the caboose of any given site. Similar to the header, the footer stays the same page to page, but it appears at the very bottom of every single page of the website rather than the top. A footer is typically a very structured section of the site that serves as the last opportunity to get various information to your site visitors. Some organizations opt to keep this as simple as possible, with only copyright information. Some create large footers, repeating the primary navigation, a call to action or two, and a statement that they are a 501(c)3 to help build credibility. Social media links are another popular item for website footers.

Responsive design

A responsive design is one that adapts to the user's device,

which means a web page will re-paginated itself as the screen size reduces or increases, displaying in multiple columns when viewed on a desktop computer, but only a single column when viewed on a smartphone.

Web hosting definition

When a hosting provider allocates space on a web server for a website to store its files, they are hosting a website. Web hosting makes the files that comprise a website (code, images, etc.) available for viewing online. Every website you’ve ever visited is hosted on a server.

The amount of space allocated on a server to a website depends on the type of hosting. The main types of hosting are shared, dedicated, VPS and reseller. They are differentiated by the kind of technology used for the server, the level of management provided and the additional services on offer.

Common HTML Symbols & Their Names

Symbol Name Usage / Example

< > Angle brackets or tags Surround HTML elements, e.g. <p>, <div>, <a>

/ Forward slash Used in closing tags, e.g. </p>, </div>

" Quotation marks or double quotes. Used around attribute values: class="container"

= Equals sign Assigns a value to an attribute: href="page.html"

  HTML entity for a non-breaking space Special characters in HTML use &...; syntax

Preventing Line Breaks: Unlike a regular space, which

allows a line to break between words or elements, a non-breaking space ensures that the two elements it separates remain together on

the same line. )

Comment tag Adds comments in HTML that don’t show on the page

! Exclamation mark Used in <!doctype html> and

The <!DOCTYPE html> declaration, which appears at the very beginning of an HTML document, uses an exclamation mark. This declaration is not an HTML tag; it is an instruction to the web browser to inform it about the version of HTML the page is written in. For HTML5, it simply triggers "standards mode" for proper rendering.

HTML Element Terms

Example What it's called Explanation

<a href="link.html">Click me</a> Anchor element The whole thing is an "HTML element"

<a> and </a> Opening tag and closing tag Surround content, define the element

href="link.html" Attribute Provides additional info (e.g., link target)

"link.html" Attribute value The value assigned to the attribute

class="nav" Class attribute Used for CSS styling

id="header" ID attribute Uniquely identifies an element

HTML Document Structure Terms

Part of the Code Name / Role

<!doctype html> Doctype declaration

<html> ... </html> Root element

<head> ... </head> Head section

<body> ... </body> Body section

Quick Example with Names:

<a href="page.html" class="nav-link">Click here</a>

<a> → Opening tag

href and class → Attributes

"page.html" and "nav-link" → Attribute values

Click here → Element content

</a> → Closing tag

Entire thing → Anchor element

HTML Vocabulary Check Sheet

Term Symbol / Example Definition

Element <p>Hello</p> A full HTML component — includes opening tag, content, and closing tag

Tag <p> or </p> An HTML command — the opening (<p>) or closing (</p>) of an element

Opening tag <div> The starting part of an element

Closing tag </div> The ending part of an element (has a /)

Self-closing tag <img />, <br /> Tags that don’t need a closing version (e.g., image or line break)

Attribute href, class, id, src, alt Extra information about an element

Attribute value "nav", "page.html" The value assigned to an attribute (inside quotes)

Angle brackets < > Symbols that enclose tags

Slash / Used to close a tag: </p>

Equals sign = Assigns a value to an attribute: class="nav"

Quotation marks " Wrap attribute values: id="header"

Doctype declaration <!doctype html> Declares the HTML version

Comment  Notes in code not shown on the page

Example With Labeled Parts:

<a href="about.html" class="menu-link">About Us</a>

Part Name

<a> Opening tag

href="about.html" Attribute (href)

"about.html" Attribute value

class="menu-link" Attribute (class)

About Us Content

</a> Closing tag

Entire line Anchor element