A Comprehensive Guide to Web Terminology [useful]

by Robert Bowen

When I was a trainer for a corporate restaurant chain, one area we would always focus on during the beginning of our training classes was the basic restaurant terminology. The reason being, that after working in an arena for a while we tend to take the terminology that goes along with the task for granted as just widely accepted common knowledge. We think everyone knows what we mean when we talk about div tags, design briefs, and splash pages because in the circles we tend to populate, most do. But when you are just getting started, it can be easy to get a bit lost in the lingo, and beyond that, not being aware of the non-commonality of our terminology can impact our client relationships.

Without this awareness of how much of our speech is ingrained in our industry, we forget when communicating with those outside said industry that they may not be following much of what we are saying. And though you do want your clients to know that you know just what it is you are talking about, you also want them to know just what it is that you are talking about. So be sure that you are familiar with which terms tend to only make sense to those in your field, to keep your client conversations on track and from veering into somewhat job-specific, proprietary directions.

General Design Terms
Typography Design Terms
Color Design Terms
Composition Design Terms
General Developing Terms
Developer Languages
Developer Content Terms
CSS Terms
Typography Developer Terms

Web Design Dictionary

We will begin in the glossary for web designers and I have broken it down into a few different categories to make it easier to swallow, if you will.

General Design Terms

Pixel – In digital imaging, a pixel (or picture element) is a single point in a raster image. The pixel is the smallest addressable screen element, it is the smallest unit of picture which can be controlled.

Resolution – describes the detail an image holds. The term applies to digital images, film images, and other types of images. Higher resolution means more image detail.

Wireframe -is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface.

Typography Design Terms

Baseline – is the line upon which most letters “sit” and below which descenders extend.

Ascender – is the portion of a minuscule letter in a Latin-derived alphabet that extends above the mean line of a font. That is, the part of a lower-case letter that is taller than the font’s x-height.

Descender – is the portion of a letter in a Latin alphabet that extends below the baseline of a font. In most fonts, descenders are reserved for lowercase characters such as g, p, and y. Some fonts, however, also use descenders for some numerals.

Body Height – refers to the distance between the top of the tallest letterform to the bottom of the lowest one.

x-height – or corpus size refers to the distance between the baseline and the mean line in a typeface. Typically, this is the height of the letter x in the font…

Cap height – refers to the height of a capital letter above the baseline for a particular typeface. It specifically refers to the height of capital letters that are flat…

Overshoot – it is the degree to which capital letters go below the baseline or above the cap height, or to which a lowercase letter goes below the baseline or above the x-height.

Glyph – is an element of writing. It is a slightly vague term, but a more precise definition might be an individual mark on paper or another written medium that contributes to the meaning of what is written there. A grapheme is made up of one or more glyphs.

Character – is a unit of information that roughly corresponds to a grapheme, grapheme-like unit, or symbol, such as in an alphabet or syllabary in the written form of a natural language, such as letters, numerical digits, and common punctuation marks.

Font – (also fount) is traditionally defined as a complete character set of a single size and style of a particular typeface. For example, the set of all characters for 9-point Bulmer italic is a font, and the 10-point size would be a separate font, as would the 9-point upright.

Typeface – is a set of one or more fonts, in one or more sizes, designed with stylistic unity, each comprising a coordinated set of glyphs. A typeface usually comprises an alphabet of letters, numerals, and punctuation marks; it may also include ideograms and symbols, or consist entirely of them.

Italic – is a cursive typeface based on a stylized form of calligraphic handwriting. Due to the influence from calligraphy, such typefaces often slant slightly to the right.

Oblique – is a form of type that slants slightly to the right, used in the same manner as italic type. Unlike italic type, however, it does not use different glyph shapes; it uses the same glyphs as roman type, except distorted.

Kerning – is the process of adjusting white spacing in a proportional font. In a well-kerned font, the two-dimensional blank spaces between each pair of letters all have similar area.

Kern – is a part of a type letter that overhangs the edge of the type block.

Leading – refers to the amount of added vertical spacing between lines of type. In consumer-oriented word processing software, this concept is usually referred to as line spacing.

Ligature – occurs where two or more graphemes are joined as a single glyph. Ligatures usually replace consecutive characters sharing common components and are part of a more general class of glyphs called contextual forms…

Serif – is a typeface that contain serifs, or semi-structural details on the ends of some of the strokes that make up letters and symbols.

Sans-Serif – is a typeface that does not have the small features called “serifs” at the end of strokes.

Script – typefaces that are based upon the varied and often fluid stroke created by handwriting.

Monospaced Font – is a font whose letters each occupy the same amount of space. This contrasts to variable-width fonts, where the letters differ in size to one another.

Subscript & Superscript – is a number, figure, symbol, or indicator that appears smaller than the normal line of type and is set slightly below or above it – subscripts appear at or below the baseline, while superscripts are above.

Alignment – is the setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification.

• Flush Left – the text is aligned along the left margin or gutter, also known as ragged right.
• Flush Right – the text is aligned along the right margin or gutter, also known as ragged left.
• Centered – text is aligned to neither the left nor right margin; there is an even gap at the end of each line
• Justified – ext is aligned along the left margin, and letter- and word-spacing is adjusted so that the text falls flush with both margins, also known as full justification.

em – is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font.

em-dash – often demarcates a parenthetical thought or some similar interpolation.

en – is a typographic unit, half of the width of an em. By definition, it is equivalent to half of the height of the font.

en-dash – is usually half the width of an em dash and is commonly used to indicate a closed range (a range with clearly defined and non-infinite upper and lower boundaries) of values.

Color Design Terms

CMYK – is a subtractive color model, used in color printing, and is also used to describe the printing process itself. CMYK refers to the four inks used in some color printing: cyan, magenta, yellow, and key black.

RGB – additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

Spectrum – is the portion of the electromagnetic spectrum that is visible to (can be detected by) the human eye.

Hue – is one of the main properties of a color, defined technically (in the CIECAM02 model), as “the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow,”.

Lightness & Tone – a property of a color, or a dimension of a color space, that is defined in a way to reflect the subjective brightness perception of a color for humans along a lightness–darkness axis. A color’s lightness also corresponds to its amplitude.

Tint & Shade – the mixture of a color with white, which increases lightness, and a shade is the mixture of a color with black, which reduces lightness. Mixing with any neutral color, including black and white, reduces chroma or colorfulness, while the hue remains unchanged.

Composition Design Terms

Composition – the placement or arrangement of visual elements or ingredients in a work of art, as distinct from the subject of a work. It can also be thought of as the organization of the elements of art according to the principles of art.

• Line – the visual path that enables the eye to move within the piece
• Shape – areas defined by edges within the piece, whether geometric or organic
• Color – hues with their various values and intensities
• Texture – surface qualities which translate into tactile illusions
• Form – 3-D length, width, or depth
• Value – Shading used to emphasize form
• Space – the space taken up by (positive) or in between (negative) objects

Perspective – an approximate representation, on a flat surface (such as paper), of an image as it is seen by the eye. The two most characteristic features of perspective are that objects are drawn are smaller as their distance from the observer increases and foreshortened: the size of an object’s dimensions along the line of sight are relatively shorter than dimensions across the line of sight (see later).

Contrast – the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.

Symmetry – an imprecise sense of harmonious or aesthetically pleasing proportionality and balance such that it reflects beauty or perfection.

Whitespace – often referred to as negative space, it is that portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted. The term arises from graphic design practice, where printing processes generally use white paper.

Web Developer Dictionary

Now we come to the Developer’s section of this massive web term glossary. Below are a plethora of definitions that should be a part of your vocabulary if you develop for the web.

General Developing Terms

CMS – A content management system (CMS) is a collection of procedures used to manage work flow in a collaborative environment. In a CMS, data can be defined as almost anything – documents, movies, pictures, phone numbers, scientific data, etc. CMSs are frequently used for storing, controlling, revising, semantically enriching, and publishing documentation.

Client Side – refers to operations that are performed by the client in a client-server relationship in a computer network. Typically, a client is a computer application, such as a web browser, that runs on a user’s local computer or workstation and connects to a server as necessary.

Server Side – refers to operations that are performed by the server in a client-server relationship in computer networking. Typically, a server is a software program, such as a web server, that runs on a remote server, reachable from a user’s local computer or workstation.

Frontend/Backend – generalized terms that refer to the initial and the end stages of a process. The front-end is responsible for collecting input in various forms from the user and processing it to conform to a specification the back-end can use. The front-end is a kind of interface between the user and the back-end.

DNS – The Domain Name System (DNS) is a hierarchical naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participants. Most importantly, it translates domain names meaningful to humans into the numerical (binary) identifiers associated with networking equipment for the purpose of locating and addressing these devices worldwide.

FTP – File Transfer Protocol (FTP) is a standard network protocol used to exchange and manipulate files over a TCP/IP-based network, such as the Internet. FTP is built on a client-server architecture and utilizes separate control and data connections between the client and server applications. FTP is used with user-based password authentication or with anonymous user access.

Sitemap – a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, typically organized in hierarchical fashion. This helps visitors and search engine bots find pages on the site.

UI – the system by which people (users) interact with a machine. The user interface includes hardware (physical) and software (logical) components. User interfaces exist for various systems, and provide a means of input, allowing the users to manipulate a system, and/or output, allowing the system to indicate the effects of the users’ manipulation.

Markup Language – a system for annotating a text in a way which is syntactically distinguishable from that text. Examples include revision instructions by editors, traditionally written with a blue pencil on authors’ manuscripts, typesetting instructions such those found in troff and LaTeX, and structural markers such as XML tags.

MySQL – a relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases. The MySQL development project has made its source code available under the terms of the GNU General Public License, as well as under a variety of proprietary agreements.

PageRank – a link analysis algorithm, named after Larry Page, used by the Google Internet search engine that assigns a numerical weighting to each element of a hyperlinked set of documents, such as the World Wide Web, with the purpose of “measuring” its relative importance within the set.

RSS – RSS (most commonly expanded as “Really Simple Syndication”) is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format. An RSS document (usually called a “feed”) includes full or summarized text, plus metadata such as publishing dates and authorship.

Root Directory – the first or top-most directory in a hierarchy. It can be likened to the root of a tree – the starting point where all branches originate.

SEO – Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web site from search engines via “natural” or un-paid (”organic” or “algorithmic”) search results as opposed to search engine marketing (SEM) which deals with paid inclusion. Typically, the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine. SEO may target different kinds of search, including image search, local search, video search and industry-specific vertical search engines. This gives a web site web presence.

Web Standards – a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

Web 2.0 – commonly associated with web applications that facilitate interactive information sharing, interoperability, user-centered design, and collaboration on the World Wide Web. Examples of Web 2.0 include web-based communities, hosted services, web applications, social-networking sites, video-sharing sites, wikis, blogs, mashups, and folksonomies. A Web 2.0 site allows its users to interact with other users or to change website content, in contrast to non-interactive websites where users are limited to the passive viewing of information that is provided to them.

Database – a collection of data for one or more multiple uses. One way of classifying databases involves the type of content, for example: bibliographic, full-text, numeric, image. Other classification methods start from examining database models or database architectures: see below. Software organizes the data in a database according to a database model. As of 2010[update] the relational model occurs most commonly. Other models such as the hierarchical model and the network model use a more explicit representation of relationships.

Developer Languages

CSS – Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.

HTML – HyperText Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms.

XML – XML (Extensible Markup Language) is a set of rules for encoding documents electronically. It is defined in the XML 1.0 Specification produced by the W3C and several other related specifications; all are fee-free open standards.[3]

XML’s design goals emphasize simplicity, generality, and usability over the Internet. It is a textual data format, with strong support via Unicode for the languages of the world. Although XML’s design focuses on documents, it is widely used for the representation of arbitrary data structures, for example in web services.

XHTML – XHTML (Extensible Hypertext Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written. While HTML (prior to HTML5) was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. Because XHTML documents need to be well-formed, they can be parsed using standard XML parsers—unlike HTML, which requires a lenient HTML-specific parser.

PHP – PHP: Hypertext Preprocessor is a widely used, general-purpose scripting language that was originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document.

JavaScript – an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites.

ASP.NET – a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.

Ajax – (shorthand for asynchronous JavaScript and XML[1]) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

jQuery – a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Providing this option, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets.

Developer Content Terms

Doctype – A Document Type Declaration is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

Favicon – short for favorites icon is a 16×16 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks.

Form – allows a user to enter data that is sent to a server for processing. Webforms resemble paper forms because internet users fill out the forms using checkboxes, radio buttons, or text fields. For example, webforms can be used to enter shipping or credit card data to order a product or can be used to retrieve data (e.g., searching on a search engine).

Hyperlink – a reference to a document that the reader can directly follow, or that is followed automatically. The reference points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. Such text is usually viewed with a computer. A software system for viewing and creating hypertext is a hypertext system. To hyperlink (or simply to link) is to create a hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

robots.txt – The Robot Exclusion Standard, also known as the Robots Exclusion Protocol or robots.txt protocol, is a convention to prevent cooperating web spiders and other web robots from accessing all or part of a website which is otherwise publicly viewable. Robots are often used by search engines to categorize and archive web sites, or by webmasters to proofread source code. The standard is unrelated to, but can be used in conjunction with, Sitemaps, a robot inclusion standard for websites.

.htaccess – the default name of a directory-level configuration file that allows for decentralized management of web server configuration. The .htaccess file is placed inside the web tree, and is able to override a subset of the server’s global configuration; the extent of this subset is defined by the web server administrator.[1] The original purpose of .htaccess was to allow per-directory access control (e.g. requiring a password to access the content), hence the name.

Flash – a multimedia platform that is popular for adding animation and interactivity to web pages. Originally acquired by Macromedia, Flash was introduced in 1996, and is currently developed and distributed by Adobe Systems. Flash is commonly used to create animation, advertisements, and various web page Flash components, to integrate video into web pages, and more recently, to develop rich Internet applications. Flash can manipulate vector and raster graphics, and supports bidirectional streaming of audio and video.

CSS Terms

Span & Div – elements used where parts of a document cannot be semantically described by other HTML elements. Most HTML elements carry semantic meaning – i.e. the element describes, and can be made to function according to, the type of data contained within. For example, a p element should contain a paragraph of text, while an h1 element should contain the highest-level header of the page; user agents should distinguish them accordingly. However, as span and div have no innate semantic meaning besides the logical grouping of the content, they can be used to specify non-standard presentation or behaviour without superfluous semantic meaning.

ID & Class – The id selector is used to specify a style for a single, unique element. The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

Float – Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. If an image is floated to the right, a following text flows around it, to the left.

Box Model – All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.

Margin – The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

padding – The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

border – The CSS border properties allow you to specify the style and color of an element’s border.

Positioning – The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element’s content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

Overflow – The overflow property specifies what happens if content overflows an element’s box. (visible, hidden, scroll, auto)

Z-Index – The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Typography Developer Terms

Text

• Letter-Spacing – increase or decrease the space between characters
• Line-Height – sets the distance between lines
• Text-Align – aligns the text in an element
• Text-Decoration – adds decoration to text (underline, line-through, overline)
• Text-Indent – Indents the first line of text in an element
• Text-Transform – controls the letters in an element (capitalize, uppercase, lowercase)
• Word-Spacing – increase or decrease the space between words

Font

• Font-Family – specifies the font family for the text
• font-size – sepcifies the size of the text
• font-style – specifies the style for the text (normal, italic, oblique)
• font-varient – specifies whether a text will be displayed in small caps
• font-weight – specifies the weight of a font (light, bold)

Font Stack – The font-family property specifies the font for an element. The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font. Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Blockquote – used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.

Posted via email from apm35's posterous