INP125C – HTML & CSS Essentials

Key vocabulary covering HTML structure, forms, semantic tags, tables, CSS selectors, box model, layout, colors, and typography.

HTML (HyperText Markup Language)

Standard markup language that gives structure to content on the web.

Element

A complete HTML unit consisting of an opening tag, content, and a closing tag.

Tag

The element name wrapped in angle brackets, e.g.,

or

.

Attribute

Extra information added inside an opening tag, written as name="value".

Declaration that tells the browser the document type and HTML version (HTML5).

Root element that encloses all HTML code on a page.

Section that holds metadata like

Sets the text shown in the browser tab for a web page.

Contains all visible page content such as text, images and videos.

Heading elements (

–

)

Text elements that provide hierarchical headings,

being the largest.

Paragraph element used for blocks of text.

Inline container for styling small portions of text.

Generic block-level container used to group elements for styling/layout.

id attribute

Unique identifier for a single element, referenced with # in CSS or links.

class attribute

Reusable name that can be applied to multiple elements, referenced with . in CSS.

Semantic tag that emphasizes text (rendered italic by default).

Semantic tag that marks important text (rendered bold by default).

Line-break element that inserts a single line break; self-closing.

Creates an unordered (bulleted) list.

Creates an ordered (numbered) list.

List-item element placed inside

or
.

Embeds an image; uses src for the file URL and optional alt for description.

alt attribute

Provides alternative text for images; improves accessibility and SEO.

Embeds a video; supports attributes like src, controls, width, height.

Anchor tag that creates hyperlinks via the href attribute.

href attribute

Specifies the destination URL or file path for a link.

target="_blank"

Opens the linked resource in a new browser tab or window.

Relative link

Link that points to a file in the same project, e.g., ./contact.html.

Whitespace & Indentation

Non-rendered spacing used to make HTML code more readable.

HTML comment

Note ignored by browsers, written .

Element that holds tabular data.

Table row.

Table data cell.

Table header cell; can use scope="row" or scope="col".

colspan / rowspan

Attributes that allow a cell to span multiple columns or rows.

, ,

Optional table sections for header, body, and footer.

Collects user input; uses action and method attributes to submit data.

Versatile form field; type attribute defines its behavior.

type="text"

Single-line text input field.

type="password"

Input that masks typed characters.

type="number"

Input restricted to numeric values; supports min, max, step.

type="range"

Slider control representing a numeric range.

type="checkbox"

Selectable box allowing multiple choices.

type="radio"

Exclusive option selector; only one in a group (same name) can be chosen.

&

Creates a dropdown list of choices.

Provides auto-complete options for an field.

Multi-line text input area; rows and cols control size.

type="submit"

Input that submits the enclosing form.

required attribute

Prevents form submission if the field is empty.

min / max attributes

Set numeric limits for number or range inputs.

minlength / maxlength

Set character limits for text inputs.

pattern attribute

Uses regex to validate input against a specific format.

Semantic HTML

Use of meaningful tags (header, nav, etc.) that convey content purpose.

Container for introductory or navigational content at the top of a page or section.

Defines a block of navigation links.

Encapsulates the primary content of a document.

Contains closing or summary content like contact info and copyright.

Logical grouping of themed content within a page.

Independent, self-contained composition (e.g., blog post, news article).

Content tangentially related to the main content (e.g., sidebar, pull quote).

&

Wraps media with an optional caption describing it.

Embeds audio content; supports source and controls.

Deprecated tag that embeds external content like videos or PDFs.

CSS (Cascading Style Sheets)

Language used to style HTML content.

Inline style

CSS written inside an element's style attribute.

Embeds CSS rules within the section of an HTML document.

External stylesheet (.css)

Separate CSS file linked via for cleaner code separation.

CSS selector

Pattern that targets HTML elements to apply styles.

Tag selector

Targets elements by tag name (e.g., p {}).

Class selector

Targets elements by class, prefixed with a dot (e.g., .menu {}).

ID selector

Targets an element by unique id, prefixed with # (e.g., #header {}).

Specificity

Hierarchy that determines which CSS rule wins: IDs > classes > tags.

Chained selector

Combines multiple selectors (e.g., h1.special) for more specificity.

Nested selector

Targets elements inside others (e.g., .menu li).

Box Model

Concept that every element is a box with content, padding, border, and margin.

padding

Space between content and border inside an element.

border

Line surrounding padding and content; style, width, color configurable.

margin

Space outside an element's border, separating it from other elements.

border-radius

Rounds the corners of an element's border box.

overflow

Controls handling of content that exceeds its box: visible, hidden, scroll.

display: inline / block / inline-block

Determines if elements share a line, break lines, or combine both behaviors.

position: relative

Moves an element relative to its normal position using top/right/bottom/left.

position: absolute

Positions an element relative to the nearest positioned ancestor.

position: fixed

Pins an element to the viewport; stays visible on scroll.

z-index

Controls stacking order of overlapping positioned elements.

float

Moves an element to the left or right, letting text wrap around it.

clear

Specifies which sides of floating elements should not be adjacent to an element.

color property

Sets foreground (text) color of an element.

background-color

Sets background fill color of an element.

Hex color

Six- or three-digit base-16 color code starting with # (e.g., #FF5733).

RGB color

Uses rgb(r,g,b) with values 0–255 for red, green, blue.

HSL color

Uses hsl(hue, saturation%, lightness%) format for colors.

Alpha / Opacity

Fourth value in rgba() or hsla() sets transparency from 0 (transparent) to 1 (opaque).

font-family

Specifies the typeface for text; can include fallback fonts.

font-size

Controls how big text appears, typically in px, em, or rem.

font-weight

Sets thickness of text: normal, bold, or numeric 100–900.

font-style

Controls italics or normal style of text.

line-height

Sets vertical space between lines of text; controls leading.

letter-spacing

Adjusts spacing between characters (tracking).

word-spacing

Adjusts spacing between words.