Web Nerd Terminology (Explained)
Published June 26, 2009 by Chris Coyier
As happens with any weird niche societal group, us web nerds have developed some language of our own. Some of this language is perfectly acceptable English, but still sounds weird to an outsider. I thought I’d throw together a list of these words and attempt to explain them in plain English as a reference for non-nerds.
Browser - A browser is a software application that is used to visit websites. Firefox, Internet Explorer, Safari, etc. If you think this is obvious, think again.
Server - When a webpage is visited, data is sent from some computer somewhere to your computer over the internet. That other computer is a server, essentially just like the one you are looking at, only specially configured to deliver information to other computers asking for it. Even though any computer could technically be a server, far more commonly people purchase server functionality from companies that specialize in it, like Media Temple. In addition to “server” being used to describe the physical machine, it also may be used to describe the software program used on that machine which handles serving up that data, like Apache.
URL - Uniform Resource Locator - is one of those things like this: http://css-tricks.com/video-screencasts/64-building-a-photo-gallery/ Some people also use URI - Uniform Resource Identifier - for the same purpose, although URL is far more common. I honestly read the entire Wikipedia article for both and I still don’t really understand the difference. A domain name is the first part of the example above: css-tricks.com. Anybody can purchase a domain name, from companies like Go Daddy that specialize in it.
Tag are text that go around content in HTML code to identify the type of content they surround. For example, in this code
Anchor - An “anchor” tag is a tag that looks like this in HTML code: link text. Most HTML tags are referred to by what they look like, for example, a
Wrapping refers to putting an opening and closing tag around content in HTML code. If you hear “You’ll need to wrap it in an extra div,” they mean that whatever content area is being referenced needs to have a
Nesting is a lot like wrapping but implies being several layers deep. For example, this is a series of “nested” divs: HTML
Markup - Markup is just another way of saying HTML code, but is slightly more generic and may also be used to reference XML or other “describing” languages. If you hear a phrase like “The site uses very semantic markup”, that means that the website’s HTML code uses very appropriate tags to describe the content it displays, which is a desirable and sometimes difficult thing to do.
Accessibility - When accessibility is talked about in reference to websites, it means how easy or difficult it is to access the content for people with disabilities. For example, how easy it is for mobility impaired uses to navigate the site, blind users to read the site, or colorblind people to differentiate links from regular text.
Usability - Usability is similar to accessibility but differs in that it refers to ease of use for all visitors, not limited to disabled people. For example, a site that requires lengthy registration to view content or that has navigation that is in different places on different pages may be considered to have bad usability.
Findability - Findability is a subset of usability and refers to how easily users can locate the content they are looking for on a website. Often a elusively difficult task.
Validation - It is possible, even probable, that code contains mistakes. But who says what constitutes a mistake in code? When it comes to HTML and CSS, the W3C does. They offer tools to run these types of code through to check for errors. If it there are no errors, the code passes and is said to be valid code (or “markup”!) ALTERNATIVELY, validation can refer to data. For example, if you enter a phone number that is 5 digits long, software might “validate” that data and reject it as invalid.
Standards - This again refers to the W3C, the organization that puts forth the “rules” describing how browsers should behave in interpreting code. Can you imagine how difficult any job would be if everything you did you had to repeat five different times with slight variations? That’s what web standards are trying to prevent, by putting forth rules so that everyone’s job is easier things only need to be done one way. If you hear someone say they “write standards compliant code”, it probably means the code they write validates, but hopefully it also means they have an understanding of the importance of web standards and fight for them.
Semantics - The word itself generally refers to the meaning of words or word choice. On the web, semantics means choosing the correct HTML tags to describe to content. For example, using table tags to lay out your site isn’t very semantic because those tags don’t relay any meaning to the content they contain. Whereas, a tag like
Rendering is the process the browser goes through when interpreting HTML and CSS and turning that into the visual end result you see on your screen.
Client-Side refers to a language that is interpreted by the browser itself. For example, JavaScript is downloaded by your browser and then run locally on your machine. Your browser is the “client”.
Server-Side refers to a language that is interpreted by the server. For example, PHP is interpreted by your server, processed, and then delivered to you. As an easy example to remember the difference, if you ask a client-side language to display what time it is, it will display the time set on your computer. If you ask a server-side language to display what time it is, it will display the time set on the server.
DOCTYPE - This is the gibberish looking code at the top of HTML documents that looks something like this: HTML
There are a number of different ones. They tell the browser what specific set of rules should be followed when interpreting the rest of the code in the document.
Copy - It just means text. “I need some copy for that” means “I need the text that you want to go in that area.”
White Space - Areas of a design (not necessarily white!) that are intentionally left blank for aesthetics.
Vector - A form of graphic where the design is saved as points and mathematical formulas. Because of this, the files are “resolution independent” meaning they can be scaled to any size without losing their crispness. Adobe Illustrator files are vector files (although it is possible for them to contain bitmap data). AI, EPS
Bitmap - A form of graphic that is saved as individual pixels, meaning it has a set resolution and cannot be scaled up or down without affecting its crispness. Adobe Photoshop files are bitmap files (although it is possible for them to contain vector data). JPG, GIF, PNG.
Analytics - Means data about the usage of a website. How many people viewed the website that day? What countries were they from? What browser did they use? How long did they stay? Those are questions Analytic data can answer. It is gathered by using special software built for capturing it, like Google Analytics.
Kerning - Adjusting the spacing between two specific letters, to improve how a word looks aesthetically. Tracking is similar but refers to overall letter spacing.
Sprite - An image that actually contains multiple images. The images are typically displayed cropped down to only show a small area. As counter-intuitive as it seems, this can improve efficiency by requiring less total images to be used.
Elastic - is a type of web layout where font sizes and widths are declared with a special unit of measurement called an Em (an abstract concept just meaning “relative size”). This allows for the entire web layout to scale up and down, rather than just the font size. This differs from a Fixed Layout where theoretically the width of the site would stay the same and just the text would scale up and down or a Fluid Layout where the width of the layout is determined by the browser window.
Framework - Generic term to describe software that is built to simplify things. For example: RoR , or Ruby on Rails, a development framework designed to help creating applications on the web easier.
Acronyms
CSS - Cascading Style Sheets - a file ending in .css, which is linked to from the HTML, which controls the look of the rendered page.
HTML - Hyper Text Mark-up Language is the code that forms all websites and describes the content it contains. It is important to understand that ALL websites end up as some form of HTML, regardless of the languages used to build them. For example, a file might be PHP (Hypertext Preprocessor), as in index.php, but ultimately what is served up to the browser is HTML. The file extension PHP just lets the server know to process any of the special PHP code inside before serving it up.
JS - JavaScript - a client-side language with the unique ability to A) watch for events (e.g. mouse clicks, key presses, etc) and B) make things happen on a webpage without a page refresh. For example if you see a button on a website that you click and a new area slides down, that’s (probably) JavaScript.
AJAX - Asynchronous JavaScript and XML - A popular technique of loading content from a server and placing it onto a page without the need for a page refresh. This has grown to be an extremely popular technique for building websites that are more responsive and feel more like desktop applications. While AJAX is still technically an acronym, it usually doesn’t have a heck of a lot to do with XML.
CMS - Content Management System - a software program that runs on a server with the purpose of making managing the content on the website easier. For example, a site may have hundreds of pages (like this one). Each of those pages does not exist as a separate HTML file. Instead, the content is kept in a database and injected into templates and served up as needed by the CMS.
SEO - Search Engine Optimization - Doing things to a website specifically to rank higher in searches done on search engines like Google. On the web, traffic = money, and search engines drive big traffic, hence the big desire for everyone to rank as highly as they can.
SERP - Search Engine Results Page - You search for something in Google, you get a page of results, that a SERP.
TLD - Top Level Domain - .com, .net, .org … there are a lot of them.
CRUD - Create, Read, Update, Delete - generally used to describe a web application with the primary purpose of doing those things. Think of blog software, where you can Create a blog entry, Update or Delete it later, and the Front-End of the site Reads it to display it.
DOM - Document Object Model - is a bit of an abstract concept. It is the system browsers use to represent and interact with the objects (elements) in HTML. For example, that DIV in your HTML is definitely part of the DOM, but so is the browser window itself and it’s immediate page history. Maybe the easiest way to think about it is that it’s basically the HTML that makes up your page, plus a bunch of more stuff that only web nerds care about.
RGB - Red Green Blue - The color model that is used by electronic media to display graphics. Commonly used to describe the “mode” an image is saved in. Images used for electronic display (web, video, etc) should be RGB.
CMYK - Cyan Magenta Yellow Black - The color model used by traditional 4-color printing. Photo-realism can be achieved by printing only these four colors. Commonly used to describe the “mode” an image is saved in. Images ultimately being used to be printed on paper should be in CMYK.
RSS - Really Simple Syndication is a special (and standards based) form of XML for publishing content. For example, most blogs provide RSS of their content. Other people (even basic users) can take that RSS and use it in different ways, like republishing that content elsewhere, or just reading it through special programs, like Google Reader). May be referred to an an RSS Feed, or even just Feed by itself.
DPI / PPI - Dots Per Inch and Pixels Per Inch. “Dots” are literally physical dots of ink on paper, determining the resolution of a print image. “Pixels” are bits of data, determining the size of an electronic image. Commonly swapped and used incorrectly.
WYSIWYG - What You See Is What You Get - Describes anything where you interact with the visual end result rather than an abstraction. For example, a font menu that shows what the fonts actually look like is a WYSIWYG font menu. A web design program that allows you to place boxes and drag them around is a WYSIWYG program.
SVN - Subversion - A system for maintaining different versions of code. Changes are “checked in” and can be “rolled back” to previous versions (in the case of problems).
Phrases
Above the Fold - This comes from the newspaper industry, where the space on the top half of the front page is far more valuable than the space below it. On the web, content that is visible without scrolling is referred to as above the fold, and is also more valuable (as in, to advertisers or just generally for users attention).
Browser Safe - or “Web Safe” refers to a specific set of colors that, in the long long ago, would be acceptable to use because they would display properly on all computer monitors. No longer very relevant.
Hover State - When your mouse cursor rolls over a link, and that link changes color, that is the links “hover state”. A mockup web design might contain both a buttons regular state and hover state. Differs slightly from Active State - which is a the circumstance a link would be in if, for example, the link was “tabbed to” in a browser.
Back End - Generically refers to anything going on “behind the scenes” of a website. There are all kinds of things that happen on complex websites underneath what people actually view in their browsers. A CMS is an example of a “Back-End”.
Front End - The part of a web application that people visiting the site in a browser see. Essentially the “website” part of a website.
Slicing a PSD - Phrase used to describe the process of converting a Photoshop document (PSD) into an HTML/CSS website. There is a “slice tool” in Photoshop, which can be a part of this process, but not necessarily.
Pixel Perfect - A finished web design that matches perfectly the mockup from which it was created.
Browser Zooming is a feature in browsers where entire website are magnified, rather than just text resizing. Somewhat controversial, as it can cause Horizontal Scroll, a situation where a websites content is wider than the browser window meaning that a user would have to move the scroll bar left and right as well as up and down to browser content.
Just for fun
Bugfoot - A bug that isn’t reproducible and has been sighted by only one person.
Duck - A feature added for no other reason than to draw management attention and be removed, thus avoiding unnecessary changes in other aspects of the product.
Ghetto Code - A particularly inelegant and obviously suboptimal section of code that still meets the requirements. Ghetto caching is similar and refers to storing data in a text file rather than using a “real” caching solution.
Borked - Something is wrong, usually used in reference to the visual layout of a webpage. “The sidebar dropped down and borked the layout.”
Got some more words/phrases/acronyms that probably confuse regular folks?
Share On Twitter Facebook Google+
Abbr’s for Web Nerd Acronyms
I’m really lazy about using tags for acronyms. Most people who read a techy blog like this probably understand …
Read Article →
Dude, you browse with JavaScript on?
Dude, you browse with JavaScript on?
Uhm, yeah, why wouldn’t I?
It’s totally insecure. Hackers could destroy your computer.
Hackers? …
OK, here’s the difference: URLs (Uniform Resource Locators) are a proper subset of URIs (Uniform Resource Identifiers). So both/either will uniquely identify something. A URL also tells you (or really your computer) how to go find it.
Simple answer: A URL is what you type into the address bar on your browser.
If you type a URI that is not a URL (IE: a Uniform Resource Name or URN), it won’t work.
Consider: ‘isbn:0321344758′ is a URI and URN, but it’s not a URL. It uniquely identifies a book. It’s the book “Don’t Make Me Think: A Common Sense Approach to Web Usability,” (2nd Edition, Paperback) by Steve Krug. Type it into your browser. It won’t do anything useful. “But I want to read (or buy) that book! What should I do?” Well what I did, was I typed ‘http://www.amazon.com/’ (a URL) and searched for ‘0321344758’, the ISBN. You could go to any other book sales site or search engine and do the same.
Why have URIs? Well it turns out to be useful to be able to uniquely identify things (like books!) even when you’re not saying how to get one. Often, more information is available later or in the box or program you happen to be using, that will enabling finding the appopriate resource. Or maybe all you care about at the time is uniquely identifying things. . Your definition of sprite seems off to me. The term comes from 2d game design, and the sprite is an individual image: multiple sprites together in one image form a sprite sheet. So, when you use one image that has all states of a link in it, that image is called a sprite sheet. But, maybe it’s different for just web-design ( terms change meaning sometimes when they change domains). . Two questions: the term “tag” is also widely used as a term for a meta-level text descriptor for an image or other resource, quite a different sense from the coders sense, but more widely used. Perhaps the other sense could be noted. Also “anchor” should be clarified, old schoolers who grew up in the days of primitive html still use the term primarily for a link to a place within the same page, as opposed to a link to anywhere…Again, just to expand the text a little to make this clearer. Not being computer literate, found ‘Web Nerd Terminology (Explained)’ to be been an enormous assistance. Thank you
Also, CRUD usually refers to database functions, not basic site functionality. It can also mean how you described it, but it is much more commonly used in the programming world to describing database functionality.
Should also include – PSD, JSON, Jquery, ftp, plugin, database, IDE, debug, mirror, ssh, cpanel, API, screenshot.
for the record, the term “kerning” comes from the noun “kern” which is an overhanging projection of a character off of it’s body. Its origin is from hot metal type when letters were physical things. The way one would achieve satisfactory spacing of a combination of e.g. “To” or “Ye” would be to “kern” the T or the Y.
Given that reality, kerning ALWAYS refers to the REMOVAL of space between letters. LETTERSPACING is the opposite action where one would ADD physical space between letters in order to achieve a more open setting.
TRACKING is a modern term from computerized type setting (when still done by professional, skilled and knowledgeable workers. i.e. pre-Apple) that refers more generically to the act of letterspacing entire amounts of copy, but can also refer to overly tight setting of copy as well (which is discouraged).