14. Glossary#
Warning
Check sources before production.
- 8-bit#
With regard to image formats, 8-bits can describe up to 256 colors (28=256).
A#
- absolute positioning#
Removes the element from the document flow and positions it with respect to the viewport or other containing element box.
- absolute units#
Units of measurement that have predefined meanings in the real world, such as inches or picas.
- absolute URL#
A complete URL that includes the protocol and domain name in addition to the path to the resource
- accessibility#
Features of a site and its underlying code that make it usable by visitors with assistive browsing and input devices.
- adaptive icons#
Icons that dynamically change design based on their size, with very simplified versions used at small sizes and more detailed versions for larger instances.
- alpha channel#
A fourth channel (in RGB images) that stores transparency information as a gradient.
- alpha transparency#
A model in which pixels may be any of 256 levels of opaqueness.
- alternative text#
A text alternative to an image for those who are not able to see it.
- ancestors#
All the elements higher than a particular element in the hierarchy.
- anchor#
The HTML element that creates a hyperlink
- ARIA roles#
The role attribute describes an element’s function or purpose in the context of the document to improve accessibility—for example, role=“alert” or role=“menubar”.
- aspect ratio#
The ratio of width to height.
- attached background image#
A background image that stays in a fixed position relative to the browser window.
- attribute#
Instructions that clarify or modify an element.
- attribute selector#
Targets elements based on attribute names or values.
- attributes#
Additional information that can be added to HTML tags to provide more information about the element.
Styles created by the developer of the website.
B#
- background canvas#
The area in an element box that includes the content area and padding, extending behind the border to the margin edge.
- background painting area#
The area in which fill colors are applied.
- bitmapped image#
Also called raster image. Images that are made up of a grid of tiny colored squares (pixels).
- Boolean attribute#
An attribute that describes a feature that is either on or off. In HTML syntax, Boolean attributes may be written as a single word (such as checked for a form input element).
- border#
A line (or stylized line) that surrounds the element.
- border-box model#
A method for sizing an element that applies width and height properties to the visible box (including the padding and border).
- box model#
A system in which every element in a document generates a rectangular box to which properties such as width, height, padding, borders, and margins can be applied.
- browser preloader#
A function in the browser that fetches images and other external resources from the browser so they are ready to go when the page displays.
C#
- cascade#
A system for determining which style rule applies when there are conflicting rules applied to the same element.
- Cascading Style Sheets#
The styling language used on the web to affect the presentation of elements.
- CERN#
The particle physics laboratory in Geneva, Switzerland, where Tim Berners-Lee first proposed a hypertext-based network in 1989.
- character encoding#
The manner in which characters are converted to bytes for use by computers.
- character entity reference#
A name or a number assigned to a character that is referenced when that character is escaped.
- character set#
A standardized collection of letters, numbers, and symbols.
A form control made up of a collection of on/off buttons that is appropriate when more than one selection is OK (multiple checkboxes in a group may be chosen).
- child#
The element(s) contained directly within a given element (with no intervening hierarchical levels).
- class selector#
Selects an element or elements based on the value of their class attributes (indicated by the period [.] symbol).
- clearing#
Preventing an element from appearing next to a floated element and forcing it to start against the next available “clear” margin edge.
- client#
A piece of software that requests a document or data from the server. On the web, a browser is the client software.
- client-side#
Pertaining to applications that run on the user’s computer.
- clipping#
Using a vector shape to cut out a shape out of the area below it.
- coded character set#
A standardized collection of characters with their reference numbers (code points).
- collapsing margins#
Top and bottom margins overlap, and only the larger margin height is used (i.e., they are not additive).
- color stop#
A point along a gradient line where pure color is positioned.
- color table (also color map)#
Where colors in an indexed color image are stored. The color table for indexed images can be accessed in image editing tools.
- containing block#
The box relative to which the position of an element is calculated. The containing box could be a positioned ancestor element or the html element (viewport).
- content#
The text, images, and other information that is displayed on a web page.
- content area#
The space that contains the content of the element.
- content-box model#
A method for sizing an element by applying width and height properties to the content box only. Padding and border dimensions are additional.
- contextual selector#
Selects elements based on their relationship to other elements (includes descendant, child, next-sibling, and subsequent-sibling selectors).
- Creative Commons License#
A license by which artists may release their artwork for free with certain restrictions.
- CSS#
- CSS pixel#
The pixel unit used in CSS length measurements. The term is used interchangeably with device reference pixels because they map one-to-one.
- CSS shapes#
Non-rectangular wrap shapes around a floated element specified with the shape-outside property.
D#
- declaration#
The part of a style rule with the rendering instructions. It is made up of one or more properties and values.
- declaration block#
The curly brackets in a style rule and all the declarations they contain.
- definition list#
A list that contains name and value pairs, including but not limited to terms and definitions.
- nesting#
The containment of one element completely inside another element.
- descendants#
All elements contained within a given element.
- device-independent pixel (DP)#
What Android calls its reference pixel, equal to one pixel at 160ppi. For Apple, see point (PT).
- device-pixel-ratio#
The ratio of the number of device/hardware pixels to reference pixels. For example, on a 2x display, there would be two device pixels making up the width of one reference pixel.
- disk cache#
Space used by browsers for temporarily storing files on the hard disk.
- display types#
Defines the type of element box the element generates and how it participates in the page layout, for example: inline, block, table, hidden.
- DNS server#
- document body#
The section of the HTML document, defined by the body element, that contains all the content that displays in the browser.
- document head#
The section of the HTML document, defined with the head element, that contains elements pertaining to the document that are not part of the rendered content.
- Document Object Model#
An API for accessing and manipulating the elements and attributes in the document based on the document structure.
- document outline#
The outline created by the heading order within a document.
- document type declaration (DOCTYPE)#
Code at the beginning of an HTML document that tells the browser what version of HTML the document is written in.
- DOM#
- domain name#
A name that is assigned to an IP address to make it easier to reference by humans.
- Domain Name System server#
A computer that uses a database to match IP addresses to domain names.
- DRY (Don’t Repeat Yourself)#
A coding approach that aims to be as efficient as possible and avoids redundant code.
E#
- element#
The building blocks of HTML pages. They are represented by tags. Consists of both the content and its markup (the start and end tags).
- element type selector#
Selects all the elements in a document of a given element type.
- em#
Em unit; it is equivalent to the font size of the current element.
- empty element#
An element that does not contain content, but provides a directive or embeds an external resource on the page.
- escaped character#
A character represented by its Unicode number or a predefined name. For example, the < character must be escaped (represented as < or <) in the source so it is not mistaken for the beginning of a tag.
- explicitly associated labels#
Matches the label element with its form control using the control’s ID reference.
- external link#
A link to a document or resource on a server other than the current server
F#
- favicon#
The little icon that shows up in the browser tab and in bookmark lists. It helps users find your site in a lineup of tabs or bookmarks and can strengthen a brand.
- filter primitive#
A very specific image effect (such as blur or saturate) that can be combined with other effects.
- firewall#
A security device (software) that prevents access to a private network.
- fixed positioning#
Stays in one position in the viewport as the document scrolls.
- float containment#
A technique for expanding or holding open a containing element when all of its children have been floated and removed from the normal flow.
- floating#
Moves an element as far as possible to the left or right and allows the following content to flow around it.
- font#
One particular instance of a typeface that has a specific weight, style, condensation, slant, and so on. For example, Baskerville Bold Italic is one font of the typeface Baskerville. On computers, fonts are usually stored in different files.
- foreground (of an element)#
Consists of the element’s text and border.
- form accessibility#
Markup added to forms that make them easier to understand and navigate with assistive devices.
- form controls#
The buttons, input fields, and menus on the web page that collect information from the user.
- fragment#
A part of a web page
- fragment identifier#
An id value given to an element that assigns a name to the fragment so it can be referenced by a link
G#
- gamma#
The brightness setting on a monitor.
- generated content#
Content that browsers insert on the fly, such as list markers or content added with ::before and ::after pseudo-element selectors.
- GIF (Graphic Interchange Format)#
The first image format supported in web pages, it is an 8-bit indexed format that is also capable of binary transparency and animation.
- global attributes#
Attributes that can be used with any HTML element (for example, id and class).
- graceful degradation#
An approach to web development that designs the fully enhanced experience first, then adds a series of fallbacks for non-supporting browsers.
- grouped selector#
Provides a list of elements to be selected, separated by commas.
- grouped selectors#
Selectors combined in a comma-separated list so you can apply the same properties to them all.
H#
- hexadecimal#
A numbering system that uses 16 digits: 0–9 and A–F (for representing the quantities 10–15). It is used in computing because it reduces the space it takes to store certain information.
- high-density display#
A screen with a pixel density that is 1.5 to 4 times higher than traditional screens.
- HSL color model (Hue Saturation Luminosity)#
A color model that specifies colors by their Hue (in degrees around a circle of colors), Saturation (a percentage value), and Luminosity (a percentage value).
- HSLa#
A color model that specifies an HSL color with a transparency level. The alpha setting is specified on a scale from 0 (fully transparent) to 1 (fully opaque).
- HTML#
- HTTP#
- HTTP header#
Information about the document that the server sends to the user agent before sending the actual document.
- HTTPS#
- HyperText Markup Language#
The markup language used to describe elements on documents that can be connected together with hypertext links.
- HyperText Transfer Protocol#
The protocol used to transfer data over the web.
- HyperText Transfer Protocol Secure#
A more secure web protocol that encrypts form data submitted by the user when it is sent between the client and the server.
I#
- id selector#
Selects an element by the value of its id attribute (indicated by the # symbol).
- implicitly associated labels#
A form control and its brief description nested within a single label element.
- index file#
A default file on the server that is returned if no specific filename is provided in the URL.
- indexed color#
A color model that stores color information in a color table that is referenced by each pixel in the image. It can store a maximum of 256 colors.
- inheritance (in CSS)#
Certain style properties are passed down from elements to the elements they contain (their descendants).
- inline style#
A style rule added with the style attribute right in the opening tag of the element it is affecting.
- inline SVG#
An SVG that is embedded into an HTML document with the svg root element.
- inner edge#
The edges of the content area.
- internet#
An international network of connected computers.
- intranet#
A web-based network that runs on a private network within an organization.
- IP address#
Internet Protocol address – a standardized number assigned to every computer and device connected to the internet.
J#
K#
{glossary}
L#
M#
- m-dot site#
A separate site served to mobile devices (using server-side detection) that may strip out certain content and functions based on how the site is used in a mobile context.
- mailto link#
A link that opens a preaddressed new mail message in the browser’s designated email program
- margin#
An optional amount of space added on the outside of the border.
- markup#
The tags added around content that describe the semantic meaning and function of the content.
- masking#
Using a gradient or bitmapped image to affect the transparency of the image area below it.
- media condition#
Part of a media query that describes a parameter to test for, such as the width of the viewport.
- media queries#
A method for applying styles based on the medium used to display the document.
- metadata#
Information about the document, provided with the meta element in the head of the document.
- MIME type#
A resource’s standardized media type, consisting of a general type (such as “image” or “audio”), a specific media type (such as JPEG or MP3), and a file suffix (.jpeg or .mp3).
- monospace font#
A font in which all the characters have the same width.
N#
- named character entity#
A predefined abbreviated name for the character—for example, — for an em dash (—).
- NCSA#
The creator of the first graphical browser (NCSA Mosaic) that was responsible for boosting the web’s popularity
- non-replaced elements#
Elements that appear in the HTML source (like text).
- numeric character entity#
An assigned numeric value that corresponds to the character’s position in a coded character set such as Unicode.
O#
- open source#
Software that is developed as a collaborative effort with the intent to make its source code and products available for free.
- ordered list#
A list in which the sequence of the items is important.
- origin image#
The first image placed in the background from which tiling images extend.
- outer edge#
The outside edges of the margin area form the outside edge of the element box.
- outline#
An outline is like a border, but it is not calculated in the width of the element box, but rather lays on top of the rendered element.
P#
- padding#
The area between the content area and an optional border.
- palette#
The collection of colors in an image.
- parent#
The element that directly contains a given element.
- pathname#
The notation used to point to a particular file or directory in which directory levels are separated by slashes (/)
- performance#
In web design, the speed at which a web page and its resources downloads, displays, and responds to user input.
- pixel#
A square of colored light used by displays to render images. device pixels (also hardware pixels, physical pixels) The pixels that make up the screen display on a device.
- pixel density#
The resolution (ppi) of a screen.
- PNG (Portable Network Graphics)#
A robust file format designed to contain both 24-bit color and 8-bit indexed color images (as well as gray scale). 8-bit PNGs are the best choice for graphics with hard edges and flat areas of color.
- PNG-24#
A 24-bit PNG capable of storing millions of colors and multiple levels of transparency (alpha transparency).
- PNG-8#
An 8-bit PNG capable of storing 256 colors total and both binary and alpha transparency.
- point (PT)#
What Apple calls its reference pixel, equal to 1 standard device pixel. For Android, see device-independent pixel (DP).
- ppi#
Stands for “pixels per inch,” and is a measure resolution.
- presentation (also presentation layer)#
How the document is delivered to the user, whether rendered on a computer or mobile device screen, printed on paper, or read aloud by a screen reader.
- progressive enhancement#
A strategy for web production that deals with unknown browser capabilities by making sure that content and key interactions are available on all browsing and assistive devices, then adding features for browsers that support them.
- property#
A characteristic of the element, such as size, color, thickness, and so on.
- protocol#
A standardized method for transferring data or documents over a network, for example: FTP for file transfer, and SMTP for email.
- pseudo-class selector#
An implied class applied to elements in the same state (such as hover).
- pseudo-element selector#
Selectors that insert implied or fictional elements into the document for styling.
Q#
- quantization#
The conversion from 24-bit RGB color to an indexed 8-bit format.
R#
- radial gradient#
A transition from one color to another that starts at a point and spreads out in a circular or elliptical shape.
A form control made up of a collection of on/off buttons that is appropriate when only one option from the group is permitted (only one button may be selected at a time).
- reference pixel#
A unit of measurement used by high-density devices for purposes of layout independent of the resolution of the physical pixels in the screen.
- reference pixel (CSS pixels)#
A unit of measurement used by devices for layout purposes. They may or may not match up with the device/hardware pixels.
- relative link#
A relative URL beginning with a slash (/) that is always relative to the root directory for the site
- relative positioning#
Moves the box relative to its initial position in the flow.
- relative units#
Units that are based on the size of something else, such as ems and viewport units.
- relative URL#
The location of a resource on the same server identified relative to the location of the current document
- rem#
Root em unit; it is equivalent to the font size of the html element.
- rendering engine#
The part of a browser’s code that is responsible for converting HTML/CSS/ JavaScript into what you see rendered on the screen.
- replaced element#
An element that is replaced by an external file when the page is displayed.
- replaced elements#
HTML elements that get replaced by other external resources (such as an image).
- resolution#
The number of pixels per inch in a digital image or in a screen display.
- resolution (ppi)#
A measurement of the number of pixels per inch (ppi).
- responsive web design#
A strategy for designing sites that delivers one HTML file and uses CSS to provide appropriate layout to devices based on the screen width.
- RGBa#
A color model that specifies an RGB color with a transparency level. The alpha setting is specified on a scale from 0 (fully transparent) to 1 (fully opaque).
- RGB color model#
A color model that mixes colors from Red, Green, and Blue light. With 256 shades of light in each channel, this color model is capable of creating millions of colors.
- rights-managed images#
Images for which the copyright holder (or company representing them) controls who may reproduce the image. Rights-managed images are generally available for a specific use and for a fee.
- root directory#
The directory that contains all of the files for the site site root
- root element#
The element that contains all the elements and content in the document. In HTML documents, the html element is the root element.
- royalty-free images#
Images for which you do not need to pay a licensing fee.
- rule order#
In the cascade, if there are conflicting style rules of equal weight, whichever rule comes last will apply.
S#
- screen designer#
A new term for designers who design products intended to be viewed on screens (such as web sites, applications, and video games).
- Section 508#
US Government Accessibility Guidelines that must be adhered to if you are developing a .gov website.
- selector#
The part of a style rule that identifies the element or elements to be affected.
- semantic markup#
Marking up a document in a way that provides the most meaningful description of the content and its function.
- server#
A computer running software that allows it to return documents or data on request. A web server is a computer running
- server-side#
Pertaining to applications and functions that run on the server computer.
- server-side detection#
Server software and corresponding database that detect the type of device making the HTTP request, then return an appropriate document based on the device and its capabilities.
- siblings#
Two elements that share the same parent.
- source document#
The text document containing the content and markup for a web page.
- specificity#
The concept that some selectors have more “weight” and therefore override rules with less specific selectors.
- SSL#
Secure Sockets Layer
- standalone SVG#
An SVG document that is saved in its own file with the .svg suffix.
- static positioning#
Elements are positioned as they appear in the normal document flow (the default).
- sticky positioning#
The positioned element behaves as though it is relatively positioned until it is scrolled to a position relative to the viewport, at which point it remains fixed.
- structured data#
Standards that allow content to be machine-readable, enabling it to be used by computer programs (like a calendar app) and search engines. Microformats, Microdata, RDFa, and JSON-LD are examples of structured data standards.
- style rule#
Instructions for how certain elements should be displayed.
- SVG (Scalable Vector Graphics)#
An XML markup language used to describe 2-D vector images. It also refers to the file format of the images written in that language.
- SVG sprite#
A technique in which multiple SVG drawings are defined in one SVG. The use element pulls a particular symbol within the sprite onto the page.
- syntax#
The rules for how code must be structured to function properly.
T#
- tag#
Consists of the element name (usually an abbreviation of a longer descriptive name) within angle brackets (< >).
The basic unit of HTML. They are used to mark up the content of a web page. Text strings between brackets (
< >) that identify elements within an HTML document (for example,<p>and</p>to identify a paragraph). Most elements consist of an opening tag and a closing tag on either end of some content.- TCP#
Transmission Control Protocol
- text-level semantic elements#
What the HTML5 spec calls elements that appear within the flow of text without introducing line breaks (previously called inline elements; also referred to as phrasing content).
- TLS#
Transport Layer Security
- typeface#
A particular design of glyphs (characters) that share common design features, for example Baskerville. Also known as a font family.
U#
- Unicode#
Universal Character Set - a super-character set that contains characters from all active modern languages.
- Uniform Resource Locator#
The address (location) of a file or resource on the web.
- universal selector#
Selects any element, like a wildcard in programming languages.
- unordered list#
A collection of items that appear in no particular order.
- URL#
- user agent#
Another word for the browser in a server/client transaction
- user agent style sheet#
The default style sheet that comes built into the browser (user agent).
- user coordinate system#
The set of coordinates used by the drawing space (user space) that is independent of the viewport coordinates.
- user style sheet#
Style rules created in the browser by the user.
V#
- valid HTML#
HTML that is written according to all the syntax rules for its declared version of HTML, without errors.
- validator tools#
Software that checks an HTML source against the specification to be sure it is valid and error-free.
- value#
The specific setting for a property.
- value (form)#
The data associated with a given variable. It may be entered by the user via a form control or added by the author in the source with the value attribute.
- variable#
A bit of information collected by a form, such as an email address or a date.
- vector image#
An image made up of mathematically defined paths.
- vendor prefix#
A browser-specific prefix added to a property to indicate that it is in an experimental mode (example: -webkit-gradient).
- viewbox#
The canvas on which the SVG is drawn (also called the user space), with its own coordinate system. The viewbox may or may not be the same as the viewport that contains it.
- viewport#
The canvas the web page is rendered on, usually corresponding to the size of the screen or browser window.
- viewport (SVG)#
Defined by the width and height attributes on the svg element, it forms a sort of window through which you see the drawing.
- viewport coordinate system#
The set of coordinates used by the viewport, with 0 starting in the top-left corner and increasing to the right and downward.
- visible element box#
The content, padding, and border (if there is one).
W#
- w-descriptor#
Provides the actual pixel width of the image with the srcset attribute. It is part of the system for providing viewport-based image selection.
- W3C#
The World Wide Web Consortium – the standards body that develops and maintains all the technologies that are used on the web.
- WAI#
- waterfall chart#
A tool built into major web browsers that reveals all the requests made to the server and how long each one takes, as well as the total download and render time for the page.
- web#
One method for transferring data over the internet, using the HTTP protocol.
- Web Accessibility Initiative#
The group at the W3C that oversees efforts across web technologies that make the web more accessible.
X#
- x-descriptor#
Specifies the target device-pixel-ratio for a srcset attribute value in the img element. They are useful for telling the browser to choose the best image option based on screen resolution.
- XML (eXtensible Markup Language)#
A meta-language (set of rules) for creating other markup languages. SVG, MathML, and XHTML are examples of XML languages.
Y#
{glossary}
Z#
- z-index#
Defines the stacking order for overlapping positioned elements.