Glossary
As with anything of a technical nature, understanding the terminology associated with HTML, CSS, and front-end web development is incredibly helpful.
General Terms
- Breakpoint
- The screen size at which a particular media query becomes active in a responsive design.
- Browser
- An application which allows users to fetch and view websites. Behind the scenes, this is achieved by looking up domain names on the DNS system, connecting to a server, downloading requested web content (code files) from the server, and rendering it into a viewable website.
- DNS
- The internet's system for matching a human-readable domain name typed into a browser to the numeric IP Address of a server, where a given website's files are stored.
- Domain Name
- The human-friendly address of a website; the address that is typed into the browser. The browser sends this address to DNS in order to be forwarded to the appropriate server at the IP address associated with the domain name.
- Fluid Design
- Web pages and elements of web pages that stretch and squash to fit the available space. Unstyled web pages are fluid by default.
- Git
- A popular version control protocol. Allows users to keep track of changes made to code and to return to previous versions if necessary.
- Github
- A popular website that offers hosting and management of git repositories.
- IP
- The address of a computer or server on the internet. A browser must obtain this address from DNS in order to communicate with a server and download site files to display.
- Responsive Design
- Web pages that change their layout or other styles based on the media (screen size, orientation, device type) on which it is displayed. Makes use of media queries in CSS to define how and in what context specific CSS should be used.
- Semantic Code
- Refers to HTML code which properly utilizes elements according to their meaning. It is code that describes the content rather than using elements simply based on their appearance.
- Server
- A specialized computer that stores website files and content and makes them accessible on the internet.
- Separation of Concerns
- This is the concept that a webpage's content and style should be kept separate in the code. HTML should determine content, and style / presentation should be left to CSS. This methodology was developed to make sites easier to maintain, re-theme, and parse.
- Syntax
- The parts of a code language and their proper order to make a valid statement. Just as in English statements are made of words and symbols which must come in a certain order to convey a particular meaning, so too must statements in code languages be properly constructed to achieve a desired effect.
- Viewport
- The visible area of a web page in a browser window. Viewport dimensions vary with different device screen sizes, orientation, and window scaling.
HTML Terms
- Attribute
- Additional information that can be added to some HTML elements to provide additional configuration or behavior in the browser. Attributes are written inside the brackets of an element's tag (or opening tag) and consist of either the attribute name paired with a value or just the attribute name for binary attributes. E.g.
<img src="file.jpg">
, where "src" is the name of the attribute and "file.jpg" is it's value. - Browser
- An application / software used for viewing and interacting with websites. Browsers use take a given domain name, reach out to DNS to indicate the IP Address of the associated server, then download the code files for the webpage from the server. Then the files are read to render the webpage as described by the code. Finally, the browser continues watching for user interaction and responds as the code instructs.
- Element
- A discrete piece of code in HTML that defines specific content, such as text, media, etcetera. An element typically includes an opening tag, and may include attributes, and a closing tag (if it is not a self-closing element).
- HTML
- An abbreviation for HyperText Markup Language. It is the most basic language for websites and defines the meaning and structure of content on a web page.
- Self-Closing Element
- Any element that does not require a separate closing tag in addition to the opening tag. For example:
<img src="">
, which stands alone, as opposed to<strong>text</strong>
, which requires the closing tag after the text. - Server
- A special computer for storing code files and other web content. Browsers must connect to a server and download that content to render a website.
- Tag
- The written code associated with an element. Usually consists of the name of the element (or sometime an abbreviation) placed between arrow brackets, e.g.
<section>
CSS Terms
- CSS
- A code language for defining the visual and presentational style of a webpage. CSS code looks for matching pieces of HTML and declaring specific rules for their presentation.
- Declaration / Rule
- A property / value pair that defines the style for one aspect of the selected element. E.g.
padding: 2rem
, where padding is the property and 2rem is the value. - Declaration Block
- A chunk of CSS that includes one or more selectors associated with one or more rules (property / value pairs).
- Property
- Identifies which feature a CSS declaration will affect. A property is paired with a valid value to declare that a specific style should be used. Together, the property / value pair are called a rule or declaration. Examples of properties might include
color
,font-size
, ormargin
. - Selector
- Indicates the particular HTML content to be styled by a given CSS declaration block. Can a be a type of element, a class or ID, or various other more complex methods of identifying particular HTML.
- Stylesheet
- Another word for the CSS file associated with a web page.
- Value
- The specified setting for a given CSS property in a declaration. Each property has its own set of associated valid values. Depending on the property, a value might be numeric (
400
), a measurement (5px
), a color (#efefef
), a keyword (italic
), etcetera.